Visual Studio 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.
This article was updated in March 2019 to reflect the current state of the VS Code extensions ecosystem.
VS Code Extensions by Category
Syntax Highlighting Extensions
However, we still have a few syntax highlighting extensions that are useful when it comes to certain projects. Here are a couple:
- DotENV: syntax highlighting for
.envfiles. Handy if you’re working with Node.
If 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 needs to use the same coding style in a particular project.
However, it’s quite common for programmers to forget which coding styling they should be using. To enforce the rules, we need to declare standards. You can create your own or just use one of the popular coding style standards such as Standard, Google, or Airbnb. You are free to customize them if there is a specific rule you don’t like.
To ensure your code meets your coding style standard, you will need a linter. Here are the most popular linter extensions for Visual Studio Code:
- ESLint: You’ll need to install the ESLint library either locally or globally in order to use this extension. You will also need to create the
.eslintrcconfiguration file to configure your rules and a number of settings.
- JSHint: You’ll need to install the JSHint library either locally or globally in order to use this extension. Use
.jshintrcfile to configure your lint rules and settings.
- JSLint: a linter extension for JSLint.
- npm: uses
package.jsonto validate installed packages. Ensures that the installed packages have the correct version numbers, highlights installed packages missing from
package.json, and packages that haven’t been installed.
- npm Intellisense: Autocompletes npm modules in import statements.
- Path IntelliSense: autocompletes filenames. It works in HTML and CSS as well.
- Node exec: allows you to execute the current file or your selected code with Node.js.
- View Node Package: quickly view a Node package’s source with this extension, which allows you to open a Node package repository/documentation straight from VS Code.
- Node Readme: quickly open npm package documentation.
- Search node_modules: this extension allows you to search the
node_modulesfolder, which is usually excluded from standard search.
- Import Cost: displays the size of an imported package inside the editor.
We sometimes write code that is out of the alignment with the rest of our 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:
.jsbeautifyrcfile. Most popular formatter with 2.3 million installs to date.
let, removing redundant
elsestatements, and merging declaration and initialization. Largely inspired by WebStorm.
- Live Server: local development server with live reload feature for static and dynamic pages.
- Preview on Web Server: provides web server and live preview features.
- Rest Client: instead of using a browser or a CURL program to test your REST API endpoints, you can install this tool to interactively run HTTP requests right inside the editor.
For most projects, you’ll need a suitable framework to structure your code and cut down your development time. VS Code has support for most major frameworks through extensions. However, there are still a number of established frameworks that don’t have a fully developed extension yet. Here are some of the VS Code extensions that offer significant functionality.
- Angular 7 Snippets: snippets for Angular 2, 4, 5, 6,7 and 8 Beta. Supports Typescript, HTML, Angular Material ngRx, RxJS, PWA & Flex Layout. Contains 237 Angular snippets to date.
- Angular v7 snippets: provides Angular snippets for TypeScript, RxJS, HTML and Docker files.
- React Native Tools: provides IntelliSense, commands and debugging features for React Native projects.
- React-Native/React/Redux snippets for es6/es7: provides snippets in ES6/ES7 syntax for React, React Native, Redux and storybook in ES6/ES7 syntax.
- Vetur: provides syntax highlighting, snippets, Emmet, linting, formatting, IntelliSense and debugging support for the Vue framework. It comes with proper documentation published on GitBook.
- Ember: provides command support and IntelliSense for Ember. After installation, all
ember clicommands are available through Code’s own command list.
- Cordova Tools: support for Cordova plugins and the Ionic framework. Provides IntelliSense, debugging and other support features for Cordova-based projects.
- jQuery Code Snippets: provides over 130 jQuery code snippets. Activated by the prefix
- Mocha sidebar: provides support for testing using the Mocha library. This extension helps you run tests directly on the code and shows errors as decorators.
- ES6 Mocha Snippets: Mocha snippets in ES6 syntax. The focus of this extension is to keep the code dry, leveraging arrow functions and omitting curlies wherever possible. Can be configured to allow semicolons.
- Jasmine Code Snippets: code snippets for the Jasmine test framework.
I’m just putting this next bunch of VS Code extensions into the “awesome” category, because that best describes them!
Now that we’ve come to our final category, I would like to let you know that the VS Code marketplace has a category for extension packs. Essentially, these are collections of related VS Code extensions bundled into one package for easy installation. Here are some of the better ones:
- VS Code for Node.js – Development Pack: this one has NPM IntelliSense, ESLint, Debugger for Chrome, Code Metrics, Docker and Import Cost.
- Ionic Extension Pack: this pack contains a number of VS Code extensions for Ionic, Angular, RxJS, Cordova and HTML development.
I hope this list has been introduced you to new VS Code extensions that can help you in your workflow.