Abstract: A good code plug-in can double the work efficiency, and feel more comfortable!

  • 10 must-have VS Code Extensions for JavaScript Developers
  • By Michael Wanyoike
  • Translator: Fundebug

Visual Studio Code is without a doubt the most prolific lightweight Code editor out there. It does absorb a lot of concepts from other code editors, especially Sublime Text and Atom. However, its popularity is mainly due to its better performance and stability. In addition, it provides the most desired features that can only be found in large, complex ides like Eclipse or Visual Studio 2017, such as IntelliSense.

VS Code is also powerful because of its plug-in market. Thanks to its open source community, VS Code supports almost every programming language, framework, and development technology. There are a variety of support schemes, including snippets, syntax highlighting, Emmet, and IntelliSense capabilities.

In this article, I focus on plugins that JavaScript developers often use. Currently, there are so many VS Code plug-ins for JavaScript that I can’t cover them all. Therefore, I will highlight the most popular must-have plug-ins. To make this article more organized, I have sorted them into different categories.

A Snippet plug-in

When you first install VS Code, it provides basic JavaScript/TypeScript snippet support. When you’re doing more cutting-edge development, you’ll need some extra snippet plug-ins to help you write ES6/ES7 code.

  • VS Code JavaScript(ES6) Snippets: It is the most popular today, with over 1.2 million plug-ins installed. The plugin provides ES6 syntax support for JavaScript, TypeScript, HTML, React, and Vue.

  • JavaScript Snippet Pack: A collection of JavaScript snippets.

  • Atom JavaScript Snippets: Snippets of JavaScript code ported from Atom.

  • JavaScript Snippets: ES6 Snippets, and contains Snippets of Mocha, Jasmine, and other BDD testing frameworks.

Grammar plug-in

VS Code’s native syntax highlighting for JavaScript is already pretty good. You can install different themes to change the color of the code. However, if you want more readability, you can install the code highlighting plugin. Here are some recommendations:

  • JavaScript Atom Grammar: This plug-in replaces Visual Studio Code’s native JavaScript syntax with the version of the Atom editor.

  • Babel JavaScript: Supports syntax highlighting for ES201x JavaScript, React, FlowType, and GraphQL code.

  • DotENV: If you use Node, you need it. DotEnv provides syntax highlighting for. Env files.

Code style checking plug-in

To ensure consistent code formatting across the team, use a code style checker. ESLint is one of the most popular tools because it supports a wide range of code styles, including standard, Google, and Airbnb. Here are some recommended plug-ins:

  • ESLint: This is the most popular code style checking plugin, with over 6.7 million installs. You can do this in.eslintrc.json.

  • JSHint: JSHint code style checker plug-in. Under the root directory of the project, configure with.jshintrcfile.

  • JavaScript Standard Style: a no-configuration code Style checking plug-in with very strict rules. It forces all your code to follow standard rules.

  • JSLint: code style checking plugin for JSLint.

If you want to learn about the pros and cons of each plugin, check out this blog’s JavaScript Code Style check plugin Review.

The Node plug-in

Each JavaScript project requires at least one Node package to be installed. Here are some recommended plugins for Node:

  • NPM: Use package.json to verify installed modules, make sure the version number of installed modules is correct, mark packages that are installed but not listed in package.json, and those that are not installed yet.

  • Node.js Modules IntelliSense: Automatically complete import statements for JavaScript and TypeScript Modules.

  • Path IntelliSense: Although not really Node related, this plugin can automatically complete file names and intelligently prompt local files when typing.

  • Node exec: Executes the current Node file or part of the selected code.

  • View Node Package: Use this plug-in to quickly View the source code of a Node Package.

  • Node Readme: Quickly open the NPM package document.

  • Search node_modules: Search for the code in node_modules. Standard searches do not include this folder.

  • Import Cost: Displays the size of the imported package

Code formatting plug-in

You may find that sometimes, after copying and pasting a piece of code, the indent format changes and needs to be adjusted line by line. At this point, you’ll want a code formatter.

  • Beautify: More than 2.3 million installs. Beautify is a jsBeautifier plug-in that supports one-click formatting of JavaScript, JSON, CSS, and HTML.

  • Prettier Code Formatter: 1.5 million installed, supports JavaScript, TypeScript, and CSS formatting, uses Prettier, a favorite formatting plug-in.

  • JS Refactor: Provides a number of methods for refactoring JavaScript code, such as extracting variables and methods from code, converting functions to use arrow functions or template literals, and exporting functions.

  • JavaScript Booster: A great refactoring tool, such as replacing var with const or let, removing useless else statements, and merging variable declarations and variable initializations. I should say very much inspired by Webstorm.

