TodayTools

Best VS Code extensions flashcards

The extensions worth installing, how to configure them well, and how to build your own.

Donate
Beginner friendly, starts from zero
Section
How to study
0
Best VS Code extensionsStart from zero · 1 of 12

What is a VS Code , in one plain sentence?

A small add-on you install into VS Code, a free code editor, to give it a new skill such as tidying your code or checking spelling.

Apps for your editor, like apps for your phone.

All topics

Best VS Code extensions at a glance

VS Code extensions are add-ons that give the free VS Code editor new skills.

Like attachments for a kitchen mixer: the mixer stays the same and each attachment adds one job.

Words you will meet

Extension
An add-on that gives VS Code a new skill
Marketplace
The online store where extensions are found
Publisher
The person or company that made an extension
Formatter
A tool that tidies how code looks
Linter
A tool that warns about likely bugs in code
Workspace
The project folder you have open, with its own settings
Settings
Your choices for the editor, kept in settings.json
Profile
A named set of extensions and settings you can switch to

The steps

  1. 1. Start from zero (12 cards): What extensions are, the key words in plain English, and your first setting.
  2. 2. Core basics (14 cards): Install and manage extensions, and set up the core four: formatter, linter, language, spelling.
  3. 3. Next steps (15 cards): Git, front end, APIs, config files and team-wide extension setup.
  4. 4. Go deeper (16 cards): Remote extensions, AI assistants, supply-chain safety and writing your own.
All 12 cards in Start from zero
What is a VS Code extension, in one plain sentence?
A small add-on you install into VS Code, a free code editor, to give it a new skill such as tidying your code or checking spelling.
What is VS Code, and what is a code editor?
A code editor is a writing app made for code: it colours words, numbers lines and finds mistakes. VS Code is a free, popular one from Microsoft for Windows, Mac and Linux.
What was coding like without good extensions?
You fixed spacing by hand, found typos only when the program crashed and argued with teammates about style. Extensions do those chores while you type.
Where do you already meet the extension idea?
Apps on your phone, add-ons in your web browser and filters in a photo app. Each adds one feature to something you already use.
What is an everyday picture for extensions?
A kitchen mixer with attachments: a whisk, a dough hook, a juicer. The mixer stays the same; each attachment adds one job. Too many on the counter just get in the way.
Where do extensions come from?
From the Marketplace, an online store of extensions you open from the Extensions view inside VS Code. Each one has a publisher, the person or company that made it.
What are a formatter and a linter?
A formatter tidies how code looks: spaces, line breaks, quotes. A linter reads code and warns about likely bugs, like a name you made but never used.
What are settings and a workspace?
Settings are your choices, like 'tidy code on save', stored in a file called settings.json. A workspace is the project folder you have open, and it can have its own settings.
What are a theme and a profile?
A theme changes VS Code's colours or file icons. A profile is a named set of extensions and settings, such as one for Python and one for web work, that you switch between.
What do you need before starting?
VS Code installed (free) and a small project folder to try things on. No coding experience is needed for the first level.
What is a first tiny win?
Turn on format on save in your settings, so the editor tidies the file each time you save.
What will you be able to do after this topic?
Pick safe, useful extensions, set up a tidy formatter and linter, share the same setup with your team, keep VS Code fast and even build a small extension of your own.
Best VS Code extensions cheatsheet

Manage extensions

  • Ctrl+Shift+X Extensions view (Mac: Cmd+Shift+X)
  • @installed @updates @disabled Search filters for what you have
  • @category:formatters @sort:installs Browse a category by popularity
  • @recommended Workspace recommendations
  • Disable (Workspace) Off in this repo only
  • Install Specific Version Roll back a bad update
  • Help: Start Extension Bisect Find a misbehaving extension

Command line

  • code --install-extension dbaeumer.vscode-eslint Install by id
  • code --uninstall-extension ms-python.python Remove
  • code --list-extensions --show-versions Back up your exact setup
  • code --disable-extensions Start clean to rule extensions out
  • code --profile "Python" Open with a profile's extensions

Core set by stack (exact ids)

  • esbenp.prettier-vscode Formatter for web files
  • dbaeumer.vscode-eslint JS and TS linting
  • ms-python.python Python run, debug, test
  • charliermarsh.ruff Python lint, format, imports
  • bradlc.vscode-tailwindcss Tailwind classes
  • rust-lang.rust-analyzer Rust language server
  • redhat.vscode-yaml YAML with schemas
  • streetsidesoftware.code-spell-checker Spelling in code
  • usernamehw.errorlens Inline diagnostics
  • eamodio.gitlens Blame and history

Remote development

  • ms-vscode-remote.remote-ssh Code on a server over SSH
  • ms-vscode-remote.remote-containers Dev Containers
  • ms-vscode-remote.remote-wsl Linux on Windows
  • code tunnel Reach a machine with no open SSH port
  • Install in SSH: host Put a workspace extension on the remote

Build your own (package.json)

  • "engines": { "vscode": "^1.95.0" } Oldest VS Code you support
  • "activationEvents": ["onLanguage:python"] Wake up lazily
  • "contributes": { "commands": [] } Declare commands, menus, settings
  • "extensionKind": ["workspace"] Run next to the code
  • "browser": "./dist/web/extension.js" Web entry point
Donate