How To Use VIM for Frontend Development: 2020 Edition

2,488 reads

Why would you want to use an editor that is almost 30 years old?

Because it has come to stay, and isn’t it better to learn something that will stick around? Well, also because it is damn powerful.

reactions

VIM is free and open source, VIM is probably already installed in your

computer (if you are running UNIX). And VIM can be hard. But it does not

have to be painful! In fact, it can make writing HTML and CSS a much

nicer experience.

reactions

Working every day with HTML and CSS made me look for plugins and configuration tweaks that allow me to move fast within and through files, maneuvering and editing those nice and readable chunks of indented HTML. OK, maybe they aren’t always that nice.

reactions

VIM to the rescue.

reactions

There are many approaches to VIM, some like to keep it minimal and some like to experiment with many plugins. We will not delve into this discussion:pick and choose from what you find useful in this post. Also strive to get better at vanilla VIM: it’s our safe haven. (Isn’t cit for changing inside a tag awesome by itself?)

reactions

To follow this tutorial, you should be familiar with installing VIM plugins. I will be using vim-plug as my plugin manager of choice, just as I do in my personal work. Follow the link to understand how to install the plugins. If you’re starting with VIM, this YouTube series can help get you up and running

reactions

All the code in this article goes into your .vimrc (for VIM) or init.vim (for neoVIM). The code that has the following structure is supposed to

be inserted inside your plugin block:

reactions

Plug ‘git- user /git-repo '

Let’s see some action.

1. emmet-vim

reactions

Emmet uses css style syntax to spit big blocks of HTML: not much typing and a lot done. Fast. Of course emmet is not exclusive for VIM, in fact it comes already bundled with VSCode (Who’s asking?). But it goes specially well with VIM flexible and configurable approach to editing.

reactions

Isn’t that much better than typing it all?

reactions

We can have emmet installed only for HTML and CSS

reactions

let g:user_emmet_install_global = 0 autocmd FileType html,css EmmetInstall

You can pick whichever keyboard shortcut you want. Following this example I’ve assigned emmet leader key to ‘,’

reactions

autocmd FileType html,css EmmetInstall let g:user_emmet_leader_key=’,’

2. tagalong

reactions

Emmet allows us to have a lot of code, quickly. But who gets it right on the

first time? Using tagalong we can change the opening tag and automatically change the corresponding closing one.

reactions

The fun starts when the text can’t fit in your window.

reactions

It is nice to have some visual feedback when the text is edited, therefore we can allow tagalong to send us a message once the editing is done.

reactions

let g: tagalong_verbose = 1

3. vim-surround

reactions

What about deciding we have to surround our element with yet another one? Sounds like something you could have to do? vim-surround will let us

enter visual line mode, select a block of text and wrap it with another

element.

reactions

Where did that aside come from!?

reactions

Here it is.

reactions

4. ALE (Asynchronous Lint Engine)

reactions

Just because we are using a piece of software release 28 years ago, that

doesn’t mean we can’t benefit from the modern as-you-type linting and

fixing. In fact, ALE supports many linters, crossing the bridge between

the UNIX extensibility and modularity that we know and love to our

editor of choice.

reactions

Give me a break, ALE! Err... not really, please don’t.

reactions

Plug ‘dense-analysis/ale’

For better debugging, I will let ALE only use the linters and fixer explicitly defined: this will help us try out new tools and know what is doing the best job for us at the moment, or even use specific project directives.

reactions

let g:ale_fixers = { \ ‘html’: [‘prettier’], \ ‘css’: [‘stylelint’], \}let g:ale_linters = { \ ‘html’: [‘htmlhint’], \ ‘css’: [‘stylelint’], \} let g:ale_linters_explicit = 1 let g:ale_fix_on_save = 1

The linters should be installed on your computer and available on your

path. Check the guidelines of the tool you’ll be using on how to do

that.

reactions

:ALEInfo from vim will show the suggested, available and enabled linters/fixers, that can be extremely helpful installing and getting our linter/fixer working.

reactions

Besides all these neat plugins, what I like the most about VIM is that it makes you think about how your code is structured: source code is text, but it is a much more structured kind of text than prose. We should take advantage of this fact when dealing with it.

reactions

Previously published at https://medium.com/@felipe.anjos/vim-for-web-development-html-css-in-2020-95576d9b21ad

reactions

Tags