Introduction

Vim is already ahead of every other code editor in terms of text manipulation, as you may know. But Vim, as always, is too good to be happy acing in just a single thing! Besides its unbeatable power of manipulating text, there is one very important aspect of it which gives Vim the unprecedented popularity it has among both Vim and Non-Vim Users, probably among non-coders too!

Table of Contents

The Vim navigation arrows are also called hkjl!

This is HJKL, the Vim way of Navigating stuff!

The Influence of HJKL

Using HJKL for navigation has spread a great influence in the World Wide Web among both Vim and Non-Vim users. It has now attained a title as the Navigation Keys of Choice for coders who know the true power and impact of it for their day to day coding tasks. It is predictable that you have this question in mind. How famous is HJKL actually, that I’m baffling so much about it?

Well, probably the amount that causes other people to borrow it, or more plainly, steal it. Not only people use it in editors like VSCode and Atom despite their tremendous hate towards Vim due to the learning curve, there are also extensions that allow HJKL to be used inside a Web Browser as well! How funny is that, isn’t it?

It is precisely not possible to state in how many other programs people assign the Vim keybindings for navigation (with or without the use of extension), but this list should give you a overview about the spread of the HJKL Virus:

VS Code
JetBrains IDE
Atoms

Emacs
FireFox
Chrome (Using Vimium)

Evince
Vifm (File Manager)
Ranger (File Manager)

Bash Shell (adding “set -o vi” in ~/.bashrc)
ZSH Shell (using zsh-vi-mode plugin)
Obsidian

SumatraPDF
Awesome, i3wm, Xmonad, DWM, and many other Tiling Window Managers

I’m already tired of typing! These are a few commonly known software among developers. However, there are a lot more than you probably think, so close your mouth from the “Woah!” mode before you end up having a mosquito inside.

Why use HJKL for navigation?

The point of using HJKL is pretty straightforward, as long as you’re not among those ancient people still using two fingers for typing. When using all your 10 fingers, you keep your 4 right hand fingers on the jkl; keys, as the rest position. This gives you a boost for a quick start for typing the same way sprinters do with their crouch start for sprinting. However, when you get into the flow of typing, and all of a sudden you need to move around the text to make some changes, you need to move your hand all the way to the arrow keys situated further away from your rest position. This gets tiring over time when you switch back again and again, and is also quite time consuming.

Vim makes an astounding use of its “Mode Shift Editing” scheme to give you an edge over this long-fought battle for coders and non-coders alike. When in Normal Mode, you can press the H,J,K,L keys to move your cursor left, down, up, right respectively, without needing to move your hand all the way to the arrow keys. This could seem a little odd and you may think it’s hard to get used to, but trust me, it isn’t. Moving from frustration to flawless navigation using HJKL takes at best a few minutes, before you start giggling with pleasure.

Besides using HJKL, there’s one unparalleled shortcut that compliment this new method of navigating very well, a combo you didn’t probably know you needed. Rather than having to move your left pinkie finger all the way to the Esc key to get from Insert Mode to Normal Mode in Vim to use HJKL, you can add the following in your .vimrc to open a new door of Professionalism:

inoremap jk <ESC>

This small addition will give you an unstoppable. villainous grinning. Why, you ask? Well watch out for this!

After adding the above code in your .vimrc, you can now type jk inside of Insert Mode to make it function like the Esc key. As words don’t usually appear with the letters jk being together, you can use it without a worry. If in any case you still need to type jk together, you can first time j, wait for a second, and then type k to pring the text without invoking the Esc Key.

This way, you can supercharge your coding speeds and save your hand from unnecessary fatigue cased from moving it to places! Can you ever give your innocent fingers a better gift than this? I’m sure you can’t!

Common offshoots of HJKL

There are few more offshoots of HJKL other than the complimentary jk-Escape, that might help you in certain criteria. The first of which being the navigation between display lines and file lines, when your text is wrapped.

