Master Vim for Front‑End Developers: 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

Cursor Movement

# hjkl  # move left, down, up, right
# 2w   # move forward two words
# 3e   # move to 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

Exiting

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

Deletion

# x   # delete character under cursor
# 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

Modification

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

Status

# <ctrl>+g # show file info and cursor position

Search

# /   # forward search (n to repeat, N reverse)
# ?   # backward search
# %   # find matching pair
# :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 all matches in file

Folding

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

External Commands

# :!shell  # execute external shell command

.vimrc

The .vimrc file stores Vim configuration. Create it in your home directory and use vim-plug to manage plugins:

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

Basic Configuration

set nobackup        " disable backup files
set noswapfile      " disable swap files
set encoding=utf-8  " file encoding
set number          " show line numbers
set nowrap          " disable line wrapping
set ruler           " show cursor position
set cindent
set tabstop=2
set shiftwidth=2
set cursorline      " highlight current line
set ic              " ignore case in searches
set hls             " highlight search results
set showmode        " show mode in status line

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/YouCompleteM e'
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 for brevity

Git Integration

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

Markdown Preview

Plug 'suan/vim-instant-markdown'
let g:instant_markdown_autostart = 0

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'

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

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#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 .vimrc configuration provides a solid Vim setup for front‑end development; feel free to customize further or share improvements in the comments.