The Ultimate List of VSCode Extensions

VSCode is highly extensible and customizable. Though VSCode is technically a text editor, the extensions in this list will start to turn it into a feature rich IDE.

Getting Started

1. Install VSCode
2. Enable settings sync (ctrl-,). Alternatively, use the Settings Sync extension to sync your settings via GitHub gists.

General

• GitHub Copilot: Your AI pair programmer. I, for one, welcome our robot overlords. Note that the preview requires you to sign up for a waitlist.
• GitHub Codespaces: Cloud-hosted development environments that allows you to access your projects from a browser.
• Live Server: Launch a development local Server with live reload feature for static & dynamic pages.
• Live Share: Real-time collaborative development.
  • Live Share Whiteboard: Adds a real-time collaborative whiteboard to Visual Studio Live Share sessions.
• Remote - SSH: Open any folder on a remote machine using SSH.
  • Remote - SSH: Editing Configuration Files: Edit SSH configuration files.
• Remote - WSL: Open any folder in the Windows Subsystem for Linux (WSL).
• Cacher: Code snippet manger via GitHub gists (paid extension).
• vscode-spotify: Use Spotify inside vscode (requires a Spotify subscription).
• Browse Lite: Embedded browser in VS Code.
• Choose A License: Choose a license for your project in VS Code.
• EditorConfig: EditorConfig Support for Visual Studio Code.
• vscode-database: Support mysql, postgres, SSL, socked - SQL database.
• Snyk: Easily find and fix vulnerabilities in both your code and open source dependencies with fast and accurate scans.

Productivity

• IntelliCode: AI-assisted IntelliSense.
• Path Intellisense: Autocomplete filenames.
• Version Lens: Shows the latest version for each package using code lens.
• vscode-faker: Generate fake data for name, address, lorem ipsum, commerce and much more.
• Bookmarks: Mark lines and jump to them.
• Peacock: Subtly change the workspace color of your workspace.
• Output Colorizer: Syntax highlighting for log files.
• Bracket Pair Colorizer 2: A customizable extension for colorizing matching brackets. Note: this is now a built-in feature of VSCode, add the following to your settings.json:

  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,

• Image preview: Shows image preview in the gutter and on hover.
• vscode-pdf: Display pdf file in VSCode.

Code Editing

• Prettier: General purpose code formatter.
• Better Comments: Improve your code commenting by annotating with alert, informational, TODOs, and more. I've also configured it to highligh fixme and note.
• Error Lens: Improve highlighting of errors, warnings and other language diagnostics. Some people might find this too distracting, but I think the trade-off is worthwhile as it helps me quickly identify errors. Also works with lots of other extensions, linters and suggestions. I configured it to set a short delay before showing the error.
• Regex Previewer: Regex matches previewer.
• change-case: Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word.
• Multiple cursor case preserve: Preserves case when editing with multiple cursors.
• Rewrap: Hard word wrapping for comments and other text at a given column.
• Hungry Delete: Delete an entire block of whitespace or tab.
• Tab Out: Tab out of quotes, brackets, etc.
• Code Spell Checker: Spell check your code.
• DotEnv: Support for dotenv file syntax.
• Highlight Bad Chars: Highlight bad characters such as No-break space ( ) and the Greek question mark (;) in your source files.

File Managment

• File Utils: A convenient way of creating, duplicating, moving, renaming and deleting files and directories.
• advanced-new-file: Create new files with a context menu - specify the file type and location. I've replaced my new file shortcut ctrl-n to use this extension.
• Scratchpads: Create multiple scratchpad files for doodling while you're coding. I've set this to the shortcut ctrl-alt-n.

Git

• GitLens: Supercharge Git within VS Code. Does a whole lot of Git related things - too many to list here.
• Git History: View git log, file history, compare branches or commits
• Git Graph: View a Git Graph of your repository, and perform Git actions from the graph.
• GitHub Pull Requests: Allows you to review and manage GitHub pull requests and issues.
• Checkpoints: Checkpoints used in between commits for keeping a local short-term history of work in progress files, like bookmarks in you undo-stack.
• gitignore: Lets you pull .gitignore templates quickly and easily.