Using gj and gk to move across wrapped lines

If you have a long line of code, and it wraps up spanning two or more lines, and press j for moving down or k for moving up, you’ll end up landing to the next or previous line of code, instead of the wrapped line’s span:

In case you wish to move between the spanned lines instead of moving whole lines in the file, you can type gj to go downwards and gk to go upwards across spanned lines:

Using Ctrl + h/j/k/l to move between splits

When you have loads of vertical and horizontal splits at a time in Vim, it gets very frustrating to use the predefined Ctrl+w+[h/j/k/l] to navigate between the splits. If you don’t have any other keybinding set up for Ctrl+h/j/k/l, you can append the following lines in your .vimrc file to save yourself a few keystrokes:

nnoremap <C-J> <C-W><C-J>
nnoremap <C-K> <C-W><C-K>
nnoremap <C-L> <C-W><C-L>
nnoremap <C-H> <C-W><C-H>

This way use can simply use Ctrl+h/j/k/l to navigate between splits without the extra w you would’e needed otherwise.

In the next section, we’ll learn how to use hjkl in Visual Studio Code and the FireFox Web Browser.

Using HJKL In VS Code

There are two ways you can achieve this. By using a Vim Emulation Extension, or by adding new shortcuts to the keybindings.json which wouldn’t require any extensions to be used. Both have their goods and flaws. Let us break them down in bits.

Using an Extension

The first option is to install the Vim Extension for VSCode, which will turn the whole typing interface into a Vim Emulation. Meaning, you can edit code just like in Vim from inside VSCode. However, a lot of people may not prefer using Vim as a whole, in which case this may not be a viable option. But if you don’t mind doing that, this will probably make you a Coding Wizard. First, install the Vim extension from the Extensions side menu:

Once you’re done installing it, you can now use most of Vim features from your editor, which of course includes HJKL. As this is typically a sort of emulation, you’d not get all the features, but the ones available are enough to fulfill most of your tasks.

Without using an extension

The second option is to add a few shortcuts to your keybindings.json file in VS Code, if you have currently no other use for Ctrl + h/j/k/l. To achieve HJKL without using any extension. First, locate the keybindings.json file in VS Code under the Keyboard Shortcuts menu:

Now add the following lines in the keybindings.json file:

 {
    "key": "ctrl+h",
    "command": "cursorLeft",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+j",
    "command": "cursorDown",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+k",
    "command": "cursorUp",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+l",
    "command": "cursorRight",
    "when": "editorTextFocus"
  }

Finally, you can now use Ctrl + h/j/k/l no navigate in VS Code without installing the whole Vim extension.

Using HJKL In Firefox Browser

There are quite a few extensions for Firefox which get the job done. If you want more features then just HJKL navigation, you can check out Vimium-FF By Stephan Blott ans Phil Crosby available for Firefox. However, for the sake of simply using HJKL, I’d like to use the extension Vimkeybindings By Dietrich Alaya. Head out to the following link to Install it in Firefox:

https://addons.mozilla.org/en-US/firefox/addon/vimkeybindings/

After you have successfully Installed it, you can now use HJKL for scrolling up and down or left and right inside your Firefox Browser. It won’t interfere while typing the letters in an input field, so you don’t have to worry about that. The extension does not work in a few websites, like the Firefox Addon Store itself, so watch out for that.

Conclusion

As a Vim user, I didn’t care about using hjkl for quite a long time myself, until I finally forced myself to use it, only just to realize how painless coding would’ve been all this time if I had adapted to it earlier. Not only that, if you start use hjkl regularly, you’ll subconsciously find yourself tying to use them for navigation in places where you can’t, and would wish they included it too! Well for this very reason, a lot of softwares have already started to include vim-like keybindings as mentioned before. Whether you want to use Vim or not, you can still reap the fruits of HJKL. Good luck on your Navigating Adventures!

Navigate in Vim using HJKL