How I use Vim for Web Development — Part 2 (Configuration)

2 min readApr 7, 2021

We have already talked about the basic plugins I use on Vim, now let’s talk code!

First I remap the leader key to , , the leader key changes the meaning of every other key, with that you can add more shortcuts to your répertoire.

" set leader key to ,
let mapleader=","

Then, I use this shortcut to remove evil trailing spaces:

" remove all trailing whitespace by pressing F5
nnoremap <F5> :let _s=@/<Bar>:%s/\s\+$//e<Bar>:let @/=_s<Bar><CR>

I haven’t found a practical way to use search highlighting without getting annoyed 1 second after. That’s because when you search for something it keeps “searched”, if you know what I mean. To remove highlights I remap this command to ,/, it’s like magic.

set incsearch " search while typing
set hlsearch " highlight search" toggled highlights after searching
map <Leader>/ :nohlsearch<CR>

To be honest, I’m not a big fan of splits (maybe because I have a really tiny monitor), but they can be very useful sometimes. But it’s a pain in the ass when it comes to moving around splits. I mean, why <C-W>?

" move between splits easily
nnoremap <C-J> <C-W><C-J>
nnoremap <C-K> <C-W><C-K>
nnoremap <C-L> <C-W><C-L>
nnoremap <C-H> <C-W><C-H>set splitbelow " split down
set splitright " split right

This one allows me to fold (and unfold) a chunk of code by pressing the spacebar:

" enable folding
set foldmethod=indent
set foldlevel=99" enable folding with the spacebar
nnoremap <space> za

Some basic stuff I like:

set number relativenumber " show line numbers
set showmatch " show matching tags
set wrap " wrap lines

set ai " auto indent
set si " smart indent

Configs I use for Prettier (see part 1):

" prettier config
let g:prettier#autoformat = 0let g:prettier#config#trailing_comma = 'none'autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue PrettierAsync

Aaaand configs for Python:

“ remove red spaces in python
let g:python_highlight_space_errors = 0

“ ignore .pyc files in NERDTree
let NERDTreeIgnore=[‘\.pyc$’, ‘\~$’]

au BufNewFile,BufRead *.py
    \ set tabstop=4 |
    \ set softtabstop=4 |
    \ set shiftwidth=4 |
    \ set textwidth=79 |
    \ set expandtab |
    \ set autoindent |
    \ set fileformat=unix

Well, it’s not much! (Right?)

I hope you can make use of it, and let me know if you have an awesome line in your .vimrc you think I should be using too!

How I use Vim for Web Development — Part 2 (Configuration)

Written by Mariana Antunes