Master Vim for Front-End Development: Essential Commands and Must-Have Plugins

Installation

sudo apt-get install vim // Ubuntu

Other platforms can be installed via their respective package managers.

Beginner Guide

vimtutor // Vim tutorial

The built‑in tutorial is considered the most complete introduction to Vim.

Cursor Movement

# hjkl
# 2w   Move forward two words
# 3e   Move to the end of the third word
# 0    Move to line start
# $    Move to line end
# gg   First line of file
# G    Last line of file
# 10G  Go to line 10
# <ctrl>o  Jump back
# <ctrl>i  Jump forward

Exit

# <esc>   Enter normal mode
# :q!    Quit without saving
# :wq    Save and quit

Delete

# x      Delete current character
# dw     Delete to end of word
# de     Delete to end of word including 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 current character
# o      Open new line below and enter insert mode

Undo

# u      Undo
# <ctrl>r Redo

Status and Search

# <ctrl>g  Show file info
# /       Forward search (n to repeat, N reverse)
# ?       Reverse search
# %       Jump to matching { [ ( ) ] }
# :set ic   Ignore case
# :set noic Disable ignore case
# :set hls  Highlight matches
# :set is   Show partial matches

Replace

# :s/old/new      Replace first match on line
# :s/old/new/g   Replace all matches on line
# :%s/old/new/g  Replace throughout file

Fold

# zc   Close fold
# zC   Close all nested folds
# zo   Open fold
# zO   Open all nested folds

Execute External Commands

# :!shell  Run external shell command

.vimrc Configuration

Create the file in your home directory:

cd ~
 touch .vimrc

Install vim‑plug (or the Neovim equivalent) to manage plugins:

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Basic Settings

set nobackup
set noswapfile
set encoding=utf-8
set number
set nowrap
set ruler
set cindent
set tabstop=2
set shiftwidth=2
set cursorline
set showmode

Theme

syntax enable
set background=dark
colorscheme solarized

Plugin Configuration

Tree Explorer

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

Completion, Brackets, Path

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

Syntax Highlight & 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
nmap <silent> <C-k> <Plug>(ale_previous_wrap)
nmap <silent> <C-j> <Plug>(ale_next_wrap)

File & Code Search

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

Status Bar

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

Comments

Plug 'scrooloose/nerdcommenter'
let g:NERDSpaceDelims = 1
let g:NERDDefaultAlign = 'left'
let g:NERDCustomDelimiters = {
    'javascript': { 'left': '//', 'leftAlt': '/**', 'rightAlt': '*/' },
    'less': { 'left': '/**', 'right': '*/' }
}

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', 'rightAlt': '' } }

HTML5 & CSS3

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

JavaScript & React

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

Conclusion

The above configuration can be saved as .vimrc. Feel free to share any better ideas in the comments.