Configuring Vim as an alternative to VSCode

Hello everyone in this article we are going to see how to configure VIM editor similar to VSCode with plugins, autocomplete in MacOS/Linux.

Default Vim which comes bundled with MacOS is bland with no additional features like line numbers, task bar,intents etc.

Creating .vimrc File

There are two VIM config files one is a global one located inside $VIM directory and another one in the local one which we are going to use. Local config file does not exist hence it should be created manually.

• Open up the terminal and type the following command to create .vimrc file in your $HOME directory.

touch ~/.vimrc

• Open up that file in vim

vim ~/.vimrc

• Now enter the following configurations.

" Set compatibilty to vim only
  set nocompatible
" Auto text wrapping
  set wrap


" Encoding
  set encoding=utf-8
" Show line numbers
  set number
" Status bar
  set laststatus=2
" Intent width
  set shiftwidth=2

Here sentences with “ denote that they are comments which are self explanatory about what each command does. You can feel free to change some this configurations such as intent width.

• Save the file and source file by using source command.

:source %

Adding Plugins to Vim for auto-complete

Similar to VSCode Vim also supports extension but here they are called as Plugins. Here we are going to add coc.nvim plugin to add autocomplete feature similar to VSCode

• To add plugins add the following lines in the .vimrc file.

call plug#begin('~/.vim/plugged')
 "Autocomplete plugin. similar to VSCode
  Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()

Note: If you want to add more plugin in future place all the plugins between plug#begin() and plug#end().

• Now next step is to install the plugin. Open any text file in Vim and press esc then shift + ; to open command entry field.
• Now enter the following command to install the specified plugins in .vimrc file.

:PlugInstall

The above command will download and install the plugins specified in .vimrc file.

Adding language servers to coc.nvim

Now we have installed the coc.nvim plugin for auto-complete but to make it actually work we need to specify the language servers which tells the plugin for what languages we need autocomplete. Complete list of language servers with installation can be found here . In this article we are going to add HTML,CSS,JSON,JS and Swift auto-complete language servers.

• To add HTML language server open any dummy file in Vim and press esc then shift + ; to open command entry field. Use the following command to install HTML,CSS,JSON,JS,Swift language servers.

:CocInstall coc-html
:CocInstall coc-css
:CocInstall coc-json
:CocInstall coc-tsserver
:CocInstall coc-sourcekit

All set now you can open and edit any HTML,CSS,JS,Swift file to see if the auto complete works.

Apart from this plugin there are several Vim plugin available which can be found at Vim Awesome .

Uninstalling a Plugin

To uninstall a plugin remove the plugin line from .vimrc file and run.

:PlugClean

To list available language plugins

:CocList extensions

To remove a language server run.

:CocUninstall <LANGUAGE SERVER NAME>

Do Follow Techiepedia for more Interesting write-ups!