How To Use VIM for Frontend Development: 2020 Edition

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.

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.

VIM to the rescue.

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 : it’s our safe haven. (Isn’t cit for awesome by itself?)

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:

Plug ‘git-user/git-repo'

Let’s see some action.

1.

Isn’t that much better than typing it all?

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

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

2.

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.

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

let g:tagalong_verbose = 1

3.

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.

Where did that aside come from!?

Here it is.

4.

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.

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

Plug ‘dense-analysis/ale’

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.

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

Besides all these neat plugins, what I like the most about VIM is that it makes you think about how your code is structured: We should take advantage of this fact when dealing with it.

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