Get amazing at VS Code 🚀

This guide is aimed at helping you becoma a VS Code Wizard 🧙‍♂️. It’s a work in progress, so if you have any suggestions, please let us know! It will teach you concepts and shortcuts that will make you a better and faster developer. Do not try to use all of these at once, but rather pick one or two at a time and practice them until they become second nature.

The Command Palette 🎨#

The command palette is the most important tool in VS Code. It allows you to do anything in VS Code, and it’s the fastest way to do it. It’s also the quickest way to find out what you can do in VS Code. It’s the one thing you should learn first.

To open the command palette, press Ctrl + Shift + P.

Settings ⚙️#

Find the settings by pressing Ctrl + , or opening the Command Palette (Ctrl + Shift + P) and searching for “Settings”. Consider changing the default behavior from the UI to using a JSON-file to make it easier to search for settings and to copy-paste settings from others.

Shortcuts 🚴#

Change and add new shortcuts by opening the Command Palette (Ctrl + Shift + P) and searching for “Keyboard Shortcuts”. Access the JSON-version with the “Open Keyboard Shortcuts (JSON)” command.

Jumping Horizontally ↔️#

Jumping one character at a time#

• Right - Move cursor one character to the right ➡️
• Left - Move cursor one character to the left ⬅️

Jumping to the beginning/end of a word#

• Ctrl + Left - Jump to the beginning of the word 🏁
• Ctrl + Right - Jump to the end of the word 🏁
• Enable camelCase Navigation to jump between words in camelCase variables. Here’s how to enable it in your shortcuts.json:

[
  {
    "key": "ctrl+right",
    "command": "cursorWordPartRight",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+shift+right",
    "command": "cursorWordPartRightSelect",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+left",
    "command": "cursorWordPartLeft",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+shift+left",
    "command": "cursorWordPartLeftSelect",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+backspace",
    "command": "deleteWordPartLeft",
    "when": "textInputFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+backspace",
    "command": "deleteWordPartRight",
    "when": "textInputFocus && !editorReadonly"
  }
]

Jumping to the beginning/end of a line#

• Home - Jump to the beginning of the line 🏠
• End - Jump to the end of the line 🏁

Jumping Vertically ↕️#

Jumping one line at a time#

• Up - Jump one line up ⬆️
• Down - Jump one line down ⬇️

Jumping to the beginning/end of a file#

• Ctrl + Home - Jump to the beginning of the file 📄
• Ctrl + End - Jump to the end of the file 📄

Selecting Text 📝#

Select text with Shift and any movement command. A neat trick is to select a whole line by jumping to the end and then selecting backwards. This can be done by pressing Shift + End and then Shift + Left. Which of course works in the other direction.

Navigating Files 📂#

• Ctrl + P - Open the file search, shows recently opened files 🔍
• Ctrl + Tab - Switch between open files 🔁
• Ctrl + Shift + Tab - Switch between open files in reverse order 🔙
• Ctrl + Page Down - Go to the next file ⏭️
• Ctrl + Page Up - Go to the previous file ⏮️

Navigating the UI 🖥#

• Ctrl + Shift + E - Open Explorer 🗂
• Ctrl + Shift + F - Open Search 🔍
• Ctrl + Shift + H - Open Replace 🔠
• Ctrl + B - Open/Hide Sidebar 🥷
• Ctrl + 1 - Focus on the first panel, usually takes you back to your code editor 🧐

Editing ✏️#

IntelliSense 💡#

IntelliSense provides code completion and suggestions. Activate it with Ctrl + Space.

Quick Fix 🔧#

Quick Fix offers suggestions for code errors. Activate it with Ctrl + ..

Go to Definition 🔍#

Jump to the definition of a variable or function with F12 or Ctrl + Click.

Find all references 🔍#

Find all references to a variable or function with Alt + Shift + F12.

Errors ⚠️#

Jump to errors and warnings with F8 (next) and Shift + F8 (previous).

Imports 📦#

Organize imports, sorting them and removing unused ones, with Alt + Shift + O.

Comments#

Toggling line comments works both for single lines and for multiple lines Ctrl + ’ 🗨️

Extensions 🧩#

Editing Web Apps 💻#

• EditorConfig for VS Code: Ensures consistency in code.
• GitLens: Adds Git insights directly in the editor.
• Select Line Status: Displays selected lines in the status bar.
• IntelliCode: Provides AI-assisted IntelliSense by showing recommended completion items for your code context at the top of the completions list.
• Live Server: Launch a development local Server with live reload feature for static & dynamic pages.
• Path Intellisense: Autocomplete file names.
• CodeSnap: Take beautiful screenshots of your code
• YAML: Support for YAML files by Red Hat.
• Rainbow CSV: Highlight CSV columns.

JavaScript & TypeScript#

• Biome: Formatter and linter, can replace ESLint and Prettier.
• ESLint: Integrates ESLint JavaScript linting.
• Prettier: Code formatter.
• Pretty TypeScript Errors: Makes errors pretty and human-readable.
• Twoslash Query Comments: Highlights types in JS and TS files when using the // ^? comment.

CSS#

• CSS Variable Autocomplete: For working with CSS variables.
• Tailwind CSS Intellisense: Tailwind class autocompletion.

Markdown 📝#

• Markdown All in One
• markdownlint