Get vim to provide tab completion for CSS class and ID names

Question

The one IDE feature that I always missed and invariably plug into vim is tab completion.

I'm a big fan of SuperTab , but one thing I can't stand is the fact that it treats the parts of CSS class names and IDs with dashes as individual words.

I've found a couple of possible solutions for camelCase and underscore_completion but I can't seem to find anything that supports plain-old-dashes.

Answer 1

This is not a CSS-specific problem: Vim uses the value of iskeyword to perform completion.

Type :set iskeyword? to see what characters are considered to be part of keywords. The default on a Mac is supposed to be @,48-57,_,192-255 .

You can add the dash to the list with this command:

:set iskeyword+=-

Add this line to your ~/.vimrc to make this setting stick:

set iskeyword+=-

Answer 2

This seems to work for me:

autocmd FileType css,scss set iskeyword=@,48-57,_,-,?,!,192-255

Taken from here: VIM: How to autocomplete in a CSS file with tag ids and class names declared in HTML file

Answer 3

For future readers: if you want the benefits of dashes for edit/movement commands, but want full property autocompletion, try adding this to your .vimrc :

augroup css_dash_autocompletion
    autocmd FileType scss,css autocmd! css_dash_autocompletion InsertEnter <buffer> set isk+=-
    autocmd FileType scss,css autocmd css_dash_autocompletion InsertLeave <buffer> set isk-=-
augroup END

The first ! prevents duplicate event firing. Thanks to ZyX for the structure. If you re- source your .vimrc , you will need to :e any (S)CSS files you have open to pick up the change.