Vim From Scratch

Vim for JavaScript and React in 2019

> 9 months ago

Here's
Here's How My Vim Looks Like

In this article, I’d like to share some of the Vim plugins that will transform your Vim into an IDE for JavaScript and React (step back, VS Code!).

Note: I will only talk about JavaScript-specific plugins here. For must-have general-purpose plugins see my other article.

Syntax highlighting

Many of the old syntax plugins for JavaScript have troubles with some modern features like arrow functions or async/await. But YAJS which simply stands for “Yet Another JavaScript Syntax” with over 600 ⭐on Github, can handle it flawlessly.

For proper JSX support you will also want to install the vim-jsx plugin.

I would like to also recommend this color theme called OceanicNext. It is a little bit like Sublime. You can see it on the first screenshot for this article.

Linting and formatting

Since the release of Vim 8 many people swapped the old Syntastic plugin with the new ALE plugin which is fast, easily customizable and asynchronous. The last thing means that your editor won’t freeze anymore as the linting happening. It also supports so many different languages, linters and fixers that you won’t need to think about it anymore.

Here’s how I have it customized to associate specific linters with the file types:

let g:ale_linters = {
\   'python': ['flake8', 'pylint'],
\   'javascript': ['eslint'],
\   'vue': ['eslint']
\}

Many of the linters (like eslint) can also fix your code, which is very handy.

let g:ale_fixers = {
\    'javascript': ['eslint'],
\    'vue': ['eslint'],
\    'scss': ['prettier']
\}
let g:ale_fix_on_save = 1

The last option will make ALE auto-fix your file every time you save it.

Another useful feature is navigating to the next / previous error with ]r / [r.

Autocompletion

For the autocomplete in Vim there are multiple options. I use Deoplete, mostly because it just works with my current setup (I use NeoVim on a daily basis).

Then it depends on how you like your JavaScript. If you use Flow or TypeScript, both of these tools are capable to provide some autocomplete suggestions but you will need to install some plugins first.

This is it for now! If you know any other useful plugins I need to include in this article, please let me know!

Sign Up And Get A Free eBook!

If you're interested in Vim but just don't know how to start, subscribe to this newsletter. You will get notified when the course is ready and get the latest updates and articles around Vim. Also you will get a free "Vim From Scratch" eBook!