Note: It can take a few minutes to install the extension pack.
Code Completion and Snippets
The ES7 snippets extension provides many expandable everyday snippets. For example, defining imports and exports, creating methods and loops, and returning Promises. The extension also contains many snippets for React and GraphQL.
When writing tests or creating mockups, it often takes time to come up with good fake data. You can use the vscode-random extension to generate many kinds of random data, such as numbers, locations, emails, IPs, names, and datetime values.
Linting, Spell Checking, and Hints
It is easy for typo and small spelling errors to slip into variable and function names, strings, comments, etc. The Code Spell Checker extension highlights those mistakes and can often provide the correct spelling as a fix.
The Error Lens extension highlights and displays errors, warnings, and information messages directly in the editor. With it, you don't need to take the extra step of finding out what the squiggly underlines mean - it is right in front of you. If the information gets overwhelming, you can easily toggle it on and off for different message types with the
Formatting, Code Actions, and Refactoring
The Change Case extension adds a wide range of commands to change the case of the selected text, e.g., into camel case, snake case, Pascal case, etc. The commands all have the
Editor Support for Additional File Types
The npm extension validates the installed Node.js modules defined in
The SVG Preview extension does exactly that: show a preview for
TOML is a configuration file format that aims to be simple and easily readable. The Even Better TOML extension adds full editor support, including syntax highlighting, folding, navigation, and formatting.
Organizing Comments, TODOs, and Bookmarks
The Better Comments extension shows different kinds of comments in different colors. It supports prefixes like
TODOs and FIXMEs easily get forgotten about and lost. The Todo Tree extension scans the files in your workspace for TODO and FIXME annotations and organizes them in a sidebar view. You can easily browse them by folder and revisit essential items that come to your attention.
With the Bookmarks extension, you can save and label important source code locations and organize them in a sidebar panel. This can be helpful when you are exploring a complex codebase or when you have locations that you return to frequently.
The Test Explorer is a set of extensions that integrate testing seamlessly into VS Code. Its Test Explorer UI extension adds a side panel for running the tests and seeing the results, and the Test Explorer Status Bar adds the number of tests to the status bar.
Visual Studio Code has added native testing capabilities in version 1.59. You can enable them in the Test Explorer by setting
The GitLens extension adds several panels to the source control sidebar and enhances the editor with information overlays. The sidebar panels help you manage branches, stashes, commits, file history, remotes, and the editor extensions include a blame view, change indications, an authorship code lens, and more. GitLens is an essential extension that makes working with Git in VS Code much easier.
The Git Graph extension shows the Git history visually in an editor panel. You can open it with the "View Git Graph" command. In the graph view, you can explore individual commits and perform many everyday Git operations. For example, you can check out branches and commits, create branches, cherry-pick commits, perform merges, etc.
Database, REST API & Docker Clients
The Database Client extension lets you connect to MySQL/MariaDB, PostgreSQL, SQLite, Redis, and ElasticSearch. You can explore databases in its sidebar panel, open database tables as editor panels, and run custom SQL queries. The database table content is editable. Any changes that you make are immediately stored in the database.
The Thunder Client extension integrates a client for REST APIs into VS Code.
It is a lightweight alternative to Postman.
You can send any kind of
Working with containers has become an essential part of day-to-day development for many software engineers. With the Docker extension, you can explore your running Docker containers, get editor support for Docker files, and more.
You can take beautiful screenshots of your code in no time with the CodeSnap extension.
Start with the