A lot of students ask me to how my Vim setup, how I configured it and how I'm using it.

Color theme

The most common question that I'm getting in the comments is what color theme I'm using. The color theme is called gruvbox and you can install it for any editor. Doesn't matter if you are using VSCode, Intelij IDEA or VIM it is available everywhere.

Why Vim and not VSCode?

The second most common question that I'm getting is why I'm using Vim and not VSCode when all other people are using VSCode. This is just because Vim is more flexible and configurable for me than VSCode. You can configure Vim much deeper and the amount of keybinds and features that you have there is also much bigger than in VSCode.

Who is it suitable for?

Before I will share with you my Vim setup I want to say that you for sure can just copy it but probably it won't just work out of the box. You still need to tune some things, especially if you are using Windows.

If you are just a beginner and you want to learn coding then you should not spend time on configuring your editor.

You can simply take VSCode and start writing your code in a matter of minutes. But if you are an advanced developer and you want to speed up your development then it might be that you want to invest some time in learning Vim and check if it really suits you.

Usage format of Vim

There are different ways to use Vim. We can use it inside graphical application or inside the console. I'm using it from the console. Additionally we have 2 different versions of Vim. We have a default Vim editor and NeoVim. Essentially the development of Vim was stale this is why a group of developers forked it and started to implement new cool features there. And they called it Neovim. After some time in Vim the similar stuff was implemented but I still prefer to use Neovim as they constantly releasing new features.

Why I'm using Vim from terminal?

The main question here is why I'm using Vim from terminal and not as an application. The main point is that Vim shines together with Tmux.

Tmux is a terminal multiplexer. It creates sessions, tabs, splits and much more.

Tmux allows me to open multiple projects and jump between them in a matter of seconds. If you try to open multiple projects in Intelij IDEA for example it will require lots of memory and will lag quite a lot.

My Vim setup

Now let's talk about my setup. All my configurations for all programs like Vim, Tmux, Git and others are stored in dotfiles repository.

Dotfiles mean that all files are started with dot. So these are files for configuration.

Dotfiles allows me to setup everything and configure a new machine with a single command in a matter of minutes. It is just a bunch of bash scripts which configure different things.

Here we are talking about Vim configuration so the first file which is loaded is init.vim.

let mapleader = "\<Space>"

call plug#begin('~/.config/nvim/plugged')

" colorscheme
Plug 'morhetz/gruvbox'

" css3 syntax highlight
Plug 'hail2u/vim-css3-syntax'

" highlight colors
Plug 'rrethy/vim-hexokinase', { 'do': 'make hexokinase' }

" less syntax highlight
Plug 'groenewege/vim-less'

" Elixir syntax highlight
Plug 'elixir-editors/vim-elixir'

" Shakespeare (Yesod templating)
Plug 'pbrisbin/vim-syntax-shakespeare'

" file tree
Plug 'Shougo/defx.nvim', { 'do': ':UpdateRemotePlugins' }

" fuzzy finder
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'

" commenting text
Plug 'tpope/vim-commentary'

" git wrapper
Plug 'tpope/vim-fugitive'

" Syntax highlight for .tsx
Plug 'ianks/vim-tsx', { 'for': 'typescript.tsx' }

" Syntax highlight for .ts
Plug 'HerringtonDarkholme/yats.vim', { 'for': 'typescript' }

" Syntax hightlight for .jsx
Plug 'mxw/vim-jsx'

" Syntax hightlight for .js
Plug 'pangloss/vim-javascript'

" Show indentation
Plug 'Yggdroot/indentLine'

" Highlink yank for a second
Plug 'machakann/vim-highlightedyank'

" Visual local history
Plug 'sjl/gundo.vim'

" Surround text with something
Plug 'tpope/vim-surround'

" Allow repeating of custom commands like surround
Plug 'tpope/vim-repeat'

" Typescript autocomplete
Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'}
Plug 'neoclide/coc-tsserver', {'do': 'yarn install --frozen-lockfile'}
Plug 'neoclide/coc-prettier', {'do': 'yarn install --frozen-lockfile'}
Plug 'neoclide/coc-pairs', {'do': 'yarn install --frozen-lockfile'}
Plug 'iamcco/coc-angular', {'do': 'yarn install --frozen-lockfile && yarn build'}
Plug 'neoclide/coc-eslint', {'do': 'yarn install --frozen-lockfile'}

" Haskell highlighting
Plug 'neovimhaskell/haskell-vim'

" Markdown preview
Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() }}

" Handlebars highlight
Plug 'mustache/vim-mustache-handlebars'

" Smart replace, abbreviations, convert case
Plug 'tpope/vim-abolish'

" Multifile replace
Plug 'wincent/ferret'

