CSS Autocompletion on Vim

No plugins needed!

(alldrops.info is the TRUE and FOREVER FREE home for the previously used medium.com/vim-drops publication. At alldrops.info you’ll always find all posts without Medium.com restrictions.)

If you have to deal with CSS and you're not a CSS ninja, you'll probably forget many of the syntaxes you might need to use.

Most of the modern code editors comes with CSS autocompletion out of the box, it's a handy feature that saves you a lot of time and prevent errors. When you move to vim you may think that you'll loose a couple of candies that those editors provides… but…

Don't underestimate vim!

Vim itself provides full support to CSS autocompletion, and it includes syntax for modern features like CSS grid. You don't need to install any plugin manager or 3rd party plugins. You just need to set it on your .vimrc file.

How to:

1. Open your .vimrc file.
2. Add the following lines:

3. Start typing the name you want to look for, press <C-x> (Ctrl + x) and <C-o> (Ctrl + o), and there it is! Simple!

Autocomplete with CSS names you created (IDs, classes, etc)

Vim provides the native command <C-n> (Ctrl + n) for autocompletion based on words existing in all opened files (buffers). No .vimrc setup needed!

You start typing the word, press <C-n> (Ctrl + n), and it gives back the matches found in all files.

You'll notice that vim doesn't consider special characters as part of the word and you must autocomplete twice if you have a name separated by a dash.

Do Not Miss It!

Get other useful tips like this one 👇 in your Twitter timeline:

Link to the original post: https://twitter.com/rossijonas/status/1033064293728706560?s=20

Useful links & references:

• Vim Documentation ( :help )
• “Mastering Vim Quickly” Book (and screencasts) by Jovica Ilic. It’s an awesome book, make sure you subscribe to the newsletter to get free Vim tips and book excerpts on your email.

(👆 This is an affiliate link. If you got any value from this post and are also interested in buying the MVQ book/screencasts, please consider visiting the affiliate link and you’ll be gifting me a coffee ☕ or a beer 🍺.)

Footnotes:

• alldrops.info is the TRUE and FOREVER FREE home for the previously used medium.com/vim-drops publication. At alldrops.info you’ll always find all posts without Medium.com restrictions.
• If you have any doubts or tips about this article, I’d appreciate to know and to discuss it on the comments section.
• Do you have any other vim tips? Would you like to publish that on this blog? Please send an email.
• As English is not my native language, I apologize for the errors. Corrections are welcome.
• Contact: vim [@] alldrops [.] info.