Vim tips, tricks and plugins

This post is a note-to-self type of post full of Vim tips & tricks. You'll also find a bunch of useful plugins listed in this post. This is the place where I try to write and explaing things to my self whenever I'm learning a new trick in Vim.

The tips and tricks are loosely organized under larger topics to try to provide some structure for the post. I hope you find something new and useful! :)

Tips are geared towards developing projects with a web focus. As the Vim client I am using Neovim and Onivim.

Regex, sorting, filtering etc

Knowing your regexes makes you feel like a magician.

Add a new line before each capital letter

%s/\u/\r\0/g will find uppercase letters and add a newline in front. Note: this does not work in case you have scandinavian or other exotic characters in your data.

Remove empty lines from document

Quite often you end up having to clean some data for one or other purpose and it can be nice to quikcly drop all empty lines in the current buffer. Here's how you can do it fast.

:g/^$/d

Wrap lines with something

Let's say you want to turn a column of data from an excel sheet into an array, you can do it easily by wrapping each line with the required markup. For example doing %s/.*/"&",/g will convert nicely wrap each line with " and add a comma to the end.

Sort and unique all lines

This will do it for smaller files easily and directly in Vim :sort u. For larger files you might want to hop on to the command line and do sort bigfile.txt | uniq > bigfile_sorted.txt.

Run a shell command on range of lines

This can be useful for example to run Prettier on the whole file or just part of the file.

:0,$ ! prettier will run the whole buffer through prettier. Whereas :15-25 ! pretier will run lines 15-25 through Prettier.

Remove all empty lines

Sometimes you're cleaning data in VIM and you want to remove empty lines quickly from a file. Hit :g/^$/d to get it done fast.

Macros

Macros are an essential part of VIM. You can record a macro to run a sequence of action by hitting q + <register>. It will record the macro to the selected copy-paste -register. When you're done recording the macro hit q again to stop recording.

To run a macro you do @ <register>.

Running macros on a set of lines

You often need to run a macro against a set of lines. This is easily doable with the normal command in EX mode. Some examples to get started with:

Execute for lines 5-10 :5,10norm! @<register>
Execute for all lines :%norm! @<register>
Execute for 5-eof :5,$norm! @<register>
Execute for lines matching a pattern :g/pattern/norm! @<register>
Execute for a visual selection, select with V + jk and run :norm! @<register>

Switching / opening files

CTRLP

Switching files with keyboard only is hard, right? Not really with ctrlp. Ctrp is a full path, fuzzy, file, buffer, mru, tag, you name it, finder for Vim.

So basically you hit Ctrp + p and then start typing in the name of the file you want to get to. I find this much faster than using a filetree plugin or some other such antiquated solution.

The commands:

CTRL + p - activate plugin
CTRL + f & CTRL + b - cycle modes

You can find it at: https://github.com/ctrlpvim/ctrlp.vim

Jump between last two open files

You should setup a quick shortcut for switching between last two open buffers. This is often the most used switch after all. I've mapped <leader><leader> for this action. The following config does gets the magic working:

nnoremap <leader><leader> <c-^>

Jump between related files

Often you have files that are related and you want to hop between them quikcly. Some examples are header and source files and model/view/controller -files.

For this to work, you need to add the plugin called Projectionist and setup some patterns that define what should be the alternate files. After that you can jump to an alternative file with :A or open the alternate in a new split for example :AV.

Open all certain type of files in project

