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

Installation

sudo apt-get install vim

Other platforms can be installed by following the appropriate package manager instructions.

Beginner Guide

vimtutor

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

Essential Commands

Moving the cursor

# 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   go to first line of file
# G    go to last line of file
# 42G  go to line 42
# <ctrl>+o  jump back
# <ctrl>i  jump forward

Exiting

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

Deleting

# 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

Modifying

# i      insert before cursor
# A      append at end of line
# r      replace character under cursor
# 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     delete (cut) current line

Status # <ctrl>+g show file information Search & Replace

# /pattern   forward search (n to repeat, N reverse)
# ?pattern   backward search
# %s/old/new/   replace in whole file

Folding

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

External Commands

# :!shell   execute shell command

.vimrc Configuration

The .vimrc file stores user settings and plugin definitions.

cd $HOME
touch .vimrc
# Install vim-plug (plugin manager)
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 cursorline
set showmode
set background=dark
colorscheme solarized

Plugin Configuration

File Explorer

Plug 'scrooloose/nerdtree'
Plug 'jistr/vim-nerdtree-tabs'
Plug 'Xuyuanp/nerdtree-git-plugin'
" Key mappings omitted for brevity

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

File & 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 omitted

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

Emmet (HTML/CSS shortcuts)

Plug 'mattn/emmet-vim'
let g:user_emmet_leader_key='<Tab>'

HTML5 Support Plug 'othree/html5.vim' CSS3 Syntax & Colors

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
" Various conceal settings omitted for brevity

React JSX 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

Conclusion

The above snippets constitute a ready‑to‑use .vimrc for front‑end developers. Readers are encouraged to adapt and extend the configuration with additional ideas.