Barbarian Meets Coding Titlebarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

vim

Wiki: Vim Plugins - Enhancing Your Vim Editor with Awesome Plugins

Plugins

FZF

FZF is a great fuzzy search plugin that you can use to navigate directly to files within vim. If you’ve used any modern editor you’ll recognize this feature as C-P or COMMAND-P. It consists on:

  • The fzf fuzzy search tool itself that comes with a thin wrapper for vim
  • The fzf.vim plugin that provides additional commands

Look at the repos above to find more information on how to install them with your favorite package manager and vim plugin manager.

Helpful config:

" FZF - bind file fuzzy search to C-p
nnoremap <C-p> :<C-u>FZF<CR>

Some helpful keybindings to remember:

" open fuzzy search
<C-P>

" after opening fuzzy search
<CR>  " open file in same window
<C-V> " open file in vertical split
<C-X> " open file in horizontal split
<C-t> " open file in new tab

Lightline

Lightline is a nice configurable status line for vim.

You configure it by setting a global variable g:lightline as shown below:

let g:lightline = {
      \ 'colorscheme': 'wombat',
      \ 'active': {
      \   'left': [ [ 'mode', 'paste' ],
      \             [ 'readonly', 'filename', 'modified', 'helloworld' ] ]
      \ },
      \ 'component': {
      \   'helloworld': 'Hello, world!'
      \ },
      \ }

This is another possible configuration:

let g:lightline = {
  \ 'active': {
  \ 'left': [['mode', 'paste' ], ['readonly', 'filename', 'modified']],
  \ 'right': [['lineinfo'], ['percent'], ['fileformat', 'fileencoding']]
  \     }
  \ }

ALE

ALE or Asynchronous Linting Engine is an amazing plugin that integrates vim with modern compiling, linting and formatting tools like eslint, tsserver or prettier. In addition to linting, in-editor messages and formatting, it provides autocompletion and smart navigation.

Nerd tree

Nerd tree is a file system plugin for vim

Emmet

Emmet

Vim Surround

Vim surround is a plugin that help you wrap (surround) words and sentences in wrapping characters like ", ', [, { and even HTML tags.

You can change the current surroundings of a word by using cs:

" change surroundings from " to '
cs"'

For instance, if you have

"Hello world"

Typing cs"' results in:

'Hello world'

You can wrap it in an HTML tag cs'<h1>:

<h1>Hello world</h1>

And back to double quotes cst" (where t stands for tag):

"Hello world"

You can delete surroundings with ds. For instance, if we type ds" we will remove the quotes:

Hello world

You can add surroundings with ys:

// type ysw"
"Hello" world
// type yss(
( "Hello" world )

If you want to wrap a full body of text with a HTML tag you can use V to change to visual mode and then use S to wrap whatever you select into a tag:

<section>
  <h1>Something important</h1>
  <p>lorem ipsum jara jara</p>
</section>

Try S<aside class="highlight">:

<aside class="highlight">
  <section>
    <h1>Something important</h1>
    <p>lorem ipsum jara jara</p>
  </section>
</aside>

Vim Tmux navigation

The vim tmux navigator lets you seamlessly navigate between vim and tmux panes. Basically, the way that it works is that it setups the same bindings to move between panes in vim and tmux, and, it detects whether you’re in vim or tmux to do the right thing. If you are using tmux with vim, this plugin is GOLD.

Follow the instructions on GitHub to install the vim and tmux plugins.

These are the default keybindings:

" Tmux navigator keybindings
" <ctrl-h> => Left
" <ctrl-j> => Down
" <ctrl-k> => Up
" <ctrl-l> => Right
" <ctrl-\> => Previous split

They can also be customized.

vim-devicons

The vim-devicons plugin adds icons to vim. This seems like something trivial but it really makes vim look much nicer. More like a modern editor. It’s the little details ya know! You need to combine it with a font for your terminal/editor which supports icons. There’s a repository with a ton of patched fonts.

targets.vim

The targets plugin extends and improves the functionality of text-objects in vim in amazing ways:

  • It enables seeking for all text-objects. That is, you no longer need to be on top of a text-object to use the i or a commands. You can be anywhere within a line use ca( or ci{ and it will work as you’d expect, changing the inside of parens or brackets. Seeking works also over multiple lines with n (for next) and l (for last). For instance cin" changes the next quotes it finds, while cil" changes the previous quotes it finds.
  • It adds two new commands I and A that preserve whitespace
  • It adds text-objects for arbitrary separators and function arguments.

Check the targets cheatsheet for more information on what’s available and for diagrams of how the different commands work.

Deoplete

Deoplete is an autocompletion engine for neovim (something like intellisense in VsCode or Visual Studio). It allows you to connect advanced autocompletion sources like LSPs (language service providers), snippets, tags, etc.

TBH it is non trivial to set up and I’m still experimenting with it. The documentation via :h deoplete is a great help.

Neosnippets

Neosnippets is a snippets plugin that integrates very well with Deoplete. It allows to create snippets of your own devise and have them available to deoplete for autocompletion. It also comes with a bunch of built-in snippets via a separate plugin:

For more info like how to create your own snippets take a look at the plugin docs using :h neosnippets.

To investigate


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García