armno.in.th logo

My VSCode setup for 2023

Armno's avatar
Published on February 22nd, 2023
By Armno P.

I have been using VSCode as my main code editor. VSCode is highly customizable. I like to tweak it here and there from time to time.

Here is my current setup of VSCode, and how I use it. It aims for speed and minimal UI. This is what I will do if I have to set it up from scratch today.

Vim

I’m not a regular Vim user, but I got used to moving around using Vim motions (and I know how to exit Vim).

The first thing I will do after installing VSCode is to Vimify it by installing Vim extension in VSCode. I only need to use basic Vim motions

Vim extension for VSCode Github page

Then I remap esc to jk to quickly switch from Insert mode to Command mode. It’s the same mapping I use in Vim.

"vim.insertModeKeyBindings": [
  {
    "before": ["j", "f"],
    "after": ["<Esc>"]
  }
]

Another setting I have enabled is sharing the clipboard with the system. This allows me to paste text from the system’s clipboard in Vim mode using p, and vice-versa - allows me to copy the text in Vim mode (y or yy) and paste into another application.

Vim mode's settings to share clipboard with system

I also have to disable Press and Hold feature of the keyboard at the system level. This allows me to have key repeat working as intended. E.g. long press j becomes jjjjjj and not just j.

# in terminal
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false

Basic settings & UI

When I used Sublime Text, I was a big fan of its minial UI. I try to make VSCode looks minimal by hiding things I don’t need to see, or things that can be accessed with keyboard shortcuts.

{
  "workbench.statusBar.visible": false,
  "breadcrumbs.enabled": false,
  "editor.minimap.enabled": false,
  "workbench.activityBar.visible": false,
  "workbench.layoutControl.enabled": false
}

My typical VSCode window looks like this

my VSCode window
VSCode's peek preview popup
The Peek popup in VSCode
{
  "editor.gotoLocation.multipleReferences": "goto",
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.multipleDeclarations": "goto",
  "editor.gotoLocation.multipleImplementations": "goto",
  "editor.gotoLocation.multipleTypeDefinitions": "goto"
}

Search is one of the features in VSCode I use a lot - both normal code search and fuzzy search in the command palette. There are a few settings I adjust to make it suit my use cases.

When working on a repo with many images in it, it can be disturbing when I search for some file name, but the command palette shows me the list of images I don’t want to open - I never have to open images in VSCode (except of SVGs sometimes).

Search results with image paths spamming the list
Search results with image paths spamming the list

I add a glob pattern **/*.{png,jpg,jpeg,gif,webp} in Search: Exclude settings to exclude images from the command palette and the search result, while still keeping them in the repo.

Use Search Editor instead of Search in Files

The default search menu is accessible from the primary sidebar. There are a few issues there:

VSCode's default search
VSCode's default global search

The remap the keyboard shortcut to New Search Editor command instead. This opens the search window in a new tab. It’s easier to skim through the results.

Search Editor window example
Search Editor window

However this Search Editor still has some disadvantages to my use:

Extensions

Since speed is crucial for me, I try to install as few extensions as possible to keep things quick and snappy. I also like to activate/deactivate installed extensions when switching a project. For example, I would activate Angular Language Service extension only when I’m working on an Angular project, and deactivate it when I switch to work on something else.

Here are extensions I like and have activated most of the time.

Keyboard Shortcuts

Keyboard shortcuts I use often are

I recently learned that we can set a custom keyboard shortcut from the command palette. Clicking on the settings icon next to the command will go to the command editor, where we can set a custom keyboard shortcut there.

configure shortcut menu
configure shortcut menu edit window

That’s pretty much it on how I set up and use VSCode. If you have some cool tips & tricks to share, please let me know.

Cheers!

Tags:

Related posts