Setting Up Vim for Modern JavaScript Development

—

by

Mario
in

setting-up-vim-for-modern-javascript-development

Now, you can do all of your JavaScript editing in Vim. Vim is a text editor. If you’re used to using Notepad (Windows), Sublime Text (Windows / Mac), Atom (Windows / Mac), Nano (Linux), or any text editor, Vim is just another program that allows you to write and edit text. But, it helps your JavaScript work gets better. In this tutorial, we will tell you how to set up vim for modern JavaScript development. If you are a web developer, this article is certainly for you.

JavaScript Syntax

The main plugin that is used is pangloss/vim-javascript. You can find many types of JS highlighting in Vim but this one is the most reliable. This plugin has support for flow and its types and you can enable that by turning it on in your vimrc:

let g:javascript_plugin_flow = 1

In addition, to add syntax support for JSX to my JavaScript files, I use mxw/vim-jsx. But, this plugin requires your JSX files to have a .jsx extension, even though I usually stick with .js. If you have the same situation, the below config is for you:

let g:jsx_ext_required = 0

Finding Files and Navigating

There are two options among so many options for fuzzy finding; they are FZF and the corresponding FZF.vim plugin. This lets me quickly navigate through projects to find the files I’m after. Not JS specific, but definitely worth a mention.

ESLint + Flow Integration

ESLint and Flow are the two command line tools that are usually used. These tools will check my code to ensure that everything typed correctly, or formatted correctly based on ESLint.

Until recently, integrating these with Vim was far from ideal, for two reasons:

  1. If you often install command line tools locally instead of globally, npm puts the executable in ./node_modules/.bin. This can break editor integrations, because they expect to have the executable available, so try running eslint, rather than ./node_modules/.bin/eslint./node_modules/.bin/eslint , for example.
  2. Vim didn’t have support for async, background jobs, up until the release of Vim 8. This causes the editor would be unresponsive for a second or two when you saved your file, and ESLint ran, until ESLint returned. This is only a small amount of lag but it’s really noticeable.

With Vim 8, all of those problems have been solved recently. Ale is a linting plugin that comes out the box with support for a variety of linting tools for different filetypes and languages, and most importantly for me that includes ESLint and Flow. Moreover, it can automatically detect which linters to run and you really don’t need to configure it all.