" Show list of merge conflicts
Plug 'wincent/vcs-jump'

" Functions for manipulating highlight groups
Plug 'wincent/pinnacle'

" Vim elm syntax
Plug 'andys8/vim-elm-syntax'

call plug#end()

As you can see I'm using Plug as a package manager. The typical package manager install all packages for Vim from github repositories. The main problem with that is that if one of the repositories was updated then it might happen that your Vim won't work because we didn't update configuration.

This is obviously bad this is why we must use a feature inside Plug which is called lock file. It created for us a file with all packages commits in git repositories so it will always fetch the correct version of the package.

" Generated by vim-plug
" Tue Jan 25 13:34:04 2022
" :source this file in vim to restore the snapshot
" or execute: vim -S snapshot.vim

silent! let g:plugs['coc-eslint'].commit = 'c1ffbc7'
silent! let g:plugs['coc-pairs'].commit = '303288c'
silent! let g:plugs['coc-prettier'].commit = 'dfc173f'
silent! let g:plugs['coc-tsserver'].commit = 'c6d7d12'
silent! let g:plugs['coc.nvim'].commit = 'f0b8888'
silent! let g:plugs['defx.nvim'].commit = '10fa804'
silent! let g:plugs['ferret'].commit = 'a513036'
silent! let g:plugs['fzf'].commit = '205f885'
silent! let g:plugs['fzf.vim'].commit = '91332ac'
silent! let g:plugs['gruvbox'].commit = '118f3b5'
silent! let g:plugs['gundo.vim'].commit = 'c5efef1'
silent! let g:plugs['haskell-vim'].commit = 'f35d022'
silent! let g:plugs['indentLine'].commit = '5617a1c'
silent! let g:plugs['markdown-preview.nvim'].commit = 'e5bfe9b'
silent! let g:plugs['pinnacle'].commit = '20a0ecd'
silent! let g:plugs['tabular'].commit = '339091a'
silent! let g:plugs['vcs-jump'].commit = '638f3ac'
silent! let g:plugs['vim-abolish'].commit = '3f0c8fa'
silent! let g:plugs['vim-commentary'].commit = '627308e'
silent! let g:plugs['vim-css3-syntax'].commit = '3d98523'
silent! let g:plugs['vim-elixir'].commit = '8ace05a'
silent! let g:plugs['vim-elm-syntax'].commit = 'b65370b'
silent! let g:plugs['vim-fugitive'].commit = '59529a2'
silent! let g:plugs['vim-highlightedyank'].commit = '9669226'
silent! let g:plugs['vim-javascript'].commit = 'd6e1375'
silent! let g:plugs['vim-jsx'].commit = '8879e0d'
silent! let g:plugs['vim-less'].commit = '6e818d5'
silent! let g:plugs['vim-markdown'].commit = '9156bba'
silent! let g:plugs['vim-mustache-handlebars'].commit = '0153fe0'
silent! let g:plugs['vim-repeat'].commit = '24afe92'
silent! let g:plugs['vim-surround'].commit = 'aeb9332'
silent! let g:plugs['vim-syntax-shakespeare'].commit = '2f4f61e'
silent! let g:plugs['vim-tsx'].commit = '77c89c4'

PlugUpdate!

As you can see it stores all commits for every single package.

Also as you can see in init.vim I'm using Space as a leader key. So all my commands are done with Space and it is extremely comfortable for me. For example to save a file I'm hitting Space+S. If I want to open a list of buffers it is Space+B.

Let's talk about most interesting packages.

Defx opens a file tree in the current buffer. It is really comfortable compared to opening it on the side of the editor because you always know where the file is opened.

Other good one is fuzzy finder which allows to search for specific file.

And the most important package here is COC. It allows us to enable different language servers and get autocomplete, autoimport, go to definition and other features for any language.

How does it all works together?

You already saw all my Vim plugins but where it their configuration and what else do I have? 2 most interesting folders are plugin and autoload. In plugin folder I store all configurations for all packages. For example in plugin/color.vim I write configuration for Gruvbox package which is a color theme.

colorscheme gruvbox

let g:gruvbox_italic=1
let g:gruvbox_contrast_dark = 'hard'
let g:gruvbox_invert_selection='0'

Inside autoload I have all logic which will be executed when Vim starts. I have there just statusline logic to highlight the file name and the state of the file.

Also inside plugin/settings.vim I have all standard Vim configuration that you might want to override.

And inside plugin/keybinds.vim I store all custom keybinds that I'm using.

If you want to take my config or check what packages I use and how I configure them here is a link to my repository.

And actually if you want to improve your Javascript knowledge and prepare for the interview I highly recommend you to check my course Javascript Interview Questions.