Vim/Vi is a powerful text editor that is installed on every Unix style operating system. The beauty of Vim is that you do not have to take your hands off the keyboard to navigate. Everything you could ever want to do can be accomplished by key strokes. This speeds up text editing, but the real power of Vim is how customizable it is.
Out of the box, Vim is nothing more than a powerful text editor. To really get the most out of Vim when writing any sort of code, you need to install plugins and optimize your .vimrc file settings. Vim has been a top editor of choice for decades. This is because just about everything you could want to customize can be customized. This is similar to how Linux and Unix are preferred by many computer users due to their power and customizable nature.
The main customization and configuration of Vim lives in a ~/.vimrc file. Mine looks like this:
First I define shortcuts:
map <silent> <F3> :NERDTreeToggle<CR> map <silent> <F2> :Files<CR> map <silent> <F4> :syntax sync fromstart<CR> imap cll console.log()<Esc>==f(a
The first three lines allow me to use my F2-F4 keys to quickly run commands. Vim uses a lot of keyboard shortcuts and I don't want to override any of the default key bindings so I use the F# keys for these commands.
NerdTree is a plugin for navigating the file system. I actually almost never use NerdTree because my F2 binding allows me to use fzf for fuzzy file searching. It brings up a prompt and I start typing a file name, and it recursively searches the current directory for any matches. I don't ever have to think about where a file lives or bother moving around directories.
The F4 key binding just re-colors the file I am working with. There are times when working with large Vue.js files where Vim's syntax highlighting turns off or takes a few seconds to turn back on. This is due to an optimization in the syntax highlighting, but it's nice to be able to manually quickly turn syntax highlighting back on.
The last line is a bit complex. This says that when I am in 'input' mode and typing text if I type 'cll' then Vim automatically inserts 'console.log()' and places my cursor within the brackets. I find myself typing console.log all the time when debugging, so this is a huge help. I actually keep meaning to add more of these imap shortcuts into my .vimrc. It took me a few days to get used to typing 'cll' instead of 'console.log()', but now it just comes naturally to me.
Setting Vim Tab Indentation
set expandtab " show existing tab with 2 spaces width set tabstop=2 set softtabstop=2 " when indenting with '>', use 2 spaces width set shiftwidth=2 autocmd Filetype go setlocal noexpandtab
I use two spaces for tabs, so these lines set tabs to be two spaces wide.
The only time I don't use two space tabs is when working on Go files. The last line checks to see if a file is a Go file, and if it is, it turns off my default two space tabs. This is great when working with different lint styles for different file types.
Note that I use Plug to install and manage these plugins. It is lightweight and powerful. You can see where all the plugins live because the directory path after the word Plug in my vimrc is the github directory where the plugin can be found.
I also work with Vue.js a lot, so some of my settings are specifically meant to optimize Vue files, specifically single file templates.
is a fuzzy file finder. This is the reason I rarely use NerdTree. It allows me to quickly search for files without perfectly knowing the file name or location.
allows me to run Ag. This is a fuzzy searcher for lines rather than filenames. It's faster than any other multi-file line searching I have seen in any other IDE. My setup is to type ':Ag' in Vim to get the search prompt. From there I start typing a variable name or value and I almost instantly get a result of all the lines in all the files that contain a match to my inpute. The search is done recursivly on the current directory. This is the fastest way to find text in multiple files.
As mentioned before, my Vim autocomplete is faster and more intuitive than the autocomplete features I saw in VS Code. This is the plugin that makes the autocomplete magic happen. Because of this plugin I rarely mistype variable names, instead I start to type a variable and then am able to quickly press 'tab' to complete the name.
is simple and great for anyone who ever works with CSS. Whenever it detects a CSS color, it changes the background of that text to match the CSS color.
is a TypeScript syntax plugin.