Vim for Javascript
Vim is just as useful today as it was in the 1970s
VI and then Vim(Vi Improved) have been used by programmers for decades but that doesn’t mean that its any less useful today. Vim is made for almost every system in use today and many programmers today still enjoy the speed, accuracy, and power Vim offers. Vim has certainly evolved since its inception and now many versions even have support for mouse (although I wouldn’t recomend getting used to using a mouse with Vim). One of the major reasons that I find Vim so much quicker to use is infact that I don’t have to use a mouse for getting around inside it.
The key bindings in Vim are so useful that they have often been ported to other programs as well. For instance the popular newer code editor vscode has a very nice and popular vim emulation plugin called vscodevim that takes advantage of most of vim’s keybindings and even some popular plugins.
What you need to get up and working with Vim for Javascript
Installing Vim.
Installing Vim is easy on most systems. For MacOs there are two main versions MacVim for a GUI version and a normal terminal version. The terminal version can easily be installed with Homebrew brew install vim
.
There are also forks of Vim that function almost exactly the same as Vim but have diffrent options or looks. One of the most common of these is Neovim which I find has some nice defaults that look a little more modern. Installing on mac with Homebrew is also easy brew install neovim
You’ll find that all Linux varients that use a package manager have Vim and Nvim (Neovim) avilable. For other systems and more detailed instructions look over at Vim.org
Spacevim is anouther take on vim that aims to be more like a full IDE replacement. It requires Vim or Neovim to be already installed and it’ll install an optionated list of plugins and customisations. Feel free to take a look at and its use for javascript it but I actually don’t recomend it for most people.
Basic usage of Vim
Vim is a modal editor, meaning that it has diffrent major modes, these are normal, command, insert, and visual. Furthermore the commands while might seem confusing at first are additive based so once you learn a few commands you can start to put things togeather to create a more complex or diffrent command.
Vim always starts off in normal mode, this can be confusing as in this mode you don’t see on screen what you are typing. This mode is for moving around and doing some quick editing. To enter what most people would probably call normal, where you can enter stuff into the editor, you can just enter i
for insert mode. To exit any mode and go back to the normal/default you can enter etc
key.
To move around in the normal mode you use the keys h,j,k,l for basic movement. putting a number in front allows you to move that many chars at once. For instance 10j
would move 10 lines down. In general anytime you enter a number before a command it repeats it that many times. Moving forward in a line by a full word is w
, backwards b
. Using this selection and movement method is a quick and acurate way of moving that also allows you to move, edit, enter text without your hands leaving the keyboard.
To enter the command mode where you can save and exit, amoung many other things, you can enter :
the colon key. Once in this mode you can type q
to quit, w
to write, and qw
to write and quit. You can see now a bit what I mean by additive, you simply put q and w togeather to both quite and write at the same time.
Visual mode is where you can highlight text to act on larger sections of code based on what is visualy selected. You enter this mode with v
.
configuring & customization of Vim
There is a lot you can change with the configuration file from looks to default functionality.
- settings: inside the
.vimrc
or.config/nvim/init.vim
fileset number
- shows line numbers
Vim Plugins
The easist way to install and manage plugins is with a plugin manager like Vim-plug
Some plugins you may find useful for use writing javascript
Mofiqul/dracula.nvim
- good colorscheme that I use as defaultfolke/tokyonight.nvim
- nice dark colorschemecatppuccin/nvim
- good dark colorscheme with pastelsEdenEast/nightfox.nvim
- anouther good dark colorscheme to trypangloss/vim-javascript
- syntax highlightingSirVer/ultisnips
- Snippetshonza/vim-snippets
- SnippetsMarcWeber/vim-addon-mw-utils
- Snippetstomtom/tlib_vim
- Snippetsgarbas/vim-snipmate
- Snippetsgrvcoelho/vim-javascript-snippets
- SnippetsValloric/YouCompleteMe
- code compleationscrooloose/nerdtree
- file explorer enhacementeasymotion/vim-easymotion
- quick easy movementtpope/vim-surround
- enhanced surrounding editingvim-airline/vim-airline
- looksvim-airline/vim-airline-themes
- looksChiel92/vim-autoformat
- autoformat codeneoclide/coc.nvim
- Intellisense code compleationmhinz/vim-startify
- When starting up without a file loads a nice quick file selection (recent files etc)francoiscabrol/ranger.vim
- includes the popular ranger cli file browser inside of vimnvim-telescope/telescope.nvim
- nice interface inside of vim for fuzzy finder.nvim-telescope/telescope-fzf-native.nvim
- fzf integration for telescope.tomasiser/vim-code-dark
- color themelimorris/onedarkpro.nvim
- color themeafi/awesome-vim-colorschemes
- color themeluz74/vim-nightfly-guicolors
- color themeveskag/nvim-blame-line
- adds nice looking git blame line thats configurable.akinsho/nvim-toggleterm.lua
- adds a nice terminal that is easy to toggle.jvgrootveld/telescope-zoxide
- works with zoxide on the os to quickly change root dir.tpope/vim-surround
- nice addition to basic surrounding editingvimwiki/vimwiki
- a quick wiki for use inside vim.tpope/vim-fugitive
- a great git tool inside vim.
check devinthemtn.com for more plugins that I recomend
Down the rabbit hole with Vim.
You can really go a long ways to getting Vim to run and act the way you want. if you look around you’ll likely find a lot of recomended configuration files that promise to get you the perfect setup. I highly recomend you not just download and start using these as you’ll be using someone elses perfect setup and not yours. Adding one plugin at a time or changing a few lines of the config file will let you quickly find what you want and do not want.