Develop JavaScript With Vim

We are going to talk about developing JavaScript with Vim in 2018. This article assumes the audience has very little knowledge about Vim and its ecosystem.

junegunn/vim-plug: Minimalist Vim Plugin Manager

vim-plug allows you to install/update your Vim plugins efficiently. I used to use pathogen and git submodule.

However, the first problem is that the more git submodules you have the slower your git status command becomes unless you pass --untracked-files=no to your git status command which I don’t want to.

Second, it’s git submodule foreach git fetch updates repositories in series while vim-plug updates repo in parallel.

As for upgrading vim-plug itself, don’t worry about it. It comes with a :PlugUpgrade command for upgrading itself from Vim.

You can checkout my .vimrc for how to configure your Vim to use vim-plug.

Valloric/YouCompleteMe: A code-completion engine for Vim

YouCompleteMe is a auto-complete plugin that suggests fuzzy completions for you when you are in the insert mode.

Fuzzy completion means that assuming you have a variable currentUserProfile and when you type cup in the insert mode, YouCompleteMe will suggest currentUserProfile.

To fully utilise its power, I recommend you to also run yarn global add typescript to install TSServer so that it can suggest completions based on your cursor in your JavaScript context. If you are worried that this means you have to write TypeScript, nope, this is not the case. It’s just using TSServer for completion. You can still write JavaScript.

But simply installing TSServer isn’t enough, you also have to install type definitions for libraries you use. Say you use jest for testing, then you also have to run yarn add @types/jest so that YouCompleteMe can provide better suggestions.

You can find type definitions at TypeScript Types Search.

You can also checkout my config for YouCompleteMe

w0rp/ale: Asynchronous linting/fixing for Vim and Language Server Protocol (LSP) integration

ale provides super fast lint (even auto fix) for you when you are editing your JavaScript files based on the linting tools defined in the package.json file.

You can checkout my config for ale

jiangmiao/auto-pairs: Vim plugin, insert or delete brackets, parens, quotes in pair

auto-pairs auto add closing single quote/double quote/bracket/square bracket/curly bracket etc.

You can checkout my config for auto-pairs

editorconfig/editorconfig-vim: EditorConfig plugin for Vim

editorconfig-vim makes your vim editor to respect .editorconfig file. You sure don’t want to be glared by your colleagues, right?

junegunn/fzf.vim: fzf vim

fzf.vim allows you to do fuzzy search on files/buffer/maps/history/command history/search history. You name it!

I also recommend installing rg along with fzf.vim for searching text inside your project.

There is also a CLI version of junegunn/fzf: A command-line fuzzy finder. With the CLI version installed, you can type vim **<TAB> in your shell, then jump right into the file you want to edit.

You can checkout my config for fzf.

SirVer/ultisnips: UltiSnips - The ultimate snippet solution for Vim. Send pull requests to SirVer/ultisnips!

ultisnips allows you to expand a trigger into a snippet. Say there is a trigger us and it expands to 'use strict';. Now type us<TAB> in insert mode, then it expands to 'use strict';.

But that’s not all ultisnips can do, it also allows us to define priority and context for snippets and have the same trigger expand to different snippets based on it’s context. The placement of your cursor can of course be defined too.

Whether it be a good idea or not, say you want a<TAB> expand to async if the same line contains => or function or method() {} so that you can make arrow function, function declaration, function expression or object method async, and have a<TAB> expand to await in other circumstance. That’s possible.

Or perhaps you want to have border-top: and float: expand to borderTop: and cssFloat: respectively, that’s totally possible.

You can check out my config for ultisnips, my javascript.snippets file and my javascript snippets folder.

alvan/vim-closetag: Auto close (X)HTML tags

vim-closetag allows you to close tag automatically, just like auto-pair but for tags. E.g. type <div> in insert mode, and it automatically adds </div> to be after your cursor.

It’s also smart that when you type <hr> it won’t add </hr> and instead it makes <hr> or <hr/> baesd on the file type.

You can check out my config for vim-closetag.

NOTE: this config has to be loaded before Plug 'alvan/vim-closetag' otherwise it won’t work.

hail2u/vim-css3-syntax: CSS3 syntax (and syntax defined in some foreign specifications) support for Vim’s built-in syntax/css.vim

vim-css3-syntax makes new CSS syntax (e.g. gap, column-gap) shown correctly.

ludovicchabant/vim-gutentags: A Vim plugin that manages your tag files

vim-gutentags auto generates tags for your JavaScript projects. This is important so that you can type CTRL-] or gCTRL-] on keywords in the normal mode and jump to it’s definition for efficient browsing/editing/

To make it work, you also need to config your ~/.ctags file to know JavaScript. That sounds complex, but don’t worry, you can see my .ctags file and it’s based on romainl/ctags-patterns-for-javascript: Exuberant Ctags Patterns for JavaScript

You can also checkout my config for vim-gutentags