Visual Studio Code has a huge list of extensions, a lot of which are for scripting languages. Some of these use IntelliSense to give you hints on what to write while others focus on debugging.
Testing is also a big part of most web developer’s job and some extensions let you run your tests directly from within the editor. Below is an extensive list of all the available extensions for JavaScript in Visual Studio Code, from syntax highlighting to debugging tools.
Babel JavaScript
Download it here:Babel JavaScriptEdit descriptionmarketplace.visualstudio.com
npm
When working with JavaScript in vs code, we are all aware that using node has always been part on every project we create, and so we need a little help in making sure that the packages are installed properly, npm extension helps out whenever there are issues with the package missing mismatched versions, the npm extension will notify you via a clickable option to fix the certain issue.
React Native Tools
Vetur
Download it here:VeturGet it now.marketplace.visualstudio.com
Paste as JSON
This extension helps you to quickly convert your JSON data into JavaScript codes, without the stress of properly formatting and white spaces, it has a very simple task but makes everything light and fast.
JavaScript (ES6 Code Snippets)
Snippet extensions are one of the most popular categories of extensions, and this one follows suit. It includes snippets for modern ES6 JavaScript, which is what you should be writing (or learning if you haven’t already). Although this snippet is not specific to any framework, these snippets can be triggered from severl different file types.
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)better.devGet Started w/ JavaScript for free!
- Html (.html)
- Vue (.vue)
Here are a couple of my favorites that you should try out!
- imp – import a module
- imd – import a named export
- fre – generate for each loop through array
- anfn – generate anonymous function
- thenc – add then and catch declaration to a promise
There are many others, so go give them a try!
Quokka
Have you ever wanted to test out a function or play around with some JavaScript code? Sometimes you can test right in the Chrome Dev Tools console, sometimes you’ll open up a CodePen. With Quokka.js, you can create a scratchpad right inside VS Code!
Test out your JavaScript quickly and easily with Quokka.js.
Prettier
An opinionated code formatter that can format your JavaScript code automatically. By having Prettier installed, you never have to worry about formatting; just let the computer take care of it!
It can be a little hard to get used to having your formatting handled for you as I’m sure a lot of devs have their own style that they like. Having Prettier on a team ensures that everyone follows the same style of coding.
Snippets
Snippets in its simplest definition are about reusing codes and saving time.
JavaScript ES6 Code Snippets
This extension includes snippets for JavaScript ES6 syntax, this code snippet is perfect for JavaScript and TypeScript.
Download it here:JavaScript (ES6) code snippetsEdit descriptionmarketplace.visualstudio.com
Angular Snippets
ES7 React/Redux/GraphQL/React-Native Snippets
jQuery Code Snippets
Download it here:jQuery Code SnippetsEdit descriptionmarketplace.visualstudio.com
Linters
ESLint
ESLint is a smart static code that can find out any problematic patterns, you can even make your own set of rules to check and reuse logic. ESLint is one of the tools that will ensure that the developers will have a good quality code format.
Download it here:ESLint — Visual Studio MarketplaceExtension for Visual Studio Code — Integrates ESLint JavaScript into VS Code.marketplace.visualstudio.com
JSHint
Download it here:jshintIntegrates JSHint into VS Code. The extension looks for a jshint module in the current directory and in the global…marketplace.visualstudio.com
IntelliSense
IntelliSense can show the developers intelligent code completion, you can also see information on a certain function, variables, properties by hover, where it helps you code more quickly and efficiently.
npm Intellisense
Live Server
This tool will be responsible to help automatically reload the web page whenever there are changes in your code on the IDE, without you reloading your web page over and over, it saves a lot of time, to use this you can just click the Open with Live Server, and as you can see it has been download 5M times.
Productivity tools for JavaScript Developers
Color Highlight
Todo Tree
Settings Sync
REST Client
Download it here:REST ClientEdit descriptionmarketplace.visualstudio.com
Indent Rainbow
VSCode-Spotify
Download it here:vscode-spotifyUse Spotify inside vscode. Provides integration with Spotify Desktop client. Note that some of functionality only…
Syntax Highlighting Extension
The latest Visual Studio Code now is more in line with Atom grammar standards for better colorization syntax support. Extensions like JS Atom Grammar are not needed anymore.
Nonetheless, there are still some syntax highlighting and file extensions useful to certain projects. A few of them are:
- DotENV. With more than 833,000 installs as of date, DotENV provides support for environments setting syntax highlighting.
- The Bracket Pair Colorizer 2. With over 730,000 installs, it highlights colors matching brackets to help in identifying the block the bracket belongs to.
- Babel JavaScript. With more than 550,000 installs, Babel JavaScript provides a syntax highlighting for ES201, FlowType, JS, and GraphQL code.
The Node Package Management Extensions
Every JavaScript project must be on an npm package. Some VS Code extensions help work to easily manage npm packages include:
- NPM by Egamma: With more than 2.3 million installs, it uses package.json for validating installed packages and provides clickable options if anything goes missing or if there are mismatched versions to fix. You could run npm scripts defined in the package.json inside the editor.
- Path Intellisense extension: With more than 2.7 million installs, it autocompletes filenames and works within CSS and HTML files.
- NpmIntelliSense. With more than 1.9 million installs, NpmIntelliSense provides autocompleting npm modules in import statements.
- Vide Node package: With over 55,000 installs, Vide Node package, enables viewing a Node package source as well as documentation quickly while working with code.
- Node Readme extension: With over 52,000 installs, it allows opening npm package documentation directly in the Visual Studio Code editor as another tab.
- Node exec extension: With more than 168,000 installs, it allows present file execution or the code chosen with Node.js by pressing F8. Also, you could abort a running process by pressing F9.
- Import Cost. With more than 562,000, Import Cost displays the amount of disk space a package will use upon import.
- Search node_modules. With more than 470,000 installs, the folder, by default, is excluded from the built-in search of VS Code. It allows navigating and opening files in node_modules fast via the folder tree.
The Formatting Extensions
Sometimes, we write code that does not align with the rest of the code. You have to go back to fix the indentation in every line and ensure that tags and braces are formatted correctly in a readable format. The process could get tedious. Instead, use extensions to help speed up the process. Keep in mind that Beautify and Prettier extensions cannot be simultaneously active.
- Beautify. Beautify is an extension of jsBeauitifier and supports JSON, JavaScript, HTML, and CSS. Customization could be done via a .jsbeautifyrc file. To date, it has 4.4 million installs – the second most popular formatter at present.
- JS Refactor extension. It utilizes refactor for JS code, such as extracting variables/methods, converting existing code to use template literals or arrow functions, and exporting functions. To date, it has more than 140,000 installs.
- Prettier Code Formatter. The most popular extension supporting JavaScript, formatting, and CSS and TypeScript. It’s recommended installing it as a dev dependency locally. It has more than 5.7 million installs.
- JavaScript Booster extension. Its features include several coding actions, like converting var to const or let, merging initialization and declaration, and removing redundant else statements. It has more than 74,000 installs.
Framework Extensions
For most of the major frameworks, VS Code provides support via extensions. There are, however, several established frameworks that have no complete development extension yet. Some of the VS Code extensions that provide considerable functionality are the following:
- Angular 8 Snippets. Angular 8 Snippets has snippets for Angular version 2 to 7, as well as 8 Beta. It supports HTML, TypeScript, PWA, Flex Layout, and Angular Material ngRx. It has 242 Angular snippets and more than 1.35 million installs.
- Angular Snippets version 9. With more than 1.7 million installs, it’s the most popular snippet extension for AngularJS developers. It has snippets for RxJS, TypeScript, Docker files and HTML.
- React Native tools. React Native tools provides IntelliSense, debugging and command features for projects of React Native. To date, it has more than 1.2 million installs.
- React-Native/Redux/React snippets. It has ES6/ES7 React syntax snippets, storybook in ES6/ES7, Redux, and React Native with over 371,000 installs.
- Vetur extension. Vetur extension provides syntax highlighting, Emmet, linting, snippets, IntelliSense, formatting, and debugging support for Vue. It has the documentation published on GitBook, with more than four million installs.
- ES7 React/GraphQL/React-Native/Redux snippets. It has snippets for JS and TypeScript, Redux, Graphql, and React with an ES7 syntax. The extension has more than one million installs.
- The Cordova Tools. The Cordova tools have support for Cordova plugins and framework. It provides IntelliSense, debugging, as well as other Cordova-based projects features. To date, it has more than 272,000 installs.
- Ember. With more than 18,000 installs, Ember has common support and IntelliSense for Ember. All ember cli commands are available via the own command list of the VS Code after installation.
- jQuery Code Snippets. It has jQuery code snippets of over 130,000. With more than 700,000 installs, it is activated by the prefix jq.
Conclusion
The JavaScript ecosystem is growing so rapidly, more new technologies are being adopted into modern web development. One of the most popular IDE for front-end coding is Visual Studio Code. VSCode has several extensions that help us write code faster.