Master Vim for Front‑End Development: Essential Commands & Plugins

Vim is a powerful, long‑standing text editor. This guide collects essential Vim commands and configuration tips for front‑end developers, and recommends a set of plugins to enhance productivity.

Installation

sudo apt-get install vim   # Ubuntu

Other platforms can be installed via their package managers.

Beginner Guide

vimtutor   # start the built‑in tutorial

Cursor movement

# hjkl      # move left/down/up/right
# 2w        # move forward two words
# 3e        # move to end of third word
# 0         # go to line start
# $         # go to line end
# gg        # first line
# G         # last line
# 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
# dw       # delete to end of word
# de       # delete to end of word including char
# d$       # delete to line end
# dd       # delete whole line
# 2dd      # delete two lines

Modify

# i        # insert before cursor
# A        # append at line end
# r        # replace character
# o        # open new line below

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 file info

Search

# /pattern   # forward search
# ?pattern   # backward search
# n / N      # repeat search
# %         # find matching brace
# :set ic   # ignore case
# :set noic # case‑sensitive
# :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 in whole file

Folding

# zc        # close fold
# zC        # close all nested folds
# zo        # open fold
# zO        # open all nested folds

External commands

# :!cmd    # run shell command

.vimrc configuration

The .vimrc file stores user settings. Example snippets:

set nobackup
set noswapfile
set encoding=utf-8
set number
set nowrap
set ruler
set cursorline
set background=dark
colorscheme solarized
set cindent
set tabstop=2
set shiftwidth=2
set showmode
set nofoldenable

Plugin configuration (vim‑plug)

Use vim-plug to manage plugins. Example Plug statements:

File explorer

Plug 'scrooloose/nerdtree'
Plug 'jistr/vim-nerdtree-tabs'
Plug 'Xuyuanp/nerdtree-git-plugin'

Code completion and snippets

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

Syntax highlighting and linting

Plug 'sheerun/vim-polyglot'
Plug 'w0rp/ale'

Search tools

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

Status line

Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'

Commenting

Plug 'scrooloose/nerdcommenter'

Git integration

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

Markdown preview

Plug 'suan/vim-instant-markdown'

Emmet

Plug 'mattn/emmet-vim'

HTML5 and CSS3 support

Plug 'othree/html5.vim'
Plug 'hail2u/vim-css3-syntax'
Plug 'ap/vim-css-color'

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 support

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

Prettier integration

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#config#jsx_bracket_same_line = 'false'
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql PrettierAsync

Summary

The article provides a comprehensive Vim setup for front‑end developers, covering installation, essential editing commands, a curated .vimrc configuration, and a collection of plugins for file navigation, code completion, syntax highlighting, linting, Git, markdown preview, Emmet, and formatting.