When I’m writing HTML and CSS, being forced to type out repetitive and fixed syntax, as well as remembering the particularities of the syntax and its formatting, makes me rather unhappy. Not to mention less productive. Let’s fix that.
HTML highlighting and snippets
Place html.vim in ~/.vim/syntax. Then in a file ending in .html, start a tag, e.g. <script, and press <Tab>:
Now the skeleton of the tag will be added for you, and your cursor placed in the first place you will likely need to edit. You navigate through these editable areas with <Tab>, adding your particulars. When at the last one, simply tab again to be placed after the tag. This makes properly adding tags much easier, especially for less familiar tags that are only occasionally needed. Here’s another example with a tag that is often needed and quite tedious:
The <{}> indicate places you can navigate to with tab. Once you are in one and tab past, those characters are removed. You can also add javascript.vim in ~/.vim/syntax, and the previous script will load this in appropriately.
This script also provides color highlighting for matching filetypes. When in a file ending in .html, type “:help html.vim” to see more information.
Closing tags
It’s also useful to be able to trigger close tags, if you started typing them manually. I find this most troublesome when editing HTML and XML. To add this capability, download the latest version of this script in ~/.vim/ftplugin/html.vim.
Then when you have started a tag and wish to close it (in files ending in .html), press <Ctrl> + <_> (that’s an underscore, so Shift + -). This will insert the close tag matching the closest previous open tag under the cursor:
Formatting
The following directives in your ~/.vimrc will make proper formatting automatic for CSS and HTML files:
1
2
3
4
5
6
7
8
| " for CSS, also have things in braces indented:
autocmd FileType css set smartindent
" for HTML, generally format text, but if a long line has been created
" leave it alone when editing:
autocmd FileType html set formatoptions+=tl
" for both CSS and HTML, use genuine tab characters for
" indentation, to make files a few bytes smaller:
autocmd FileType html,css set noexpandtab tabstop=2 |
Watch your sppellinng
While writing HTML code involves plenty of code, you also end up writing text that others might just see. Don’t let mistakes in spelling slip by any more than you would let syntax errors. Add this to your ~/.vimrc to be able to toggle display of spelling errors with <F7>:
1
2
| " F7 to toggle spell-checking
map <silent> <F7> :set nospell!<CR>:set nospell?<CR> |
This post explains more advanced commands, such as bringing up suggestions, as well as customizing the formatting.
Tidy up
Being able to clean up your HTML code with a single command, making it more standards compliant and easier to read, is a great boon. To get this working for vim, first install tidy, an HTML syntax checker and reformatted. On Ubuntu, it’s available in the repository as “tidy”.
After that’s installed, add the following lines to your ~/.vimrc:
1
2
| setlocal makeprg=tidy\ -quiet\ -errors\ %
setlocal errorformat=line\ %l\ column\ %v\ -\ %m |
Now when in files ending in .html, type “:make”. All the errors Tidy found will be shown a list. Then press Enter to be taken back into the file, with the cursor on the first error, which is described at the bottom of the window:
Press “:cn” to move to the next error found, and “:cp” for the previous. As you encounter each error, you can fix it and move on. Once done, save the file, and run “:make” again to verify everything is fixed.