Browser plug-in

Unless you write JavaScript code directly in the console, most of the time you do it in the browser. That is, every time the code is updated, you need to refresh the page to rewrite the loading code. If you do it manually all the time, it’s tedious. We can use plug-ins instead.

  • Debugger for Chrome: You just need to set a breakpoint in the code editor and it will pause at the breakpoint in the browser.

  • Live Server: Real-time reload of pages in a local development environment.

  • Preview on Web Server: Provides Web Server and live Preview.

  • PHP Server: Useful for testing just by running JavaScript code on the client.

  • Rest Client: You don’t need a browser or a CURL program to test the Rest API. The Rest Client allows you to interactively run HTTP requests within the editor.

Framework plug-ins

For most projects, in order to save development time, you tend to use a suitable development framework to develop quickly. On VS Code, most frameworks have plug-in support. But there are still many frameworks that don’t have plug-ins.

  • Angular 6: Over 2.2 million installs, supports TypeScript, HTML, Angular Material ngRx, RxJS, and Flex Layout. And there are 172 Angular snippets.

  • Angular V5 Snippets: Over 2.7 million installs, providing snippets of TypeScript, RxJS, HTML, and Docker files.

  • React Native/React/Redux Snippets for ES6/ES7: Code snippets that provide ES6/ES7 syntax for these frameworks.

  • React Native Tools: Provides intelligent prompts, command line Tools, and Debugging functions.

  • Vetur: Syntax highlighting, snippets, Emmet, formatting, code style checking, smart tips, debugging help, and more for the Vue framework. Very well documented: vetur.

  • Ember: Provides command tools and smart tips for Ember. Once installed, all ember CLI commands are available.

  • Cordova Tools: Supports the Cordova plug-in and Ionic framework. Provides code intelligence tips, debugging AIDS, and other features.

  • JQuery Code Snippets: Provides over 130 jQuery Code Snippets.

To test the plug-in

Testing is an essential part of software development, especially when it comes to moving into production. You can check out our article on JavaScript Testing: Unit vs Functional vs Integration Tests. Here are some popular test plug-ins:

  • Mocha sidebar: Use the Mocha library to provide testing support. Using this plug-in, you can run tests directly in your code and prompt for errors.

  • ES6 Mocha Snippets: Mocha Snippets that provide ES6 syntax. Take full advantage of the arrow function and keep your code concise by avoiding curly braces, configurable to allow semicolons.

  • Jasmine Code Snippets: Code Snippets for the Jasmine test framework.

  • Protractor Snippets: End-to-end test Snippets of the Protractor framework with support for JavaScript and Typescript.

  • Node TDD: Test-driven development support for Node and JavaScript projects. Automatically trigger code tests when the code is updated.

Other cool plugins

I put them in the awesome category because they’re really cool.

  • Quokka.js: a great debugging tool that gives you real-time feedback on the code you’re writing, the ability to preview the functions of variables and the results of computed values. Please see documentation: Documentation

  • Paste as JSON: Quickly converts JSON data into JavaScript code.

  • Code Metrics: A plugin that calculates the complexity of JavaScript and TypeScript Code.

The plug-in package

VS Code’s plugin market has a category called plugin packs. It is actually a collection of interrelated plug-ins that can be easily installed and used together.

  • Nodejs Extension Pack: Includes ESLint, NPM, JavaScript(ES6) snippets, node_modules search, NPM smart tips, and file path smart tips.

  • VS Code for Node.js — Development Pack: NPM smart tips, ESLint, Chrome debugger, Code Metrics, Docker and overhead calculations for imported packages.

  • Vue.js Extension Pack: Contains about 12 VS Code plug-ins, some not mentioned in this article, such as auto-rename-tag and auto-close-tag.

  • Ionic Extesion Pack: Contains many plug-ins for Ionic, Angular, RxJS, Cordova, and HTML development.

conclusion

One of the reasons VS Code has become so popular is the large number of high-quality plug-ins available. It improves coding efficiency like never before. For example, ESLint helps you reduce code errors, and Debugger for Chrome makes Debugging easier. Node.js’s smart lead-in prompts allow you to import the modules you need correctly, and Live Server and REST Client can save you the trouble of frequently switching to external tools. I hope today’s plugins will help you be more productive.

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its official launch on November 11, 2016, Fundebug has handled more than 900 million error events in total, which has been recognized by many well-known users such as Google, 360, Kingsoft, and People’s Net. Welcome free trial!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2018/11/20/…