Our code editor of choice is VI or more precisely GVIM. Here we present an introduction to using VI for web programming. We begin with the basic command modes then enumerate our favourite tools and commands for web programming.
You are new to computer programming and are considering VI as your editor of choice. Or you are an existing VI user and are interested in a reference page of tools and commands.
VI offers speedy text editing. You can make big moves with the slight of a few finger strokes. You may be tempted to try and move as quick as you can with your fingers in addition to VI speedy maneuvers. Starting out your documents will probably not be so important yet. Carrying on this way there may come in the future when it counts that you may make a big mistake. Make your moves carefully. Let VI be speedy and your fingers more deliberate.
One of the great advantages of VI is keyboard commands and shortcuts. Keyboard commands and shortcuts are advantageous because they do not require reaching for the mouse. VI predates the age of the mouse input device. Those commands and shortcuts were a necessity back then. The mouse input device was a great enhancement to the computing experience. But we all must have noticed that the mouse can stifling while text editing. Grabbing the mouse and finding your way back to the keyboard again hardly costs but a few milliseconds of overhead but the price to your concentration is immeasurable. With VI you can keep your hands on the keyboard; your fingers on the "home row key position"(while keeping your index fingers in place at the [ f ] and [ j ] keys). Making the effort to learn a text editor that comes equipped with shortcut keys and commands such as VI allows you to concentrate on your work without regular interruptions by way of reaching for the mouse and back.
VI includes a version of REGEX(regular expression). The learning curve for REGEX is steep even for computer programmers. Indeed, it is a programming language of it's own. Many of the command line actions we enumerate in this article include REGEX expressions so we will start with a quick example. It is the most basic and common use of REGEX usage. The practicality of example itself is of seldom use. We present generating html markup. In practive we would just copy paste such html markup. As far as REGEX goes, you may want to skip it for last if it is new to you. If you are familiar with REGEX, the following could be a welcomed refresher. If you are more than familiar, the following may just be useful as a quick reference.
Suppose you have a list of items from a csv file or a space separated list such as the following:
item1 item2 item3 item4
And you want to mark it up with <li> tags real quick. We can do it quickly and easily with three REGEX command lines. The first step is to replace the spaces with newlines so we get each item on their own line as follows:
:s/\s/\r/g
item1
item2
item3
item4
Next replace the start of the line with a <li> an opening tag:
:.,+3s/^/<li>/
<li>item1
<li>item2
<li>item3
<li>item4
Finally replace the end of the line with the closing tag:
:.,+3s/^/<\/li>/
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
With that, you have dynamically generated html with just a few simple commands right inside your text editor instead of a programming platform. The specialized code text editor such as VI is a formidable tool in any programmers arsenal.
There are two modes, edit and command. You enter edit mode from command mode by the [ i ] or [ a ] key. You escape from insert mode and enter command mode by the [ esc ] key.
Enter edit mode: [ i ] or [ a ]
Exit edit mode: [ esc ]
It is popular to re-map [ esc ] to [ j ] [ j ] using command line ":imap jj <esc>.
Move your cursor left, down, up and right in command mode by the [ h ] [ j ] [ k ] and [ l ] keys respectively:
[ h ] [ j ] [ k ] [ l ]
Jump to the top of the page and bottom by [ g ] [ g ] and [ shift ] + [ g ] or double tap " [ " and " ] " respectively.
Jump to top of page: [ g ] [ g ] or " [ "
Jump to bottom of page: [ shift ] + [ g ] or " ] "
Jump to the previous jump point by double tapping the [ ' ] key. For example if you jump to the top or bottom of the page as above you can jump back by double tapping the [ ' ] key.
Jump to previous line position: [ ' ] [ ' ]
Scroll the page up and down by the [ ctl ] + [ e ] / [ y ] respectively.
Scroll down: [ ctl ] + [ e ]
Scroll up: [ ctl ] + [ y ]
Scroll up and down by a full page using [ ctl ] + [ f ] and [ ctl + [ b ]; easy to remember by 'f' for forward and 'b' for backwards.
Scroll a page forward: [ ctl ] + [ f ]
Scroll a page backward: [ ctl ] + [ b ]
Position the page scrolling so that the current line in centered vertically by [ z ] [ z ] .
Center current line vertically: [ z ] [ z ]
Jump up and down the page by paragraph blocks by the " [ " and " ] " keys.
Jump up by small paragraph blocks: " [ "
Jump down by small paragraph blocks: " [ "
Jump up and down the page a single paragraph block by the " { " and " } " keys.
Jump up a paragraph : " { "
Jump down a paragraph : " } "
Jump up and down the page by larger paragraph blocks by [ ctl ] + [ u ] and [ ctl ] + [ d ] keys. This one is easy to remember by u for up and d for down.
Jump up a large paragraph blocks: [ ctl ] + [ u ]
Jump down a large paragraph blocks: [ ctl ] + [ d ]
Jump to the next word by the [ w ] or [ e ] to the beginning and ending of the word and to the previous word by [ b ] or [ g ] [ e] keys.
Jump to next word: [ w ] or [ e ]
Jump to prev word: [ b ] or [ g ] [ e ]
Jump to 10th next word: [ 10 ] [ w ]
Jump to beginning and end of the line by the [ ^ ] or [ _ ] and [ $ ] keys.
Jump to first character of the line: [ ^ ] or [ _ ]
Jump to last character of the line: [ $ ]
Jump to the tenth column along a line using [ | ]. Where as [ ^ ] skips spaces and tabs and jumps to the first character, with the [ | ] command it does counts white spaces too.
Jump to 10th column: [ 10 ] [ | ]
You can mark jump points and save them to any letter [ a to z ] and [ A to Z ] by [ m ]. Then jump around and instantly jump back to that marked point saved by [ ` ].
Store current line number in [ a ] as jump point : [ m ] [ a ]
Then jump back by: [ ` ] [ a ]
Your jumps are saved in a history cache. You can jump through it forward and backwards by [ ctl ] + [ o ] or [ ` ] [ . ] and [ ctl ] + [ i ].
Jump to previous: [ ctl ] + [ o ]
Jump to previous: [ ` ] + [ . ]
Jump to next: [ ctl ] + [ i ]
Your jump history can be used after a file closed and re-opened. You can return to your previous edit point [ ` ] [ ^ ].
Jump back after file close and re-open: [ ` ] [ ^ ]
There is a second command mode. Enter [ : ] and notice your cursor on the bottom left on the page. There instead of shortcuts you can enter command sequences.
View jumps history: [ :jumps ]
List marks: [ :marks]
Jump to line number 10: [ :10 ]
View line numbers: [ :set number ].
Get rid of the line numbers [ :set nonumber ]
You save(write) and quit in command line mode.
save: [ :w ]
quit: [ :q ]
You list open files(buffers) in command line mode.
list: [ :buffers ]
close(delete): [ :bd ]
Actually there is a third mode from which the "v" for visual in vi edit comes. Highlight text by the [ v ] for visual mode key following by the [ h ] [ j ] [ k ] and [ l ] navigation keys.
Enter highlight mode from command mode: [ v ]
Highlight text using navigation keys: [ h ] [ j ] [ k ] [ l ]
Auto-indent your code by first highlighting and then by the [ = ] key. Highlight the whole document by hitting [ g ] [ g ] then [ v ] and then [ shift ] + [ g ]. Highlight and auto-indent the whole page, follow the previous command series by [ = ]. Shortcut for auto-indenting the whole page [ g ] [ g ] then [ = ] and then [ shift ] + [ g ].
Highlight and auto-indent a few lines: [ v ] then [ h ] [ j ] [ k ] [ l ] and then [ = ]
Auto-indent whole document: [ g ] [ g ] then [ = ] and then [ shift ] + [ g ]
Set indentation tab size: [ :set shiftwidth = 4 ]
Undo: [ u ]
Redo: [ ctl ] + [ r ]
delete at cursor: [ x ]
delete before cursor / backspace: [ shift ] + [ x ]
Replace letter under cursor by [ r ] followed by your replacement character.
Repeat the last command by [ . ].
Cut a word: [ d ] [ w ]
Copy/yank a word: [ y ] [ w ]
Paste previous cut/yank: [ p ]
Paste previous cut/yank before cursor point [ shift ] + [ p ]
Cut entire line: [ d ] [ d ]
Cut 10 lines: [ d ] [ 10 ] [ d ]
Copy/yank entire line: [ y ] [ y ]
Copy/yank 10 lines: [ y ] [ 10 ] [ y ]
Cut to the end of line: [ d ] [ $ ]
Cut to the last line: [ d ] then [ shift ] + [ g ]
Join current and next line: [ shift ] + [ j ]
Open a newline below: [ o ]
Open a newline above: [ shift ] + [ o ]
You can copy/yank into registers similar to marked line jump points using [ " ].
Highlight your text : [ v ] [ j ] [ k ]
Copy/yank into register a: [ " ] [ a ] [ y ]
Paste from register a: [ " ] [ a ] [ p ]
Paste from edit mode: [ ctl ] + [ r ] then [ a ]
The registers numbered [ 0 - 9 ] store store your register history.
view reg history: [ :reg ]
view reg a b c: [ :reg a b c ]
last inserted text: [ ". ]
current file path: [ "% ]
last file path: [ "# ]
most recent command: [ ": ]
repeat most recent command: [ @: ]
Search for a word by [ /word ].
Search word "word": [ /word ]
Search backwards: [ ?word ]
Find next match: [ n ]
Find previous match: [ shift ] + [ n ]
Search and substitute word1 with word2: [ :s/word1/word2 ]
globally with confirmation: [ :s/word1/word2/gc ]
Substitute for every lines: [ :%s/word1/word2 ]
Substitute for current line to last: [ :.,$s/word1/word2 ]
Substitute for current line to next 10: [ :.,+10s/word1/word2 ]
Split vertically: [ CTL ] + [ w ] then [ v ]
Split horizontally: [ CTL ] + [ w ] then [ s ]
Enable spell checker: [ :set spell ]
Enable by language: [ :set spell spelllang=en_us ]
Jump to next misspelled/underlined word: " ] s "
Jump to prev misspelled/underlined word: " [ s "
List correction suggestions: [ z ] [ = ]
scroll with ctl + e | y | f | b
:reg | "ay | "ap | ctl + r, a
:jumps | :marks | ma | `a | ctl + o - prev | ctl + i - next
repeat cmd with period . or cmd line with @:
There are many more shortcut, command and command line options available in VI. The options included here are more than enough to experience the advantage of a feature rich text editor.
There is also a vimrc configuration file for setting some of the above mentioned commands permanently.
VI also includes code folding by [ zf ] key strokes.
VI with all it's great options is great for any writer not just the computer code writer.