Spell Check
Enable spell checking by :set spell spelllang=en_us
Or just :set spell
Jump to next and previous incorrectly spelled word by | s || [ | and | s || ] |.
List dictionary replacement suggestions by [z][=]
Turn it off by :set nospell
Code indentation
VI will usually come preconfigured to automatically indent your code based on the file extension. When you enter your code you can skip manually indenting; skip hitting tabs. You can trigger the automatic indentation formatting. You can do that by highlighting and pressing the [=] key. You can highlight and indent the whole page too by pressing the [=].
Indenting a Section of Page
You can trigger the auto indent script on the current line by pressing the [=] key. Usually you want to auto indent more than just current line. You can highlight a few consecutive lines and then press key [=]; command follow:
[v][j][j]...[=]
You would navigate to the first line of the lines you want to indent, then press [v]. Now press [j] to highlight down a line. Repeat for the number of lines needed. With your lines highlight, press [=].
Highlighting the Whole Page
Press [g][g] to move to the top of the page. Press [v] to trigger highlight mode. Finally [shift]+[g] or [G]. Now with the whole page press [=] as per usual.
[g][g]
[v]
[G]
[=]
Indenting the Whole Page
You can indent the whole page once it is highlighted as above. But you can skip the highlight step. Once at the top of the page by [g][g] next press [=]. Finally press [G].
[g][g]
[=]
[G]
Shift Width
:set shiftwidth=2
:set shiftwidth=4
The amount of each indentation is set by the variable name shiftwidth. But default it is set to a tab width which is four. It is the perfect amount except for html.
In most programming languages like C or JavaScript your code will need to be indent once, twice, or maybe three times. But in the XML/HTML language, your code can starts with a couple indents to start. You start with the html tag, then the head and body are indented. Then in your body section we often start with a full page wrapper node which will be another indentation. So there is a lot more indentation required for XML/HTML. We begin coding already indented half to the right of the page.
It would be preferrable if indentation would skip that first body and page wrapper nodes and only start indentation from that point on. I am sure VI can be customized but I would take some work. I skipped it. Instead I decrease the shiftwidth to two or three when my code goes too far right.
Admittedly setting a smaller shiftwidth makes the code indetation harder to spot. It is not an elegant solution. The first mentioned, customizing the indentation to skip the first few nodes would be superior. But shiftwidth works too. You can set it to two, enter in your code work, and then set it back to four after you are done editing.
Yank(copy) Registers ["]
VI is old software and so the language used by it's command names are archaic. Our forefathers used to say yank where we now say copy. They used to call it a register where we today say clipboard. Today the copy command is assigned to the letter key [c]. The past generation used to use the word yank and so letter key [y]. In VI we copy with the [y] key instead of [ctl-c]. We can copy to registers/clipboard by letter keys [a-zA-Z] just like storing jump markings.
An example yanking(copying) to register [a]:
["][a][y]
And then paste it anytime using:
["][a][p]
Or while in edit mode:
[ctl-r][a]
You can view your yanked register contents and view them in multiples as follow:
:reg a b d
VI automatically stores yank history in registers 0,1,2..9. You can view them as follows:
:reg
And paste them as per usual for example history yank five back:
["][5][p]
Repeat last command: [.], [@:] or [:@]
Search and Replace href and src Link Paths
SEO URLs
Most web designers use content management systems most popular being Wordpress. These CMSs take care of the following for you. When you code the html pages yourself by hand, you will prepare template pages and then copy-paste it as needed. A popular practice is to put each page in it's own path. In the past your would often see a website's home page at the ./index.html url and then other pages such as the contact page at contact.html. But then the industry adopted the practice of configuring the other pages such as the contact page at contact/index.html. Since web servers are configured to automatically serve the index.html file at any path that part of the url can be omitted.
./contact.html
./contact/index.html
./contact
Path to Root
When coding your average four to five broschure website you would start with the home page at the root path. Once ready you will have a website wide design template prepared. The next pages for example the contact page would go in it's own path. That path would then be one level above the root path. The path to the root path from the root path is [./]. The path to the root path from one level up is [../]. With your template prepared for the root path you will want to copy-paste a version located at paths one level up. So you will want to search and replace [./] with [../].
You can search and replace the whole doc using the following command set:
:%s/\.\//\.\.\//
Obviously both the periods and forward slashes have to be escaped since they are regex operators. It is easy to build keyboarding muscle memory for that backslash escape key [\]. It is a bigger key.
Search and Replace Horizontally
Perhaps you have a comma, space or other delimiter separated item list on a single line. When you code lists in html you usually want to put each item on their own line. So first format the list items each on their line by using the escaped character code \r.
word1 word2 word3
:s/\s/\r/g
word1
word2
word3
Then you want to quickly markup them up with html list tags <li></li>.
Beginning of Line :.,+3s/^/<li>/
End of Line :.,+3s/%/</li>/
Code Folding
You can fold blocks of code by:
[z][f]