Let’s consider a few popular Vim plugins for frontend development. Today we will concentrate only on the frontend-related plugins. I want to consider other useful plugins such as nerdtree, vim-airline, etc., in the next articles.
First of all, we should install Vim or Neovim. If you already have it, update to the latest version. Let’s start from scratch. After the editor has been installed, let’s create .vimrcif you use Vim or init.vim for Neovim.
touch ~/.vimrctouch ~/.config/nvim/init.vim
For a quick start with Vim, we need to install any plugin manager. I enjoy vim-plug and will use it in this article. You can find the installation guide on the Github page. After installation, we need to edit init.vim/.vimrc file.
After that, we need to reload the config for changes to take effect. Use : for invoking command-line and paste the command below, then press enter.
source ~/.config/nvim/init.vimThen we need to install the latest version of Node.js. I would recommend using NVM for version control.
coc.nvim
The first plugin we will consider is coc.vim. In my opinion, it’s the best Intellisense that we can use in Vim. The best way to learn this plugin is to try it out and then use the documentation to configure it for yourself. It will be easy because coc.vim has awesome documentation. Apart from that, the basic configuration you can find on the main GitHub page. It supports a lot of languages and frameworks. The full list you can find here.
Let’s edit the configuration file and then invoke :PlugInstall command.
After that, we should set up the configuration for this plugin. For now, we will use an example configuration. Copy and paste it into init.vim/.vimrc file, below plugins definition.
Then let’s install a few coc extensions:
- coc-html;
- coc-css;
- coc-tsserver (for javascript and typescript).
It should be enough for a quick demo, but if you want, you can install extensions for angular, vue, etc. After these extensions have been installed, you can use auto imports, autocomplete, get information about method signature, and more awesome features. For the rest of the feature, take a look at the plugin and extension documentation.
Syntastic
Currently, it looks good, but when you are working on some projects nice to have the ability to use code linter to catch errors related to code quality. For example, eslint or tslint. Good, but not the only tool for solving it is syntastic. Let’s add it to the config file.
Then add additional configuration for a syntactic plugin that I described below and reload the vim config file. After that, invoke :PlugInstall command.
Now we can use plugin features. To check how these errors show, jump to the README file, then create or open the project with eslint/tslint configuration and compare it with the view from the documentation.
Prettier
It looks very nice with linting, but we should manually format code to meet our requirements. I’m a lazy person and try to automate processes as much as possible, especially when coding. One of the most popular tools for code formatting is prettier, and I like using it in my projects. To use prettier along with vim editor, we need to install the vim-prettier. Just add this plugin to the vim-plug configuration and then reload the vim editor with the source command.
That’s it. We don’t need additional configuration for using prettier along with vim. Just add .prettierrc file into your project, optionally add rules. If not, prettier will use default rules. By default, its use Leader + p to invoke prettier and format code; BTW default leader key is \.
Of course, it’s not a full guide to the vim frontend plugins. But it will be enough for the quick demo within one article. In the further articles, I will consider other topics such as git, navigation, search, etc. I hope this small article was interesting and you’ve taken something useful from this.
