Vim Configuration and Plugins

Customizing Vim is what makes it truly powerful. This is done through a configuration file (.vimrc) and by adding plugins. This guide covers the basics of how to structure your configuration and manage plugins with the popular manager vim-plug.

The .vimrc File

Your primary Vim configuration lives in a file in your home directory named .vimrc (or _vimrc on Windows). This is where you'll add all your personal settings, key mappings, and plugin configurations.

The .vim Directory Structure

Vim uses a specific directory structure in your home folder (~/.vim/ or ~/vimfiles/ on Windows) to load additional scripts and plugins. While there are many specialized subdirectories, for a modern setup using a plugin manager, you only need to know a few:

• autoload/: This is where your plugin manager's script (e.g., plug.vim) goes. Scripts here are loaded on demand, which helps keep Vim's startup fast.
• plugged/: The default directory where vim-plug will download and manage all your plugins. You should not edit files in here manually.
• colors/: For manually installed colorscheme files.
• after/: A special directory for scripts that need to run after all other plugins have been loaded. This is useful for overriding default plugin settings.

A plugin manager like vim-plug handles most of this complexity for you.

Plugin Management with vim-plug

vim-plug is a minimalist Vim plugin manager.

1. Install vim-plug

Download plug.vim and place it in your autoload directory. You can do this with a single command in your terminal:

For Unix (macOS, Linux):

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

For Windows (PowerShell):

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni $HOME/vimfiles/autoload/plug.vim -Force

2. Configure .vimrc to Use vim-plug

Add the following block to the top of your .vimrc file. List the plugins you want to use between the plug#begin() and plug#end() lines.

" Specify a directory for plugins
call plug#begin('~/.vim/plugged')

" Add your plugins here, e.g.:
Plug 'vim-airline/vim-airline'
Plug 'tpope/vim-surround'
Plug 'preservim/nerdtree'

" Initialize the plugin system
call plug#end()

3. Install Plugins

Open Vim and run the following command. vim-plug will download and install all the plugins listed in your .vimrc.

:PlugInstall

To update plugins in the future, run :PlugUpdate. To remove a plugin, delete its Plug line from your .vimrc and run :PlugClean.

Auto-formatting with CoC and Prettier

You can configure Vim to automatically format your code on save using coc.nvim (Conqueror of Completion) and an extension.

1. Install coc.nvim

Add coc.nvim to your .vimrc inside the vim-plug block. It's recommended to use the release branch.

call plug#begin('~/.vim/plugged')
  " ... other plugins
  Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()

Then run :PlugInstall in Vim.

2. Install the Prettier CoC Extension

CoC has its own extension management system. To add Prettier support, run this command in Vim:

:CocInstall coc-prettier

3. Configure Format-on-Save

Run :CocConfig in Vim. This will open the coc-settings.json configuration file. Add the following settings to enable format-on-save for Markdown and other file types.

{
  "coc.preferences.formatOnSaveFiletypes": [
    "markdown",
    "html",
    "css",
    "javascript",
    "typescript",
    "json"
  ]
}

Now, whenever you save a Markdown file, coc.nvim will use Prettier to format it automatically.