A vim configuration model


I've been a vim user for many years, I tried so many plugins I just can't remember, I changed my vim configuration very often reaching a sort of model that now, with vim 8 and async jobs on stage, I'll try to update and describe here.


Surf to my dotvim configuration

Installing vim 8

This can be more complicated than it seems. It all depends on which features you want to be enabled. In particular, it can be tricky to get a binary with both python and python3 support. You can compile from source, probably the best option, or you can apt-get install it from some ppa. Here comes an image of my vim version, so in the future I'll know what I need.

The configuration model

I use vim for every text-edit work. I use it to take notes, to write latex stuff and, obviously, to code. I use it as an IDE both for python, php and js projects, but lately I've quite abandoned php, so I'll focus on python and modern js development.

The idea is to have different vim configurations, one for every use case. Then I'll use a sort of composition pattern to create new configurations:

  1. default vim configuration: a few stuff, like movements, ui, shortcuts, git...
  2. code configuration: indentation, completion, folding ...
  3. html configuration: matching tags, emmet, ...
  4. css configuration: sass, css and style related plugins and confs
  5. js configuration: js related plugins and confs
  6. nodejs configuration: js + node stuff
  7. webjs configuration: js + html + css
  8. react configuration: webjs + nodejs + react stuff
  9. python configuration: python related plugins and confs
  10. django configuration: python + webjs + django related stuff

Why I think such conf pattern can be good?

Because I tend to use (too?) many vim plugins. As I said, I use vim as an IDE, so I need many things. Some of this plugins are heavy, so why should I load all react plugins when I'm just working on a python module? And why should I load something like python-mode when dealing with pure js development?

But this is not the only reason, with a recent machine with a good processor and a lot of ram, you shouldn't suffer performance problems (except when you try to open a bad formatted 20k lines file), and many plugins just work per-filetype basis. But with this approach, I can also keep my configuration a bit cleaner, dividing the plugins for their area of interest.

All begins with a .vimrc file in my home directory which has the following content:

runtime configurations/default/vimrc

It just loads the default configuration.

The .vim folder structure


How does it work?

