More Ergonomic VSCode

Publication dateCategorytReading time2 min read

VSCode Screenshot

Shortcuts & Vim extension

Problem: You have to move your hands away from the keyboard to the mouse frequently.

Even though one move may take about a second, they compound into minutes and hours. Plus, sometimes you need to search for a certain action in the menu which may take a lot of time.

Solution: Use VSCode's keybindings keybindings. Make custom keybidings for the actions that are performed frequently. For example jumping from and to the console and file explorer, finding all the references, and renaming a variable. If you find memorization hard, you can use a spaced-repetition system like Anki.

Vim is a great extension. It is based on the famous Vim editor which uses the keyboard-only philosophy. It allows you to write, edit and navigate quickly. Vim has a learning curve, at least for me, and I don't consider myself an expert but it boosted my productivity a lot.

With Vim, it's more friendly to use Relative line numbers, this can be done by assining "relative" to "editor.lineNumbers" in the settings.

If you constantly jump back and forth between two files, use the "split" feature activated with Ctrl+\.

Finally use code snippits and define your own for a quick build.

Appearance

Problem: It's hard to focus because the code is messy/jumbled up.

Solution:

  • Use a dark/dim theme. I like One Dark Pro's color scheme.
  • a monospaced-font. e.g: Iosevka, Monoid, Hasklig, Hack, JetBrains-Mono. I use FiraCode and I've never been more satisfied.
  • "Bracket Pair Colorizer 2" extension. Very helpful if you're a Javascript developer dealing with nested objects.
  • "Better Comments" extension.
  • "Prettier" extension. Switch the format on save option. Watch your code gets automatically organized.
  • "Sort lines".
  • "vscode-icons".