10x VSCode Guide

This guide is a work-in-progress and a culmination of what I know about VSCode and which shortcuts I prefer to use. Hope it helps someone.

✋ Intro

This is a short guide I have to become as close as possible to the efficiency of a "Mouse-less Developer" with using purely VSCode. No Vim motions, new shortcuts, just default VSCode (almost).

🙉 "Just use NeoVim", "Mouse-less development!", "Customize Your Editor"---I don't know if it's a skill issue for me, but even after spending more than a few months learning Vim Motions, configuring my dotfiles, I still keep coming to VSCode with almost default settings because "it just works." Sorry.

Prime said "Know your Editor". Albeit I don't use Vim like he does, if you're just looking to level-up your VSCode game, this guide helps you discover the nook and crannies of VSCode that I personally discovered and settled on that can possibly make you as (if not more) productive as a Vim user.

As a bonus, I also added a Vim Cheatsheet at the bottom.

🛸 Extensions

You should have these extensions, no debate. These extensions pretty much make any other code editor a deal-breaker for me if it doesn't have a good equivalent.

Git

• Git Graph - mhutchie.git-graph - There's just no better equivalent for this on NeoVim or Zed (I tried gitui, not for me).
• GitHub Pull Requests - GitHub.vscode-pull-request-github - Create PRs and Review PRs in VSCode is a must-have.
• GitLens - eamodio.gitlens - I just use it for Git Blames, branch diffs, and commit diffs.

Markdown

• Markdown All in One - yzhang.markdown-all-in-one - Secret to writing more maintainable READMEs.
• GitHub Markdown Preview - bierner.github-markdown-preview - Closer to GitHub README.

Code

• ErrorLens - usernamehw.errorlens - Nice-to-have for errors to scream at the actual lines of code.
• Comment Anchors - ExodiusStudios.comment-anchors- Make your TODOs and FIXMEs useful.
• Color Highlight - naumovs.color-highlight - Extremely nice to have. If you work with Shadcn, also check match Hsl with No Function
• (Optional AI Copilot): Supermaven (FREE or 99$/y), Codeium (FREE or 144$/y), GitHub Copilot (100$/y).

✨ Shortcuts

Settings

Settings you should probably have at minimum.

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": "always",
  },
  "editor.formatOnSave": true,
  
  // Editor
  "editor.minimap.enabled": false, // Cleaner editor, more space.
  "workbench.sideBar.location": "right", // Less-obtrusive sidebar when it opens/closes because it's on the right.
  "markdown.extension.toc.slugifyMode": "vscode", // For emojis to work in Table of Contents README.
  "workbench.panel.opensMaximized": "always", // Can also `Cmd` + `Shift` + `P` > `View: Toggle Maximized Panel`
}

🥷 Keyboard Shortcuts

Get faster with mouseless

Open Sections

• Open/Close Panel: Cmd + J
• Open/Close SideBar: Cmd + B

Open Sections with Focus

• Open/Close Terminal (Panel): Ctrl^ + ~
• Open File Explorer (SideBar): Cmd + Shift + E

Navigation

• Terminal: Cmd + Shift + [ (prev) OR ] (next)
• Editor (tabs): Cmd + Option + ◀️ (prev) OR ▶️ (right)
• Editor (to previous line of code focused): Ctrl^ + -
• Editor (to forward line of code focused): Ctrl^ + Shift + -
• Reopen last-closed tab: Cmd + Shift + T
• Close Tab: Cmd + W
• Breadcrumb Navigation: Cmd + Shift + . (You probably didn't know this, but very useful!)

Code Faster!

• Refactor: Fn + F2
• Get All References: Fn + Shift + Option + F12
• Go to Implementation: Fn + F12
• Fuzzy Search Codebase: Cmd + Shift + F
• Search Token Codebase: Cmd + T
• Search File: Cmd + P
• Collapse Lines of Code: Cmd + K then 0
• Expand All Lines of Code: Cmd + K then J

Vim VSCode Extension Cheatsheet

Navigation

Hint: Use 2-digit numbers for bigger steps.

• B - back but on the next word after a space (very good, use this when navigating tailwind classes ez).
• E - forward to end of word but on next word after space (very good, use this when navigating tailwind classes ez).
• <number>j - Move down fast
• <number>k - Move up fast
• <number>w or 5<number>e - Move right fast. (prefer this over <number>l)
• <number>b - Move left fast. (prefer this over <number>h)
• f<character> - Move to the nearest on the right of cursor. (SUPER HACK!)
• F<character> - Move to the nearest on the right of cursor. (Amazing!)
• shift6 - move to left-most non whitespace character.
• shift4 - move to right-most non whitespace character.
• gd Go to definition.

Write

• ci" - Change inside of quotes.
• ca" - Change around quotes.
• caw - Change around word.
• vi" - Select inside of quotes.
• va" - Select around quotes.
• vaw - Select around word.
• gcc - Comment current line.
• gc - When line is selected (v), comments it out.

Surround

• ysw" - surround 1 word with quotes.
• ys3w" - surround multiple words with quotes (in this case 3 words)
• ysaw" - surround around a word with quotes. Cursor can be anywhere on the word.
• ys$" - surround until the end of line with quotes.

Custom Hotkeys I recommend

// Jump to matching tag
{
  "before": ["leader", "t"],
  "commands": ["editor.emmet.action.matchTag"]
},

// Rename Variable
{
  "before": ["c", "d"],
  "commands": ["editor.action.rename"]
},