Master Vim for Front‑End Development: Essential Commands & Plugin Setup

Vim is a timeless editor; this article compiles indispensable commands, tips, and a curated set of plugins especially useful for front‑end developers.

Installation

sudo apt-get install vim  # Ubuntu

For other platforms, search online for the appropriate installation method.

Beginner Guide

vimtutor  # start the built‑in tutorial

The tutorial is considered the simplest and most comprehensive Vim introduction.

Basic Commands

Cursor movement

# hjkl
# 2w   move forward two words
# 3e   move to the end of the third word
# 0    go to line start
# $    go to line end
# gg   first line of file
# G    last line of file
# 42G  go to line 42
# <Ctrl>+o  jump back
# <Ctrl>+i  jump forward

Exit

# <Esc>   enter normal mode
# :q!    quit without saving
# :wq    write and quit

Delete

# x      delete character under cursor
# dw     delete to end of word
# de     delete to end of word including current character
# d$     delete to end of line
# dd     delete whole line
# 2dd    delete two lines

Modify

# i      insert text
# A      append at end of line
# r      replace character
# o      open a new line below and enter insert mode

Undo/Redo

# u      undo
# <Ctrl>+r redo

Copy, Paste, Cut

# v      visual mode
# y      yank (copy)
# p      paste
# yy     yank current line
# dd     cut current line

Status # <Ctrl>+g show current line and file info Search

# /      forward search (n to repeat, N reverse)
# ?      reverse search
# %      jump to matching { [ ( ) }
# :set ic   ignore case
# :set noic cancel ignore case
# :set hls  highlight matches
# :set is    show partial matches

Replace

# :s/old/new        replace first match in line
# :s/old/new/g      replace all matches in line
# :%s/old/new/g     replace all matches in file

External Commands

# :!shell   execute external shell command

.vimrc

The .vimrc file stores user configuration. Create it in your home directory and use vim‑plug to manage plugins.

cd Home
touch .vimrc
# Unix
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
# Neovim
curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Basic Configuration

Disable backup

set nobackup
set noswapfile

File encoding set encoding=utf-8 Show line numbers set number No line wrapping set nowrap Show cursor position set ruler Indentation

set cindent
set tabstop=2
set shiftwidth=2

Highlight current line set cursorline Search settings

set ic
set hls
set is

Show mode in status line set showmode Disable code folding on start set nofoldenable Color scheme

syntax enable
set background=dark
colorscheme solarized

Plugin Configuration

File tree (NERDTree)

Plug 'scrooloose/nerdtree'
Plug 'jistr/vim-nerdtree-tabs'
Plug 'Xuyuanp/nerdtree-git-plugin'
autocmd vimenter * NERDTree
map <C-n> :NERDTreeToggle <CR>
let NERDTreeShowHidden=1
let g:NERDTreeShowIgnoredStatus = 1
let g:nerdtree_tabs_open_on_console_startup=1

Code completion & snippets

Plug 'Valloric/YouCompleteMe'
Plug 'Raimondi/delimitMate'
Plug 'Shougo/deoplete.nvim', { 'do': ':UpdateRemotePlugins' }

Syntax highlighting & linting

Plug 'sheerun/vim-polyglot'
Plug 'w0rp/ale'
let g:ale_linters = {
    'javascript': ['eslint'],
    'css': ['stylelint']
}
let g:ale_fixers = {
    'javascript': ['eslint'],
    'css': ['stylelint']
}
let g:ale_fix_on_save = 1
let g:ale_sign_column_always = 1
let g:ale_sign_error = '●'
let g:ale_sign_warning = '▶'
nmap <silent> <C-k> <Plug>(ale_previous_wrap)
nmap <silent> <C-j> <Plug>(ale_next_wrap)

File and code search

Plug 'rking/ag.vim'
Plug 'kien/ctrlp.vim'

Status line

Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
let g:airline_theme='papercolor'

Commenting

Plug 'scrooloose/nerdcommenter'
" Example mappings:
" <leader>cc  comment line
" <leader>cm  comment with single delimiter
" <leader>cA  append comment at line end
" <leader>cs  block comment
" <leader>cu  uncomment
let g:NERDSpaceDelims = 1
let g:NERDDefaultAlign = 'left'

Git integration

Plug 'airblade/vim-gitgutter'
Plug 'tpope/vim-fugitive'

Markdown preview

Plug 'suan/vim-instant-markdown'
let g:instant_markdown_slow = 1
let g:instant_markdown_autostart = 0
" :InstantMarkdownPreview

Emmet

Plug 'mattn/emmet-vim'
let g:user_emmet_leader_key='<Tab>'
let g:user_emmet_settings = {
    'javascript.jsx' : {
        'extends' : 'jsx'
    }
}

HTML5 support Plug 'othree/html5.vim' CSS3 support

Plug 'hail2u/vim-css3-syntax'
Plug 'ap/vim-css-color'
augroup VimCSS3Syntax
  autocmd!
  autocmd FileType css setlocal iskeyword+=-
augroup END

JavaScript enhancements

Plug 'pangloss/vim-javascript'
let g:javascript_plugin_jsdoc = 1
let g:javascript_plugin_ngdoc = 1
let g:javascript_plugin_flow = 1
set foldmethod=syntax
let g:javascript_conceal_function = "ƒ"
let g:javascript_conceal_null = "ø"
let g:javascript_conceal_this = "@"
let g:javascript_conceal_return = "⇚"
let g:javascript_conceal_undefined = "¿"
let g:javascript_conceal_NaN = "ℕ"
let g:javascript_conceal_prototype = "¶"
let g:javascript_conceal_static = "•"
let g:javascript_conceal_super = "Ω"
let g:javascript_conceal_arrow_function = "⇒"
set conceallevel=1

React JSX

Plug 'mxw/vim-jsx'
let g:jsx_ext_required = 0

Prettier formatting

Plug 'prettier/vim-prettier', {
  'do': 'yarn install',
  'for': ['javascript','typescript','css','less','scss','json','graphql']
}
let g:prettier#config#bracket_spacing = 'true'
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql PrettierAsync
" :Prettier

Source: 枫上雾棋 – segmentfault.com/a/1190000011466454