In a nutshell (we'll see in depth more over), every editor configuration may consist of 4 files:

  • vimrc: is the configuration file which vim will load
  • [conf].vim: will keep all the configurations which are specific for the configuration type
  • plugins.vim: is the file that vim-plug will use to load the plugins
  • [conf]-plugins.vim: contains all the plugins specific for the configuration type

With this structure, and the use of the source command inside the configuration files, we can create a configuration type which is composed by other configuration types. For example, the django configuration type will be the composition of html, css, webjs and python configurations, and will also have some specific stuff.

How to launch all these configurations?

When I need to use vim for django, for example, I'll use an alias put in .bashrc, like so:

alias djangovim='vim -u ~/.vim/configurations/django/vimrc'

We'll see that django vimrc file will source other configuration files => composition.

Install the vim plugin manager

I know vim 8 brings native third-party package loading, but I fill comfortable with vim-plug and'll continue using it.

So to install vim-plug, just create the plug.vim file inside .vim/autoload.

The default vim configuration

This should be a configuration suitable for every kind of text editing (suitable for me!).

First: create a vimrc file inside .vim/configurations/default:

let $CONFPATH='~/.vim/configurations/default'
source ~/.vim/configurations/default/default.vim

It just sources the real configuration file and sets the CONFPATH variable, used by vim-plug when searching for plugins. Then the default.vim file, containing the real configuration stuff:

This is quite a basic configuration, with nothing concerning code, indentetation and such. But still relies on some plugins and a colorscheme.

I've some preferred colorschemes and, sometimes, I switch between them, so in .vim/colors I've the following files:

  • atom-dark.vim
  • hybrid.vim
  • molokai.vim
  • tir_black.vim
  • wombat.vim

The default colorscheme is tir_black.

The plugins.vim inside .vim/configurations/default contains the plugin repos used by vim-plug plus all the plugins specific configurations:

Now you can open your favourite editor and launch :PlugInstall, the plugin will be installed. For some of them you might need to install some other packages, for examples the fonts for vim-airline. Just surf the plugins' repos to check what is needed.

Nice, the default vim configuration is complete!

Two words about the installed plugins

The code configuration

Now let's configure vim to be a nice generic code editor. Let's create a .vim/configurations/code folder and inside it a vimrc file:

let $CONFPATH='~/.vim/configurations/code'
source ~/.vim/configurations/default/default.vim
source ~/.vim/configurations/code/code.vim

We define CONFPATH so that vim will load the right plugins file, and then we source the default configuration file and the code specific configuration file. Create a code.vim file inside .vim/configurations/code:

This file sources the default configuration and adds code related stuff.

The configurations/code/plugins.vim file contains the following:

source ~/.vim/configurations/default/plugins.vim
source ~/.vim/configurations/code/code-plugins.vim

So the code-plugins.vim file contains the code specific plugins:

Let's see in detail these plugins.

  • indentLine
    display the indention level
  • fastFold
    prevents vim to freeze in insert mode while managing folding
  • auto-pairs
    treat parens, quotes, brakets.. in pairs
  • vim-commentary
    comment out lines with ease
  • matchit
    extend the % capabilities
  • vim-surround
    add quotes, change single quotes to double, ...
  • vim-easy-align
    a great alignment plugin
  • ale
    async lint engine for vim (this is a new entry, previously I was using syntastic)
  • completor, ultisnips, vim-snippets, supertab
    all these to manage autocompletion feature (new entry here, previously I was using YouCompleteMe)
  • vdebug
    debugger client (I use it for python and php)
  • semantic-highlight
    sometimes you may prefer to have different variables with different colors
  • tagbar
    browse tags in the current file easily
  • codi.vim
    interactive scratchpad for hakers, evaluate each line as you type

The html configuration

We'll extend the code configuration and add some nice plugins:


let $CONFPATH='~/.vim/configurations/html'
source ~/.vim/configurations/default/default.vim
source ~/.vim/configurations/code/code.vim


source ~/.vim/configurations/default/plugins.vim
source ~/.vim/configurations/code/code-plugins.vim
source ~/.vim/configurations/html/html-plugins.vim


" parser
Plug 'mattn/emmet-vim'

" Mappings
Plug 'tpope/vim-ragtag'

" completion
Plug 'jvanja/vim-bootstrap4-snippets'

" => emmet-vim
let g:user_emmet_leader_key='<C-e>'
let g:user_emmet_settings = {
\    "javascript.jsx": {
\        "extends": "jsx",
\        "quote_char": "'"
\    }

" => ragtag
let g:ragtag_global_maps=1

I don't define a html.vim file, because beside from defining some convenient plugins, there are no custom configurations for html.

Let's see the added plugins:

  • emmet-vim
    must have, expand abbreviations plugin, for example can transform ul > li*3 > span + a in a list formed by 3 items, each with a span and an anchor children (new entry here, prev I was using sparkup, but this one works also with js and jsx, and when dealing with react stuff it is super useful)
  • vim-ragtag
    easuily close tags, easily insert js, css in the head of the document, and many other useful maps, not only html
  • vim-bootstrap4-snippets
    bootstrap 4 snippets

Again and again...

You should've grasp now how the configurations are composed, for example the plugins file for the configuration webjs will look like

source ~/.vim/configurations/default/plugins.vim
source ~/.vim/configurations/code/code-plugins.vim
source ~/.vim/configurations/html/html-plugins.vim
source ~/.vim/configurations/css/css-plugins.vim
source ~/.vim/configurations/js/js-plugins.vim
source ~/.vim/configurations/webjs/webjs-plugins.vim

because it will extend code, and will use html, css, and js stuff!

You can see the entire dotvim configuration on my github account, so look at it for the complete picture. Now I'll just list a few of other plugins which I use divided by area of interest.

Some other plugins


Javascript node

  • vim-node
    know what is jedy for python? Something similar for node: goto definition, open modules, ...

Javascript react

Css (less, sass)


I used to replace all the above plugins with python-mode, but I faced too many problems in the last months and so I decided to stop using it and doing things more granularly.



Some plugins are a bit tricky to configure, and sometimes it is tricky to make them work together with other plugins.

I'll collect here some hacks that were necessary for me in order to make them work (almost) properly:


Ok, and what about you? I know every vim user has his list of must have plugins. Also many new plugins come on stage every month, I have changed 3/4 killer plugins in these days during the refactoring af my vim configuration, i.e. ale in place of syntastic, jedi-vim and others in place of python-mode, completor in place of YouCompleteMe, so let me know your thoughts, I'm always interested in discovering more useful plugins.

And, for the one of you that still haven't, you should REALLY read this stuff.


Subscribe to abidibo.net!

If you want to stay up to date with new contents published on this blog, then just enter your email address, and you will receive blog updates! You can set you preferences and decide to receive emails only when articles are posted regarding a precise topic.

I promise, you'll never receive spam or advertising of any kind from this subscription, just content updates.

Subscribe to this blog

Comments are welcome!

blog comments powered by Disqus

Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!