CODEWITHSUNDEEP
vim
Mark Ferree
Mark Ferree

Reputation: 415

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

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.

Upvotes: 3

Views: 1367

Answers (3)

Walf
Walf

Reputation: 9308

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.

Upvotes: 1

Cezar Halmagean
Cezar Halmagean

Reputation: 902

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

Upvotes: 2

romainl
romainl

Reputation: 196566

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+=-

Upvotes: 9

Related Questions