Visual Studio Code (VS Code) is undoubtedly the most popular, lightweight code editor today. It does borrow heavily from other popular code editors, mostly Sublime Text and Atom. However, its success mainly comes from its ability to provide better performance and stability. In addition, it also provides much-needed features like IntelliSense, which were only available in full-sized IDEs like Eclipse or Visual Studio 2017.
The power of VS Code no doubt comes from the marketplace. Thanks to the wonderful open-source community, the editor is now capable of supporting almost every programming language, framework and development technology. Support for a library or framework comes in various ways, which mainly includes snippets, syntax highlighting, Emmet and IntelliSense features for that specific technology.
VS Code Extensions by Category
Syntax Highlighting Extensions
However, we still have a few syntax highlighting extensions that are quite useful when it comes to certain types of projects and file extensions. Here’s a few:
DotENV, by 833,737. With over 833k installs to date, this extension supports syntax highlighting for environment settings — that is,
Bracket Pair Colorizer 2, by CoenraadS. With 730k+ installs, this extension highlights matching brackets with different colors, helping you identify which bracket belongs to which block.
Have you have ever gotten into a debate with your teammates over tabs vs spaces or semicolons vs no semicolons? You’ll realize that people have strong opinions about which coding style to use. Nevertheless, everyone on the same team needs to use the same coding style regardless of their opinion.
Here are the extensions we have available:
ESLint, by Dirk Baeumer. With over 8 million installs, this is the most popular extension providing support for the ESLint library. In order for the extension to work, your project will need ESLint packages and plugins installed. You’ll also need to specify an
.eslintrc, which will specify the rules the extension will use to lint your code .
JSHint, by Dirk Baeumer. With 1.2M+ installs, this extension supports linting with the JSHint library. A
.jshintrcconfiguration file is required for the extension to lint your code.
semiStandardas a dev dependency in your project. No configuration file is required. You’ll need to disable VS Code’s built-in validator for this extension to work.
JSLint, by Andrew Hyndman. This extension provides linting with the JSLint library. You’ll need to install
jslintlocally or globally for the extension to work. It has 109k+ installs to date.
Node Package Management Extensions
- npm, by egamma. With over 2.3M+ installs, this extension uses
package.jsonto validate installed packages. If anything is missing or versions are mismatched, the extension will provide you with clickable options to fix the issue. In addition, you can also run npm scripts defined in
package.jsonright inside the editor.
–npm IntelliSense, by Christian Kohler. With 1.9M+ installs, this extension provides autocompleting npm modules in import statements.
Path IntelliSense, by Christian Kohler. With 2.7M+ installs, this extension autocompletes filenames. It also works inside HTML and CSS files.
Node exec, by Miramac. With 168k+ installs, this extension allows you to execute the current file or your selected code with Node.js by pressing F8 on your keyboard. You can also cancel a running process by pressing F9.
View Node Package by Dominik Kundel. With 55k+ installs, this extension allows you to quickly view a Node package source and documentation while you’re working with your code.
Node Readme, by bengreenier. With 52k+ installs, this extension allows you to quickly open an npm package documentation right inside the VS Code editor as a separate tab.
Search node_modules, by Jason Nutter. By default, the
node_modulesfolder is excluded from VS Code’s built-in search. With over 470k installs, this extension allows you to quickly navigate and open files in
node_modulesby traversing the folder tree.
- Import Cost by Wix. This displays how much disk space a package is using when you import it. The extension has 562K+ installs.
More often than not, we sometimes write code that’s out of alignment with the rest of the code. To fix this, we need to go back and fix the indentation in each line. In addition, we need to ensure braces and tags are properly formatted in a readable format. This process can quickly get tedious.
Luckily, we have extensions that can do the work for us. Please note extensions such as
Beautify can’t both be active simultaneously.
prettierlocally as a dev dependency.
.jsbeautifyrcfile. It’s now the second most popular formatter, with 4.4 million installs to date.
let, removing redundant
elsestatements, and merging declaration and initialization. Largely inspired by WebStorm, it has 74k+ installs to date.