Category Archives: vim

base16-vim has all the vim themes you’ll ever need

You think that’s a bold statement? Hear me out. Vim themes are great, but you (and most certainly I) spend way too much time downloading and trying out all these fancy new themes, right? At some point I came across this base16-vim plugin which has a shit-load of cool themes, all using a base of 16 colors. I haven’t looked back since. Well, maybe once of twice, but still, I’m sticking to it.

Base16-vim contains 128 different themes, and it has all the popular ones like the github theme, solarized (dark & light), monokai, gruvbox and many more. To avoid spending too much time trying them all out, here are some examples of the ones I like the best. If you want to try them in a browser, check out the previews to find the perfect one for your setup.

Be sure to check out the geeky base16-greenscreen theme, it’s awesome.

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.