Diagramming

• Draw.io Integration: Integrates Draw.io into VS Code. Lets you use .drawio.png files, which are both directly editable and easily exported. I use the theme atlas.
• PlantUML: Rich PlantUML support for Visual Studio Code.

Appearance

There are plenty of themes to choose from and this comes down to personal preference, but this is what I'm currently using:

• One Dark Pro: Atom‘s iconic One Dark theme for Visual Studio Code.
• Material Icon Theme: Material Design Icons for Visual Studio Code
• Material Product Icons: Product Icon Theme with Material Icons for VS Code.

Specialized Extensions

For pretty much any language out there, you can find extensions for syntax highlighting, linting, formatter, and so on. I'll omit most of those sorts of extensions here, and instead focus on some more interesting or unique extensions.

JavaScript, etc.

• ESLint: Linting for JavaScript (I know I said no linters, etc. but this is a must-have).
• npm: npm support for VS Code.
• Add jsdoc comments: Adds simple jsdoc comments for the parameters of a selected function signature.
• Wrap Console Log: Wrap to console.log by word or selection.
• Import Cost: Display import/require package size in the editor.
• Auto Import: Automatically finds, parses and provides code actions and code completion for all available imports.
• Glean: The extension provides refactoring tools for your React codebase.
• TypeScript Error Translator: TypeScript errors, translated for humans.

HTML

• Auto Close Tag: Automatically closes the tag when you type a space after the tag name.
• Auto Rename Tag: Renames the tag when you type a space after the tag name.
• Icon Fonts: Snippets for popular icon fonts.

CSS

• Colorize CSS: Help visualize css colors in files.
• CSS Peak: Quickly view the CSS properties of the current element.

AWS

• AWS Toolkit: A collection of AWS tools for Visual Studio Code.
• AWS Actions: Provides AWS actions in the editor.
• AWS CLI Configure: Quickly access the AWS CLI config & credentials files.

Other

• Docker: Makes it easy to create, manage, and debug containerized applications.
• Remote - Containers: Open any folder or repository inside a Docker container.
• Kubernetes: Develop, deploy and debug Kubernetes applications.
• json: Json for Visual Studio Code.
• XML Tools: XML Formatting, XQuery, and XPath Tools for Visual Studio Code.
• YAML: YAML Language Support by Red Hat, with built-in Kubernetes syntax support.

Markdown

For writing blogs like this one. VSCode has pretty good out-of-the-box support for Markdown, but there are a few useful extensions.

• Markdown All in One: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).
• markdownlint: Markdown linting and style checking for Visual Studio Code. Be sure to fine tune these rules to your liking.

Next Steps

• Install tooling for your favorite language/tool - syntax highlighting, intellisense linting, formatting, etc.
• Get familiar with the command pallet ctrl-shift-p. You can search for pretty much anything you want to do, extensions included.
• Learn and configure your keyboard shorcuts. Anything from the command pallet can be configured as a keyboard shortcut, and you can set contextual shortcuts for specific languages, etc.
• VSCode has a built-in snippet manager, but you can download additional snippets for specific languages/tools.
• Configure your editor settings. You can see what I'm current using here. Some notable configuration:
  • Set a ruler so your lines of code don't get too long:

  "editor.rulers": [80],
  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#491f1f"
  },

• Make your cursor smooth:

  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": true,

• Install a custom font. I use Caskaydia Cove Nerd Font. Turn on ligatures "editor.fontLigatures": true, for multi-character symbols.
• Turn on file nesting to group together similar files:

  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.js",
    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
    "*.jsx": "${capture}.js",
    "*.tsx": "${capture}.ts",
    "tsconfig.json": "tsconfig.*.json",
    "package.json": "package-lock.json, yarn.lock",
    "README.md": "LICENSE.txt",
    ".eslintrc.*": ".eslintignore, .prettierrc.*, .eslintrc-auto-import.json"
  },
  "explorer.fileNesting.expand": false

• Format and organize imports on save:

  "editor.formatOnSaveMode": "modifications",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },

• Auto fetch from version control:

  "git.autofetch": true,

Feel free to comment with any extensions or tips I have missed and I'll add them to the list!