This is part of a series of articles covering the different modules needed to configure vim to use in modern javascript apps development.

TL;TR

Install plugins and configure vim to setup the proper syntax highlighting.

The config file in vim is located in ~./vimrc and the config file for neovim in ~/.config/nvim/init.vim . From now on I will refer to the config file as init.vim .

Setting up the syntax highlighting

Use your favourite plugin manager to install the following plugins , I love to use Plug:

In case you don’t have any plugin manager install Plug following their repo installation guide.

Plugins to install:

mxw/vim-jsx : To highlight JSX

pangloss/vim-javascript : To highlight JS

Add the plugins to your init.vim

2. Inside init.vim type :so % to reload your vim config

3. Inside init.vim type :PlugInstall yo install your plugging

Setting up highlight theme

You can choose your favorite color scheme from the awesome project vimcolors. You can choose your favorite there.

For this example, we are going to install the theme: minimalist. But you can choose any of them.

Add the plugins to your init.vim

2. Set the colorscheme your are using in your init.vim (in this case the minimalist theme)

3. Some themes allow you to personalize some options (check their repos).5. Finally init.vim config file should looks like

6. Inside init.vim type :so % to reload your vim config