Category Archives: vim

javascript development with vim

Vim is great as a lightweight editor for JavaScript programming. But pretty soon I end up missing some more advanced features like syntax checks and code completion. Syntax highlighting only takes you so far.

Recently I was working on a Node.JS project, so I thought I’d find me some plugins for Vim to get those more advanced development features. Vim is super extensible with its massive plugin ecosystem, but sometimes it can take some tinkering to get things to work. After a bit of searching and trying things out, I managed to get code completion working for JavaScript code, and have basic syntax checking active.

I found that the CoC plugin, in combination with some of its extensions work perfectly.

First you need to install the CoC plugin. This plugin is more of a framework to get code completion and VSCode-like features in Vim. So you can use this for other languages too, like Python, Rust, Java, PowerShell, C#, etc. You need Node installed for this to work, but if you’re working with JavaScript, you most likely have that installed already.

Once you have the plugin set up, you then add CoC extensions for the languages you want to use. For JS this turns out to be the TypeScript server plugin, which gives your JS & Typescript support, including JSX and TSX. I also added the JSON plugin.

To add the CoC extensions, open Vim and install the extensions using:

:CocInstall coc-json coc-tsserver

That’s about it. Now if you open up a .js file, you should be getting JS code completion. If you mess up some code, you’ll get some error indications in the margins, telling you something is not quite right with your code.
Handy stuff!

Yep. There’s clearly something wrong with that code.
Helpful code completion info right there.

A good way to find a list of more CoC extensions is through VimAwesome. There’s something in there for everyone it seems.

use a PowerShell script as a Vim filter to encode a url

Artistic closeup of a .vimrc file

Vim filters are cool. They let you run the content of your current buffer through a command and have its output returned into the bugger. That means that you can use filters to edit text using any command your operating system has available.

Now on a Linux machine that’s quite handy. On a Windows machine that isn’t so handy, because the default shell is CMD and that doesn’t have all those handy Unix text manipulating utilities. But what about a PowerShell script that would encode or decode a URL for example?

It turns out that wasn’t as easy as I expected, so I’ll spill it here in case you’re looking to do something similar.

First calling the script from Vim means you have to call powershell.exe because by default Vim uses cmd.exe as its shell. That isn’t so hard:

nnoremap <Leader>dc :%!powershell.exe -noprofile -nologo -file c:\tools\decode-string.ps1<CR>
nnoremap <Leader>ec :%!powershell.exe -noprofile -nologo -file c:\tools\encode-string.ps1<CR>

I create 2 shortcuts here to encode (ec) and decode (dc) trigger using the leader key.
These will pipe the content of your buffer through the script, and get whatever it spits out through the standard output back into your buffer.
The extra command line parameters I pass into powershell.exe are to make it as fast as possible and not do any unnecessary junk. The -noprofile is the most important one as this skips loading any special modules you have set up in your PowerShell profile.

Reading from the pipe in a PowerShell script wasn’t as easy as I thought. Using the ValueFromPipeline attribute on the input parameter didn’t work for some reason. After some searching I came across a magical $input parameter that gets anything you receive from standard input for use in your script. Handy.
So the script was as simple as doing this:

[Reflection.Assembly]::LoadWithPartialName("System.Web") | Out-Null
[System.Web.HttpUtility]::UrlEncode($input)

What do we do when PowerShell can’t help us out of the box? That’s right. We summon the powers of .NET assemblies to get the job done. In this case, we’re summoning System.Web and using the HttpUtility class to encode the incoming data.
We do exactly the same to decode text by the way:

[Reflection.Assembly]::LoadWithPartialName("System.Web") | Out-Null
[System.Web.HttpUtility]::UrlDecode($input)

This is pretty powerful. By using the $input variable in PowerShell together with the Vim filter function, you can do all sorts of text transformations. This can make your developer life a lot easier.

cool vim tips and tricks you might not know

Vim has tons of awesome shortcuts and features you pick up over time. Some of those I don’t use every day so I have to write them down so I can look them back up when I can’t remember exactly how it works. Instead of keeping them locked away in a text file, I’ll throw them online here and spread the Vim love. None of these need any special plugins. They should all work right out of the box with plain old Vim.

If you want to know more about a specific command listed here, use the Vim :help command to find out more. There are usually more options and possibilities for each of these commands and the Vim documentation is excellent.

Here we go!

When you are on the command line using a console application and you want to edit the output in Vim right away, or open that long list of possible command line switches in Vim for reference, this one will come in handy.
I’m using GVim here because since that opens in a separate window from your shell, this is the most useful.

ls *.txt | gvim -
docker -h | gvim -
git --help | gvim -

This one is for opening a ton of files in a single Vim instance from Powershell, in different tabs. This means you are running this from a Powershell console of course.

gvim -p (ls *.ps1)

For more Vim command line options run this in your favorite shell environment:

vim -h
gvim -h

How about opening a remote file, or fetch HTML from a page over HTTP using Vim:

:e https://n3wjack.net/

When you work with log files a lot, being able to delete lines containing or not containing a specific word can be just what you need.
These two commands are perfect to filter out obsolete exceptions and figure out what is causing that nasty production issue:

:g/DeleteAll/d
:v/DeleteAllButThis/d

Did you know that Vim has a spell checker? I didn’t know that at the beginning (try :h spell for more details).
To activate/deactivate:

:set (no)spell

To jump to the next / previous misspelled word:

]s
[s

To get a list of spelling suggestions (or use the mouse in GVim, which is quite practical):

z=

You can add a simple XML-tidy shortcut to your .vimrc file by adding the following command.
What it does is setting the file type to XML, removes spaces between opening & closing brackets, add a return character in-between the opening & closing brackets and finally formats the document so it looks all nice and indented.

nmap <leader>ppx <Esc>:set filetype=xml<CR>:%s/> *</></g<CR>:%s/></>\r</g<CR><ESC>gg=G<Esc>:noh<CR>

You can force syntax highlighting in Vim as follows for e.g. HTML, XML and Markdown.
Of course this works for a ton of other file types as well, as long as you can figure out what the extension/file type key is. But that’s pretty easy in most cases.

:set syntax=html
:set syntax=xml
:set syntax=md

I add shortcuts for any files I frequently edit by using the leader key and a letter combination that’s easy to remember.
For example this one to edit my custom .vimrc file when I press the leader key followed by “e” and “v” (edit vimrc).

nnoremap <Leader>ev :tabe ~\vimfiles\nj-vimrc.vim<CR>

That’s about it. For more nice Vim tips check out more Vim posts. Another good resource for bite sized Vim tips is the MasteringVim on twitter and it’s newsletter.

make vim awesome with plugins

Artistic closeup of a .vimrc file

Vim is a great lightweight editor as it is. But after setting it all up on your windows box and tweaking your _vimrc it still might lack that bit of awesome you’re looking for in a modern text editor.

Time to spice things up with plugins!

Vim plugins are written in viml or vimscript, an internal script language in the vim editor, and are plain .vim files containing scripting code which extend vim in all sorts of wonderful ways. There are tons of vim scripts out there so finding the right ones for your needs takes a bit of time. There are however some helpful guides out there and blog posts like this one to help you on your way. I’ll list some of those and links to more plugins at the end.

Installing those scripts and plugins can be tedious though. Download a zip, unpack, copy files, yada-yada-yada. Since we’re into package managers these days we want things to go automatically with a few keystrokes.

Enter Vundle.

You’ve probably guessed by now this is a vim plugin manager (and a plugin by itself). It allows you to install, update and search for available vim scripts among other things. I like this one in particular because it does this all from vim itself with a number of specific commands.
To get started you’ll have to install this one manually though, but it only takes a few command line statements and some .vimrc edits. Once you have this up and running, you’ll be able to install most plugins using it so it’s worth the hassle.

Check out the info on the Vundle github page on how to install and then come back here. ;)

Alright. Now, what plugins should we get?
Well it depends on what you want to do of course, but here are some general purpose ones you might like.

vim-airline

A pretty looking status bar you’ll see in a lot of vim screenshots. It’s tweakable so you choose what kind of info you want it to show.

vim airline status bar plugin

ervandew/supertab

Adds tab completion to vim using the tab-key. That might sound odd but the default use a bunch of control keys so this just comes more “natural”.

The-NERD-tree

This is a directory browsing plugin which is just better than Netrw which comes out of the box. Visually you can fold/unfold folders, search (use any vim command in the window), manipulate files etc. Very handy to keep track of a project when programming or just see what other files are in a folder without having to exit vim.

vim nerdtree plugin

CtrlP

A fuzzy file search plugin. Press Ctrl-P and you’ll get list at the bottom of files in your current directory. Type in some characters of the filename you are looking for and it will filter the files matching those characters. So you don’t need to know the full name, and you can skip parts. Check out this video to get an idea of how it works.

One note on this. If you have a folder with a lot of files in the sub-folder tree (like a C# application with build files in the sub-folder) be sure to exclude any non-relevant types like object & dll files. CtrlP has a maximum file limit and those irrelevant files can stop you from finding those you actually want to see.

In my _vimrc I use this to exclude the .NET build artifacts and some more irrelevant file types:

set wildignore+=*\\obj\\*,*\\bin\\*,*.swp,*.zip,*.exe,*.dll

vim-fontzoom

vim-fontzoom is a simple plugin that allows you to increase or decrease your vim font size using the plus or minus key when you are in command mode. Note that this doesn’t work with the +/- on your numeric pad, just with the regular keys on your keyboard. But you can remap the keys if you want to change this.

chriskempson/base16-vim themes

Not really a functional plugin but hey, you want your editor to look pretty right? I’ve tried a ton of themes already but lately I’m sticking with the chriskempson/base16-vim set. In this package you get a bunch of nicely crafted and balanced color themes which will definitely have something you like. Dark and light themes, monokai, solarized and other classics, it has it all. The last theme plugin you’ll ever need.

Moar!

Depending on your workload there are plenty of more specific plugins out there. Google is your friend, but here’s a few places to get started:

  • The easiest to use and most awesome Vim plugin directory is called VimAwesome. Great to find new plugins, or great to find old ones and how to install them. Each plugin lists how to install it with Vundle or another plugin manager, which is super handy.
  • The 15 best vim plugins according to Steve Francia who made a vim distro called The Ultimate Vim Distribution, so I guess he knows what he’s talking about. :)

[ Interested in learning more about Vim? Check out the concise Mastering Vim Quickly ebook to get productive fast in Vim. ]