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.

TL;DR

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

.vim
    autoload
    backups
    colors
    configurations
        default
            default.vim
            plugins.vim
            vimrc
        code
            plugins.vim
            code-plugins.vim
            code.vim
            vimrc
        html
            plugins.vim
            html-plugins.vim
            vimrc
        django
            plugins.vim
            django-plugins.vim
            vimrc
        ...
    ftplugin
    plugged

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

• vim-addon-local-vimrc
  source a local .vimrc, super useful for project specific settings
• vim-esaymotion
  move faster!
• vim-airline && vim-airline-themes
  super cool status line
• nerdtree && nerdtree-git-plugin:
  maybe the best tree explorer plugin for vim
• vim-fugitive
  use git commands inside vim
• fzf && fzf.vim
  IMHO the best (fastest) file finder for vim
• YankRing.vim
  yank history
• vim-abolish
  use the power of reg exp when performing search and replace
• webapi.vim && gist-vim
  create gists from vim buffers
• vim-multiple-cursors
  this is A.W.E.S.O.M.E., it brings multiple selection features to vim, must have.
• asyncrun
  run shell commands in background

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:

.vim/configuration/html/vimrc

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

.vim/configuration/html/plugins.vim

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

.vim/configuration/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

• vim-jsdoc
  generate js docs with ease
• tern_for_vim
  autocompletion, goto definition, docs...
• vim-javascript
  indention and syntax highlighting
• vim-es6
  snippets and syntax highlighting for JS ES6

Javascript node

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

Javascript react

• vim-jsx
  syntax, indention

Css (less, sass)

• vim-less
  syntax for less
• scss-syntax
  syntax for scss
• vim-css-color
  preview colors in the editor

Python

• vim-python-pep8-indent
  indention following pep8 rules
• jedi-vim
  autocompletion, goto definition, docs...
• SimpylFold
  fold rules for python
• ropevim
  refactoring, autoimport, code assist

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.

Django

• vim-pony
  jump and manage commands shortcuts
• django-plus.vim
  utilities for django dev

Hacks

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:

• jedi-vim and completor

Conclusion

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.

Bye!