Are you a JavaScript developer who loves command line interface and loves to remember commands? Are you a developer who wants to keep writing code without leaving keyboard at all? Well then vim is for you my friend.
This article assumes you are little familiar with Vim editor, how to open a file and navigate within it. If you are not, not to worry. Here is vim cheat sheet for commands which I used in my initial days of learning vim. While it is impossible to just remember these commands, my approach was I started using vim, and kept this cheat sheet printed on my desk. I referred the commands until they came to me naturally.
Vim is a very versatile IDE for developers and it’s plug-in based Eco-system allows developers/communities to build and contribute various plug-ins and with the power of these plug-ins it can be used as development tool for multiple technologies and programming languages. This article specifically focuses on Vim for JavaScript development. I will be sharing the list of plug-ins I am using and the vim configs I have created for my vim environment.
I am using GUI based vim for better experience and using tab based UI. The GUI based vim options are gVim, Neovim or MacVim (OSX users). You can install them by downloading binaries, or using your favorite package manager or by downloading the source code and compiling it locally on your machine. I am Linux user and I have use pacman package manger to install Neovim.
List of Plug-ins Used
To install vim plug-ins, the first thing you need is a plug-in manager. There are many options like vim-plug, vundle, pathogen etc. My choice of plug-in manager is vim-plug. The documentation on the README.md is self explanatory and it is very easy to setup. Once this setup is done, we can go ahead, install all the plug-ins we want and enhance the capabilities of this simple yet powerful IDE.
- vim-polyglot
Initially I thought to install vim-jsx for JavaScript and JSX support but then I came across this plug-in. It provided the language support for multiple Programming languages. Once installed, it starts working out of the box.
- fzf
FZF aka Fuzzy File Finder. In an IDE when you open a project, it is very import for one to open file quickly. FZF is command line query tool which is integrated to Vim via plugin. It is lighting fast for searching a file within vim. With vim it needs bit of a tweak to search more efficiently, like ignoring node_modules folder for JavaScript projects. I am learning it myself and should update those tweaks once fine-tuned.
- lightline
lightline is a configurable statuline or tabline for vim editor. By default it shows the mode of vim, file encoding, file ending style, cursor position etc. You can configure it show extra information or custom messages helpful to you.
- vim-prettier
It is prettier plug-in for vim. It has pre-configured options for vim. You can reconfigure them to apply on your JavaScript files. You can also configure it to honor the prettier settings provided by your .prettierrc.json or yaml file.
- ale
ALE aka Asynchronous Lint Engine. We know linting is very import for JavaScript based projects. ALE helps use to choose the linters we want to apply for the project. For my JavaScript & React based projects, my choice of linters are ESLint & Prettier. If you are adding TypeScript, the choice of linters may very.
- coc
As a developer we need support for intellisens, to see the functions or APIs being exposed by libraries, what are the params expected for the function being called. Well coc brings the auto complete feature to your vim. All you need to do is install coc with the help if vim plug. Once installed it provides you with set of commands. Using
:CocInstallto install extension specific to language for which you need auto-complete support. e.g. JavaScript auto-complete feature is supported bycoc-tsserver. The list of extensions are available here. - oceanic-next
I love using dark mode for IDEs and oceanic-next is the perfect dark theme for Vim editor. If you are a fan of now so dark theme or fan of a light theme solarized is another good option as it has both dark and light mode. Practically there are many themes out there and you can install the one you like.
- vim-jsdoc
Recently, I have started adding project JS-Doc style documentation/comments to my JavaScript projects. It really helps me to understand the code I am writing or the API and libraries I am using. Until I came across this plug-in it was a little bit tedious task to add these comments. vim-jsdoc is an interactive way to add JS-Doc style comments to your JavaScript code and you can also configure it to adapt it to your style of coding or project standards.Refer to the README.md to explore these options.
- nerdtree
It is a full-fledged project explorer built for vim. You can search for files using FZF or ctrl-p when you know what to search, but project explorer is really useful to go through project structure, explore and understand it. It allows you to navigation, explore, bookmark, creating, modifying, rename, deleting files etc. I really love the simplicity of the plug-in.
- vim-devicons
Well, with nerdtree you have a project explorer, now lets have devicons which associates icons with file or foldertype based on your project. There is a bit of extra stuff required for this to work flawlessly. 1st you have to set the encoding to UTF-8 and 2nd you have to install and use NERDFonts for your editor. They are the patched fonts and I am sure you will find your pick in the list. You can supply your own patched fonts as well. To intall NERDFonts you can either clone the repo, or install them using package mangers.
- vim-mulitple-cursors
This plugin bring the multiline select feature of Sublime to vim. It is a simple yet powerful feature for refactoring your code quickly.
- ctrlp
If you are using VSCode, Sublime or Atom as your current IDE, then
ctrl-phas been your favorite shortcut to open known files. Just pressctrl-pstart typing. Well, this plug-in bring the same functionality to vim. It is a fuzzy file finder which searches for files, MRUs (recently used files), allows you to open multiple files or event create files for directories.
Now we have all these plug-ins and information. But where do we put it? Well vim a config driven editor and by default the config is stored in vimrc file. Where is this file located, what is the name of file for MacVim vs Neovim vs gVim? Well, it is very easy to figure it out. All you need to do is type a command within your vim editor and it will list all the vim config files and plug-ins it will load at the start. That command is scriptnames. Type this command and press enter, the list will be presented to you.
For my Linux machine and Neovim, that file was sysinit.vim located under /etc/xdg/nvim/sysinit.vim while for my work laptop which is a Windows machine, it was ~/AppData/Local/nvim/_vimrc.
- For my Linux machine, I did not want to put all my config under one vimrc file and specially not under file which is under /etc hierarchy. So I created a
_vimrcfile and sourced it tosysinit.vim. - All my plugins I have installed with the help of vim-plug are mentioned in _plugrc file and then sourced to my _vimrc
- All the plugin are stored in ~/.vim/plugged folder, you can choose your own path and you have to let vim-plug know when you initialize plug-in within _plugrc
- All the configs are available on my GitHub repostory for vim-configs.
If you like this article, and if it helps you to learn and configure Vim, do like, and give a star to my GitHub repository. I will keep updating these repository and article as and when I tweak my settings, add new features. Feel free to post your comments or if your identify a better plug-is/configs. Happy to give you mentions.
SCRIPT CHATS 