TodayTools

VS Code tips and tricks flashcards

Edit, navigate and debug at the speed you think, without leaving the keyboard.

Donate
Beginner friendly, starts from zero
Section
How to study
0
VS Code tips and tricksStart from zero · 1 of 12

What is VS Code, in one plain sentence?

A free app from Microsoft for writing code, a bit like a word processor made for programmers. It runs on Windows, Mac and Linux.

Notepad that understands code.

All topics

VS Code tips and tricks at a glance

VS Code is a free code editor that becomes a full coding workshop for any language once you add extensions.

It is like a carpenter's workbench: all the common tools are within reach, and you hang extra tools on it for each new job.

Words you will meet

Workspace
The project folder you opened in VS Code
Tab
A label on top for each open file
Shortcut
A key combination that does a command, like Ctrl+S to save
Command Palette
A search box that finds and runs any command
Extension
An add-on you install to give VS Code new features
Language server
A background helper that understands one programming language
Terminal
A text window inside VS Code where you type commands
Settings
Your saved choices, kept in a file named settings.json

The steps

  1. 1. Start from zero (12 cards): What VS Code is, the parts of its window, and your first setting change.
  2. 2. Core basics (15 cards): Workspaces, the Command Palette, Quick Open and the shortcuts you use every minute.
  3. 3. Next steps (16 cards): Multi-cursor editing, semantic navigation and refactors you use every week.
  4. 4. Go deeper (18 cards): Debug configs, tasks, snippets, remote work, settings layers and performance.
All 12 cards in Start from zero
What is VS Code, in one plain sentence?
A free app from Microsoft for writing code, a bit like a word processor made for programmers. It runs on Windows, Mac and Linux.
Why not just write code in a plain notepad?
A plain notepad does not understand code, so typos hide until the program fails. VS Code colours code, flags mistakes as you type and keeps the whole project in one window.
Where might you have already seen VS Code?
In videos of people coding, it is often the dark window with a file list on the left. Many websites and apps you use every day were written in it.
What are a file, a folder, a project and a workspace?
A file holds one piece of code and a folder holds files. A project is the folder for one app, and the workspace is the folder you opened in VS Code.
What are the editor, a tab, the sidebar and the panel?
The editor is the big area where you type. Each open file gets a tab on top. The sidebar on the left lists files (the Explorer), and the panel at the bottom holds the terminal and errors.
What are a shortcut and the Command Palette?
A shortcut is a key combination, like Ctrl+S to save. The Command Palette is a search box for every command, so you never hunt through menus.
What are an extension, a language server and an IDE?
An extension is an add-on you install for new features. A language server is a background helper that understands one language. Together they turn the editor into an IDE, a full coding workshop.
What are the terminal and settings?
The terminal is a text window where you type commands to the computer. Settings are your saved choices, like font size, kept in a file named settings.json.
What is JSON, the format the settings file uses?
JSON is a simple text format of names and values inside curly braces. Each name is in quotes, followed by a colon and its value.
Your first tiny win: make the text bigger with one setting.
In Settings (Ctrl+,), click the page icon at top right to open settings.json. Add the setting name and the value 16, save, and the text grows at once.
What do you need before starting this topic?
A computer with VS Code installed, free from its official website. Nothing else. Mac users press Cmd where the cards say Ctrl, unless a Mac key is shown.
What will you be able to do after this topic?
Open any project, jump to any file or command in seconds, edit many lines at once, format and fix code, and debug without leaving the keyboard.
VS Code tips and tricks cheatsheet

Navigate (Windows and Linux; Mac uses Cmd)

  • Ctrl+Shift+P Command Palette (also F1)
  • Ctrl+P Quick Open file; add :line or @symbol
  • Ctrl+Shift+O Symbol in this file
  • Ctrl+T Symbol in workspace
  • F12 Go to definition
  • Alt+F12 Peek definition
  • Shift+F12 All references
  • Ctrl+G Go to line
  • Alt+Left Go back (Mac: Ctrl+-)
  • F8 Next problem

Multi-cursor and selection

  • Ctrl+D Add next match
  • Ctrl+Shift+L Select all matches
  • Shift+Alt+I Cursor at end of each selected line
  • Ctrl+Alt+Down Add cursor below (Mac: Cmd+Option+Down)
  • Shift+Alt+Right Expand selection (Mac: Ctrl+Shift+Cmd+Right)
  • Ctrl+L Select current line
  • Ctrl+U Undo last cursor move
  • Esc Back to one cursor

Edit and refactor

  • F2 Rename symbol across files
  • Ctrl+. Quick fix and refactor
  • Alt+Down Move line down (Shift copies)
  • Ctrl+Shift+K Delete line
  • Ctrl+Enter Insert line below
  • Ctrl+/ Toggle line comment
  • Shift+Alt+F Format document
  • Ctrl+Shift+\ Jump to matching bracket

Layout and terminal

  • Ctrl+B Toggle sidebar
  • Ctrl+J Toggle panel
  • Ctrl+` Toggle terminal
  • Ctrl+Shift+` New terminal
  • Ctrl+\ Split editor
  • Ctrl+Shift+T Reopen closed editor
  • Alt+Z Toggle word wrap

Debug

  • F5 Start or continue
  • F9 Toggle breakpoint
  • F10 Step over
  • F11 Step into (Shift+F11 out)
  • Shift+F5 Stop
  • Ctrl+Shift+F5 Restart

code command line

  • code . Open this folder
  • code -g src/app.ts:42 Open file at line 42
  • code -r . Reuse the current window
  • code --diff a.json b.json Diff two files
  • code --install-extension dbaeumer.vscode-eslint Install an extension
  • code --list-extensions Export your extension list
  • code --wait Block until closed (Git editor)
Donate