Turning Vim into a JavaScript IDE

Integrated development environment (IDE) is an important tool for software developers. In simple terms, IDE is a powerful text editor for creating programs.

Vim is a lightweight, fast, and free text editor. Vim is well known for its hotkeys that make coding faster and more comfortable. Developers created a lot of plugins for Vim.

So we’re going to build a fast, flexible, lightweight IDE using Vim with plugins. Let’s define the necessary functions of IDE:

• Syntax highlighting
• Snippets
• Lint (analyzes source code to flag programming errors, bugs)
• Code formatting tool
• Autocomplete

The commands below are intended for Linux. I use Ubuntu 16.04.

Install Vim

We are going to use modern Vim plugins which require Vim 8 (latest version). Install Vim 8 using:

sudo add-apt-repository ppa:jonathonf/Vim

sudo apt update

sudo apt install vim

vim –version

Install Vundle

Vundle is a plugin manager for Vim (as npm for JavaScript). Install Vundle using git clone:

git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

vim .vimrc

Put this at the top of your ~/.vimrc to use Vundle:

set nocompatible              " be iMproved, required
filetype off                  " required

" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')

Plugin 'VundleVim/Vundle.vim'
Plugin 'tpope/vim-fugitive'
Plugin 'git://git.wincent.com/command-t.git'
Plugin 'rstacruz/sparkup', {'rtp': 'vim/'}

call vundle#end()            " required
filetype plugin indent on    " required

Launch Vim and run :PluginInstall

Install the syntax highlighting plugin

A syntax highlighting assists programmers when reading and analyzing code. We will install this plugin: https://github.com/pangloss/vim-javascript

We need add this line to .vimrc into the plugins section:

Plugin 'pangloss/vim-javascript'

Then we need to install the plugin using vundle. Start Vim and type :PluginInstall command. The plugin is installed:

Before:

After:

Now it looks better.

Snippets

Snippets make coding faster. You can quickly insert loops, conditions, functions and other language constructions by using hotkeys.

We need to these plugins: https://github.com/garbas/vim-snipmate https://github.com/grvcoelho/vim-javascript-snippets

Add to .vimrc:

Plugin 'MarcWeber/vim-addon-mw-utils'
Plugin 'tomtom/tlib_vim'
Plugin 'garbas/vim-snipmate'
Plugin 'grvcoelho/vim-javascript-snippets'

Also remap the hotkey to Ctrl+j

imap <C-J> <esc>a<Plug>snipMateNextOrTrigger
smap <C-J> <Plug>snipMateNextOrTrigger

It works!

Lint

A lint checks a source code for bugs, stylistic errors. It’s an important tool for writing high-quality code.

ALE is a modern lint plugin for Vim. ALE checks your code in the real time mode (while you edit your code). Actually, ALE is a layer between Vim and a lint tool. We will use ESlint as a lint tool for a JS code.

Add to .vimrc:

Plugin 'w0rp/ale'

Run :PluginInstall

Configure ESLint:

mkdir lintTest

cd lintTest

npm init

npm install eslint --save-dev

./node_modules/.bin/eslint --init

vim index.js

The lint works but I would like to adjust messages style. I added these lines to .vimrc:

let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'

Line numbers

Line numbers are disabled by default.

Add this to .vimrc:

set number

Code formatter

A code formatter (a code beautifier) converts your code into the correct format. You can quickly write some code and to format it with just one click. ESLint and ALE will do this job.

These options activate code formatting on saving a file:

let b:ale_fixers = ['eslint']
let g:ale_fix_on_save = 1

Autocomplete

Autocomplete increases your typing speed. It predicts the word a user intends to enter. Install plugin dependencies:

sudo apt-get install build-essential cmake
sudo apt-get install python-dev python3-dev

Install the plugin:

Plugin 'Valloric/YouCompleteMe'

:PluginInstall

YCM has a client-server architecture. The commands above installs the client. Here we install YCM server:

cd ~/.vim/bundle/YouCompleteMe
./install.py --all

Cool, it works!

File explorer

NERDTree is a file system explorer https://github.com/scrooloose/nerdtree

Plugin 'scrooloose/nerdtree'

I added this to my .vimrc to open NERDTree with Ctrl+n:

" NERDTress Ctrl+n
map <C-n> :NERDTreeToggle<CR>
" NERDTress File highlighting

These line configure different highlighting for different file extensions:

function! NERDTreeHighlightFile(extension, fg, bg, guifg, guibg)
 exec 'autocmd filetype nerdtree highlight ' . a:extension .' ctermbg='. a:bg .' ctermfg='. a:fg .' guibg='. a:guibg .' guifg='. a:guifg
 exec 'autocmd filetype nerdtree syn match ' . a:extension .' #^\s\+.*'. a:extension .'$#'
endfunction
call NERDTreeHighlightFile('jade', 'green', 'none', 'green', '#151515')
call NERDTreeHighlightFile('ini', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('md', 'blue', 'none', '#3366FF', '#151515')
call NERDTreeHighlightFile('yml', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('config', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('conf', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('json', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('html', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('styl', 'cyan', 'none', 'cyan', '#151515')
call NERDTreeHighlightFile('css', 'cyan', 'none', 'cyan', '#151515')
call NERDTreeHighlightFile('coffee', 'Red', 'none', 'red', '#151515')
call NERDTreeHighlightFile('js', 'Red', 'none', '#ffa500', '#151515')
call NERDTreeHighlightFile('php', 'Magenta', 'none', '#ff00ff', '#151515')

System clipboard

System copy provides copying/pasting text to the system clipboard.

Install dependencies:

apt-get install xsel

Add Plugin 'christoomey/vim-system-copy' to .vimrc, run :PluginInstall.

Use cp to copy into your system clipboard and cv to paste from system clipboard.

My current .vimrc

You can find the latest version of my .vimrc in my repository: https://github.com/maxim-danilov/vim-config-maxim-danilov

Conclusion

We just made a good tool to write a JS code and edit any config files. It’s lightweight, fast, сustomizable and I can use it on any device via SSH.