VS code: The extensions JavaScript developers need to have

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 this article, I’ll focus on a list of must-have VS Code extensions for JavaScript developers.

VS Code: Snippet Extensions

Here are some of the most popular snippet extensions for JavaScript developers.

  • JavaScript (ES6) code snippets, by Charalampos Karypidis. This is currently the most popular javaScript snippet extension with over 3+ million installs to date. This extension provides ES6 syntax for JavaScript, TypeScript, HTML, React and Vue. All snippets include a final semicolon.
  • JavaScript (ES6) code snippets in StandardJS style, by James Vickery. This is basically a fork of the above extension for those who prefer StandardJS style convention—that is, the snippets don’t have semicolons.
  • JavaScript standardjs styled snippets, by capaj. Another StandardJS Styled snippets but this one is more popular with over 72k installs. Originally forked from Atom StandardJS snippets. Contains a huge collection of handy snippets and supports JavaScript, TypeScript and React.
  • JavaScript Snippets, by Nathan Chapman. A collection of JavaScript snippets with about 33k+ installs to date. This snippet extension supports Node.js, BDD Testing frameworks such as Mocha and Jasmine.
  • Atom JavaScript Snippet, by Saran Tanpituckpong. With about 26k+ installs to date, the snippets in this extension were ported from atom/language-javascript. JavaScript snippets ported from the atom/language-javascript extension.

Formatting Extensions

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 below that can do the work for us.

  • Prettier Code Formatter, by Esben Petersen. This is the most popular extension that supports formatting of JavaScript, TypeScript and CSS using Prettier. It has over 5.7 million installs to date. It’s recommended you install prettier locally as a dev dependency.
  • Beautify, by HookyQR. A jsBeautifier extension that supports JavaScript, JSON, CSS and HTML. It can be customized via a .jsbeautifyrc file. It’s now the second most popular formatter, with 4.4 million installs to date.
  • JS Refactor, by Chris Stead. This provides a number of utilities and actions for refactoring JavaScript code, such as extracting variables/methods, converting existing code to use arrow functions or template literals, and exporting functions. It has 140k+ installs to date.
  • JavaScript Booster, by Stephan Burguchev. This is an amazing code refactoring tool. It features several coding actions such as converting var to const or let, removing redundant else statements, and merging declaration and initialization. Largely inspired by WebStorm, it has 74k+ installs to date.
Vs code
Source: vscode-javascript-booster

Framework Extensions

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. But 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 Snippets (Version 9), by John Papa. With over 1.7+ million installs, this is the most popular snippet extension for Angular developers. It provides Angular snippets for TypeScript, RxJS, HTML and Docker files. At the time of writing, the extension has been updated to support Angular 9.
  • Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS and Flex Layout, by Mikael Morlund. This has snippets for Angular 2, 4, 5, 6,7 and 8 Beta. It supports Typescript, HTML, Angular Material ngRx, RxJS, PWA and Flex Layout. It contains 242 Angular snippets to date, and currently has over 1.35M+ installs.
  • ES7 React/Redux/GraphQL/React-Native snippets, by dsznajder. With over 1.2M installs to date, this extension provides JavaScript and TypeScript snippets for React, Redux and Graphql with ES7 syntax.
  • React Native Tools, by Microsoft. This provides IntelliSense, commands and debugging features for React Native projects. It has over 1.2 million installs to date.
  • React-Native/React/Redux snippets for es6/es7, by EQuimper. This provides snippets in ES6/ES7 syntax for React, React Native, Redux and storybook in ES6/ES7 syntax. It has 371k+ install to date.
  • Ember, by Felix Rieseberg. This provides command support and IntelliSense for Ember. After installation, all ember cli commands are available through VS Code’s own command list. It has 18k+ installs to date.
  • Cordova Tools, by Microsoft. This offers support for Cordova plugins and the Ionic framework, and also provides IntelliSense, debugging and other support features for Cordova-based projects. It has 272k+ installs to date.

Testing Extensions

Testing is a critical part of software development, especially for projects that are in production phase. Here are some popular VS Code extensions for testing.

  • Mocha sidebar, by maty. This provides support for testing using the Mocha library. This extension helps you run tests directly on the code and shows errors as decorators. It has 68k+ installs to date. Do note that this extension has a number of unresolved issues at the time of writing.
  • ES6 Mocha Snippets, by Cory Noonan. This provides Mocha snippets in ES6 syntax. The focus of this extension is to keep the code dry, leveraging arrow functions and omitting curlies by where possible. It can be configured to allow semicolons, and has 36k+ installs to date.
  • Jasmine Code Snippets, by Charalampos Karypidis. This offers code snippets for the Jasmine test framework. It has 30k+ installs to date. Unfortunately, this extension hasn’t been updated in the last three years at the time of writing.
  • Protractor Snippets, by Budi Irawan. This provides end-to-end testing snippets for the Protractor framework. It supports both JavaScript and Typescript, and has 18k+ installs to date.
  • Node TDD, by Prashant Tiwari. This provides support for test-driven development for Node and JavaScript projects. It can trigger an automatic test build whenever sources are updated. It has 23k+ installs to date.
VS code
Source: node-tdd

Browser Extensions

Unless you’re writing a console program in JavaScript, you’ll most likely be executing your JavaScript code inside a browser. Here are a few tools that can significantly reduce the development time of your iteration process:

  • Debugger for Chrome, by Microsoft. With over 5.2+ million installs, this extension allows you to debug your JavaScript code in Chrome, or any other target that supports the Chrome Debugger Protocol. If you’re new to this extension and debugging in VS Code, do check out our VS Code and Chrome debugging tutorial.
Debugger for Chrome Demo
  • Live Server, by Ritwick Dey. This extension allows you to launch a local development server with a live reload feature for static and dynamic pages. It has 4.6M+ install to date.
Live server demo
Source: vscode-chrome-debugvscode-live-server
  • Preview on Web Server, by YuichiNukiyama. This provides web server and live preview of HTML. The features can be called from a context menu or editor menu. It has 120k+ installs to date.
  • PHP Server, by brapifra. Built for PHP projects, it’s still useful for testing JavaScript code that needs to run client-side only. It has 234k+ installs to date.
  • Rest Client, by Huachao Mao. 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. It has 834k+ installs to date.

VS Code Summary

VS Code’s huge number of quality extensions makes it a popular choice for JavaScript developers. It’s never been easier to write JavaScript code this efficiently. All of these tools make your iteration process far much easier.

Hope this list VS Code extensions that can help you in your workflow.

Want to work with web and mobile app development company?

If you’re considering web development services, you can explore more about us – ArrowHiTech. Above all, we are proud to be one of the most well-established outsourcing companies all around the world. In addition, with over 12 years of experience, we can provide the best software development services for your business.

So, you can check us out now: ArrowHiTech services. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.

ArrowHiTech services

So, if you have any questions, don’t hesitate to contact us via:

  • Email: support@arrowhitech.com
  • Phone number: +84 243 7955 813.