Press "Enter" to skip to content

Learning Vim through Web Development, A Top Down Approach. Part 2: HTML and CSS

The objective of the second part of this series is to add the minimum configuration to my .vimrc file to make Vim into a viable HTML and CSS editor.

I wanted to do was be able to write out HTML using some sort of shortcut mechanism. In RubyMine for instance, typing p then hitting tab expanded p into <p></p> with the cursor positioned between the opening and closing tags. RubyMine, like all JetBrains IDEs accomplishes this through its live templates feature. RubyMine also has an Emmet implementation that allows you to expand an emmet abbreviation into HTML markup.

To accomplish this objective, I added the vim-snipmate plugin, along with it’s dependencies, to my .vimrc file (recall from my previous post that I’m using vim-plug as my plugin manager).

Plug 'tomtom/tlib_vim'
 Plug 'MarcWeber/vim-addon-mw-utils'
 Plug 'garbas/vim-snipmate'

I also included the vim-snippets plugin, which contains snippet definitions for various programming and markup languages.

Plug 'honza/vim-snippets'

Editing HTML

These plugins allow me to replicate much of the live template functionality I’ve grown accustomed to using RubyMine. For instance, when editing an HTML file, typing

p

and then hitting tab expands to

<p></p>

with the cursor positioned between the tags. Typing

p.

followed by tab expands to

<p class=""></p>

with the cursor positioned between the quotations of the class attribute. After entering text here, hitting tab again positions the cursor between the elements as it did with the previous example.

An exhaustive list of all the HTML snippets available in the vim-snippets plugin can be found here.

Editing CSS

When editing CSS, typing

h1.

expands to

h1 {
  $
}

with the cursor positioned after the CSS selector. This is to allow you to add more selectors to CSS rule you are defining. For instance, I could add specify h2 and h3, and hit tab again to place the cursor on the $

h1, h2, h3 {
  $
}

While the cursor is on the ‘$’, I can enter ‘ff’ and hit tab, which will expand to


h1, h2, h3 {
  font-family: ;
}

An exhaustive list of all CSS snippets available in the vim-snippets plugin can be found here.

Emmet

The plugins above likely get me 90% of what I’m looking for when it comes to editing HTML and CSS. However, the emmet features available in RubyMine as previously mentioned seemed to powerful to ignore. For that reason I included the emmet-vim plugin in my configuration.

Plug 'mattn/emmet-vim'

This allows Emmet’s sophisticated syntax to be expanded into complex markup. For example,

nav>ul>li*5

expands to

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

when hitting control + y followed by ,.

This cheat-sheet demonstrates just how powerful Emmet’s features are when editing HTML and CSS.

Extra Configurations

While I worked with HTML and CSS examples usingĀ  plugins mentioned above, I noticed my Vim editor was missing a status bar, so I added vim-airline and it’s associated theme plugin vim-airline-themes to my .vimrc file.

Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'

This displays, among other things, the current file being edited and the current vim mode, as shown in the following screenshot:

The vim-css-colors plugin

Plug 'ap/vim-css-color'

shows a preview of the colors defined in the current CSS file:

I also mapped the <F5> key to opening the current HTML file in the default browser

noremap <F5> :!open %<CR><CR>

and configured {<CR> to expand to two open curly braces with a newline and tab between them

inoremap {<cr> {<cr>}<c-o>O

One useful tip I found was that hitting ctrl + ^ toggled between the two most recent buffers. This made toggling between an HTML file and its associated CSS file much easier.

My current .vimrc configuration is shown below:

let mapleader = "'"

" Plug config
call plug#begin('~/.vim/plugged')
Plug 'flazz/vim-colorschemes'
Plug 'scrooloose/nerdtree'
Plug 'scrooloose/nerdcommenter'
Plug 'ctrlpvim/ctrlp.vim'
Plug 'mileszs/ack.vim'
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'

" code plugins
Plug 'tomtom/tlib_vim'
Plug 'MarcWeber/vim-addon-mw-utils'
Plug 'garbas/vim-snipmate'
Plug 'honza/vim-snippets'
Plug 'mattn/emmet-vim'
Plug 'ap/vim-css-color'
call plug#end()

" key mappings
noremap <silent> <Leader>n :NERDTreeToggle <Enter>
noremap <F5> :!open %<CR><CR>
inoremap {<cr> {<cr>}<c-o>O

" General config
set nocompatible
colorscheme brogrammer
set number
set expandtab
set tabstop=2
set shiftwidth=2

" Nerdtree config
let g:NERDTreeWinPos = "right"

This takes care of my HTML and CSS Vim configuration. The next entry in this series will explore plugins and configurations for editing JavaScript. As mentioned in the last post, Vim Awesome remains a great resource for finding plugins tailored to my specific needs.

References

Vim Awesome
SnipMate
vim-snippets
Emmet-vim
CSS Color
vim-airline
vim-airline-themes
Emmet Cheatsheet