:args ./*.html

Snippets

Every coder needs their own secret repo of snippets and a fast way to drop them into the code.

Neocomplete

Neocomplete is a nice plugin to use handy snippets in VIM. The usage is pretty simple. You expand the snippet with c+k, hit tab for next field in the snippet until finished.

CTAGS

You need CTAGS installed for this trick. With CTAGS and a bit of hackery you can easily jump from a html DIVs class name to the CSS or SCSS definition of that class. For similar jumping around from function and function definition JavaScript you should probably use Tern.

Install Exuberant CTAGS with brew install ctags

First, you need to add some config to your CTAGS configuration located at ~/.ctags.

--langdef=css --langmap=css:.css --regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/ --regex-css=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/ --regex-css=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/ --regex-css=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/m,media,medias/

--langdef=scss --langmap=scss:.scss --regex-scss=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/ --regex-scss=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/ --regex-scss=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/ --regex-scss=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/m,media,medias/ --regex-scss=/^[ \t]*\$([A-Za-z0-9_-]+)/\$\1/v,var,variables/

--recurse=yes --exclude=.git --exclude=vendor/* --exclude=node_modules/* --exclude=db/* --exclude=log/* --exclude=tmp/*

You might want to add "tags" to your .gitignore -file.

Now you can index your (S)CSS with :!ctags -R .. And after that jumping around is a matter of :tag /myClass.

Sources:

Changing text (fast)

Change text quickly between quotes for example.

ci" (Change Inside ")

Replace text between characters from the paste buffer.

vi"p (Visual Inside " Paste)

The surround plugin

Change the surrounding double quotes (or any character) to single quotes.

cs"' (Change Surrounding " to ')

To surround a visual selection with parentheses press:

S( (Surround with ( )

Surround a word with quotes.

csw' ( Change Surroundings of Word to ')

Search & replace without having to escape special characters

This trick comes in hand when you want to do simple text replacement without any fancy regexp magic. Saves quite a few keystrokes.

:%sno/search_string/replace_string/g

Replace all occurrences of the word under cursor

This is super useful for quickly refactoring some bad variable names and is similar to the above but way faster to execute.

In normal mode press * to search for all occurences of the word under cursor
Hit :%//newVarName/ to quickly replace all the matches

You might require a g in the end depending on your gdefault configuration.

Search and replace in all open files

There are two ways of doing this that I know of. Either

:argdo %s/pattern/replace/gce

:bufdo %s/pattern/replace/gce | update

should do the trick!

Miscellaneous tips & tricks

Easy console.logs for JavaScript

Inspired by the Turbo Console Log plugin for VS Code here's a short snippet for your vimrc to enable inserting console logs with ease. It is not quite as smart as TCL but at least it adds the line number in. :)

In your vim config add the following ugly line: nnoremap gll oconsole.log("LINE: <C-r>=line('.')<Esc>","")<Esc>F"i

Then hit gll to produce console.log("LINE: line","").

Filenames in insert mode

Write any path in the editor in insert mode and hit ctrl + x + f and Vim will suggest files in that folder. Makes it easy to find those file names.

See word the count

The following command shows info on current cursor position in the currently open buffer - including the word count.

press g and then ctrl + g

Change line endings

:set ff=dos
:set ff=unix

Save As

Some times you want to create a new file by starting with a copy of the existing one. This can be done like this:

:sav newfile.js

Repeat or reverse movements

Some movement commands can be repeated with ; and reversed with ,. These are F, f, T, and t.

Searching with / can of course be repeated with n and N.

Overwrite text from copy/paste register

Often times you have something on your clipboard and you want to overwrite a word or a sentence with the text. Doing this in Vim can be a hassle as when you delete the previous entry it replaces the latest register value.

Easy way around this is to use visual selection and then paste over that. E.g. you want to replace a word with another from the latest register.

vep

On registers

Vim has a register system that stores things you yank or delete/change from the document. Register 0 holds always the last yank and 1 holds the last delete or change, if you don't specify a specific register where you want to save things. Special default register " always holds content of the last operation be it yank, delete or change.

To define a specific register you can do "ryy for example to yank stuff to register r. To paste from a specific register "rp.

To paste last yanked content you can do just p. But if you instead yank something and then delete something p would paste in the deleted text. So to actually paste the yanked texs you cdan can use "0p.

Editing multiple lines at once

If you need to edit multiple lines of text at once, you can use the block wise visual mode. To enter the mode hit CTRL + v. Now you can select block areas and perform operations on them. Supported operations are insert before (I), append (A), change (c) and various other operators.

Plugins

This section lists a bunch of the most useful plugins for VIM and some of them were already mentioned in the above tips and tricks.

Colorizer

Show CSS colors in the editor for those of us who don't yet see hex or rgb as colors.

https://github.com/lilydjwg/colorizer

Ctrlp

Hit ctrl + p to open files and buffers quickly with a powerful fuzzy finder.

https://github.com/ctrlpvim/ctrlp.vim

Editorconfig

Make your vim respect the .editorconfig file.

https://github.com/editorconfig/editorconfig-vim

Emmet

Write HTML really, really fast.

https://github.com/mattn/emmet-vim

Indent object

Adds a text object to manipulate stuff by indentation e.g. viid to delete everything in the current indent. Handy for Python for example.

https://github.com/michaeljsmith/vim-indent-object

Gitgutter

Show GIT info in the gutter and manipulate hunks directly from your editor. You can also move between changes in the file by using [c and ]c. Staging a hunk is as easy as hitting <leader>hs when your cursor is in it.

For more complex usage view the plugin docs.

https://github.com/airblade/vim-gitgutter

Lexical

Building on Vim’s spell-check and thesaurus/dictionary completion\

https://github.com/reedes/vim-lexical

Multiple cursors

More powerful way of having multiple cursors in your Vim.

https://github.com/terryma/vim-multiple-cursors

Projectionist

Define alternative files with patterns and very quickly jump between or open them in a new split.

https://github.com/tpope/vim-projectionist

Repeat

Make repeating commands with . work as intended.

https://github.com/tpope/vim-repeat

Sort motion

Adds a motion to sort selections of texts.

https://github.com/christoomey/vim-sort-motion

Surround

Manipulate surroundings like a boss e.g. cs"' to change the surrounding " --> '.

https://github.com/tpope/vim-surround

Syntastic

Teaches VIM to use external syntax checkers. To have it check JS, just install JSHint globally through NPM.

npm install jshint -g

https://github.com/vim-syntastic/syntastic

Tcomment

Handle commeting in a sane way.

https://github.com/tomtom/tcomment_vim

Wildfire: text objects

Install wildfire plugin to enable quick selection of text objects in normal mode by pressing enter. Press enter a second time and it chooses one greater text object.

https://github.com/gcmt/wildfire.vim

Wordy

Uncover usage problems in your writing e.g. check text for business jargon.

https://github.com/reedes/vim-wordy