This article translated from: https://www.sitepoint.com/vs-code-extensions-javascript-developers/

The official website of Grape City, grape city for developers to provide professional development tools, solutions and services, enabling developers.

Today, Visual Studio Code is easily the most popular lightweight Code editor. It does borrow a lot from other code editors, most notably from Sublime and Atom. However, the key to its success is to provide better performance and consistent performance. In addition, it provides much-needed features such as code intelligence tips. These features were once only available in full integrated development environments (IDEs) like Eclipse or Visual Studio 2017.

VS Code’s power undoubtedly comes from its plug-in market. Thanks to the open source community, VS Code now has support for almost every programming language, framework, and development technology. This support can be provided in a variety of ways, including code snippets, syntax highlighting, Emmet, and smart hints for specific technologies.

Types of VS Code plug-ins

In this article, I’ll focus on VS Code plug-ins for JavaScript developers. There are a number of VS Code plug-ins that meet this requirement, but I won’t cover all of them. Instead, I’ll focus on VS Code plug-ins that have become quite popular and essential for JavaScript developers. For simplicity, I’ve divided them into 10 categories.

There are probably some plug-ins that you already know about and are using, but there are probably some that you’ve heard of but haven’t used, and I hope this article will give you a brief overview of them.

1. Snippet plug-ins

When you first install VS Code, it comes with snippets of JavaScript and TypeScript Code. Before you get started with modern JavaScript, you’ll need a few extra snippets to help you quickly write ES6/ES7 code:

  • VS Code JavaScript(ES6) Snippets: Currently the most popular, with over 1.2 million downloads. This plugin provides ES6 syntax support for JavaScript, TypeScript, HTML, React, and Vue.
  • JavaScript Snippet Pack: Provides a collection of useful JavaScript snippets. (This link can’t be opened.)
  • Atom JavaScript Snippet: A JavaScript plug-in ported from Atom.
  • JavaScript Snippets: A collection of ES6 Snippets provided. It includes support for Mocha, Jasmine, and other BBD(Behavior-Driven Development) testing frameworks.

2. Syntax highlighting plugin

VS Code comes with nice syntax highlighting for JavaScript Code. You can change these colors by installing themes. However, if you want a higher level of readability, you’ll need to install syntax-highlighting plugins. Here are a few:

  • JavaScript Atom Grammar: This replaces VS Code’s original JavaScript syntax highlighting in the Atom editor.
  • Babel JavaScript: supports syntax highlighting for ES201X, React, FlowType, and GraphQL.
  • DotENV: support.envFile syntax is highlighted, which is useful when you use Node.

3. Code detection plug-in

Writing JavaScript code efficiently with minimal annoyance requires a code detection (LINter) tool. It forces all members of the team to follow a specific code specification. ESLint is the most popular and supports many code styles, including the JavaScript code specifications of Standard, Google, and Airbnb. Here are the most popular VS Code check plugins:

  • ESLint: This plugin integrates ESLint into VS Code. It is the most popular code detection plug-in, with more than 6.7 million downloads. Its rules are in.eslintrc.jsonIn the configuration.
  • JSHint: Code detection plug-in based on JSHint. Use in project and directory.jshintrcFile as its configuration.
  • JavaScript Standard Style: Zero configuration and strict code inspection, enforcing StandardJS rules.

If you want to see an overview of the pros and cons of various code detection tools, check out our comparison of code detection tools.

4. The Node plug-in

Every JavaScript project needs at least one Node package, unless you’re the kind of person who likes to do things the hard way. Here are some VS Code plug-ins to make it easier for you to work with Node modules.

  • NPM:package.jsonTo verify the installed NPM package, ensure that the installation package version is correct, for missingpackage.jsonFile packages or uninstalled packages are highlighted.
  • Node.js Modules IntelliSense: Provides automatic completion of JavaScript and TypeScript import declarations. Source: vscode-node-module-Intellisense.

　　

  • Path IntelliSense: This has nothing to do with Node, but you’ll definitely need a smart tip for local files. This plugin will automatically complete file names.
  • Node exec: Allows you to use Node to execute the current file or selected code.
  • View Node Package: Use this plugin to quickly View the source Code of the Node Package, allowing you to open the Node Package library or documentation directly in VS Code.
  • Search node_modules: Usuallynode_modulesThe folder is not in the default search scope, this plugin allows you to search for it. Source: vscode-search-node-modules

　　

  • Import Cost: Displays the size of the imported package. Source code: import-cost.

　　

5. Code formatting plug-ins

Sometimes, you find yourself formatting code that you’ve written in the past that doesn’t have the right style. To save time, you can install any of the following VS Code plug-ins to quickly format and refactor existing Code:

  • Beatufy: A jsBeautifier plug-in that supports JavaScript, JSON, CSS, and HTML. through.jsbeautifyrcFile customization. It is the most popular formatting tool, with 2.3 million downloads.
  • Prettier Code Formatter: JavaScript, TypeScript, and CSS plugin that uses Prettier, has over 1.5 million downloads
  • JS Refactor: Provides many practical methods and operations for refactoring JavaScript code, such as extracting variables and methods, converting existing code into equivalent forms using arrow functions and template strings, exporting functions, and so on.
  • JavaScript Booster: A great code refactoring tool. Owning requires code operations, such as puttingvartoconstorletAnd get rid of the excesselseStatement, merge declaration and initialization. Much of its inspiration comes from WebStorm. Source: vscode-javascripts -booster.

　　

6. Browser plug-ins

Unless you are writing console programs in JavaScript, you will probably execute your JavaScript code in a browser. This means that you refresh your browser frequently to see what happens every time you update your code. Here are some tools that can greatly reduce the repetitive process of your development, rather than manually refreshing the browser every time:

 

  • Debugger for Chrome: Break points in the editor, allowing you to easily debug JavaScript in Chrome. Source: vscode- Chrome -debug.

　　

  • Live Server: Enables the local development Server to refresh static and dynamic pages in real time. Source: vscode- Chrome -debugvscode-live-server.

　　

  • Preview on Web Server: Provides Web Server and real-time Preview functions.
  • PHP Server: Useful for testing JavaScript code that runs only on the client side.
  • Rest Client: Instead of using a browser or a CURL program to test your Rest API endpoints, you can install a tool that sends HTTP requests interactively directly to the editor.

 

7. Framework class plug-ins

 

For most projects, you will use the appropriate framework to build your code to reduce development time. VS Code supports most major frameworks through plug-ins. However, there are still specific frameworks that are not fully supported. Here are some of the VS Code plugins that provide great functionality.

 

  • Angular 6: Provides Angular 6 snippets with support for TypeScript, HTML, Angular Material ngRx, RxJS, and Flex Layout. There are currently over 2.2 million downloads and 172 Angular snippets.
  • Angular V5 Snippets: Provides snippets for TypeScript, RxJS, HTML, and Docker files. There are currently over 2.7 million downloads.
  • React Native/React/Redux Snippets for ES6/ES7: Provides snippets of ES6/ES7 syntax for these frameworks.
  • React Native Tools: Provides code intelligence hints, command-line Tools, and debugging features for the React Native framework.
  • Vetur: Syntax highlighting, snippets, Emmet, code detection, smart hints, and debugging support for the Vue framework. It comes with good documentation published on GitBook.
  • Ember: Command line support and smart tips for Ember. After installation, allember cliCan be used directly in VS Code’s own command line list.
  • Cordava Tools: Supports the Cordava plugin and Ionic framework, providing intelligent hints, debugging, and other features for cordava-based projects.
  • JQuery Code Snippets: Provides over 130 jQuery Code Snippets to usejqPrefix to activate.

8. Test class plug-ins

Testing is a key part of software development, especially for production projects. You can get an overview of JavaScript testing by reading our guide -JavaScript Testing: Unit Testing vs Functional Testing vs Integration Testing. Here are some VS Code plug-ins for testing:

  • Mocha Sidebar: Use the Mocha library to provide unit tests for projects. This framework allows you to run tests directly in your code, displaying error messages as decorators.
  • ES Mocha Snippets: Mocha Snippets that provide ES6 syntax. The focus of this plug-in is to keep the code compact by using the arrow function to minimize the use of curly braces. Semicolons can be set to allow semicolons.
  • Jasmine Code Snippets: Code Snippets for the Jasmine test framework.
  • Protractor Snippets: Code Snippets for the Protractor end-to-end testing framework. Supports JavaScript and TypeScript.
  • Node TDD: Provides test-driven development support for Node and JavaScript projects. The ability to trigger the build of automated tests immediately after the source code is updated. Source: node – TDD

9. Other awesome plugins

I’m going to put the next VS Code plugin in the “awesome” category, because that’s a pretty good description.

  • Quokka.js: a great debugging tool that provides a fast prototyping practice ground for JavaScript, with good documentation.
  • Paste as JSON: Quickly converts JSON data into JavaScript code. Source code: quick-type.

　　

  • Code Metrics: This is another great plugin that calculates complexity in JavaScript and TypeScript Code. Source: CodeMetrics.

　　

　　

　　

10. The plug-in package

Now that we’re in the final category, I want you to know that the VS Code marketplace has a category for plug-in packages. In essence, they are a collection of VS Code plug-ins that are associated, bundled into a package for easy installation. Here are some of the better ones:

  • Nodejs Extension Pack: This package contains ESLint, NPM, JavaScript(ES6) Snippets, Search Node_Modules, NPM IntelliSense, and Path IntelliSense.
  • VS Code for Node.js-Development Pack: This includes NPM IntelliSense, ESLint, Debugger for Chrome, Code Metrics, Docker, and Import Cost.
  • Vue.js Extension Pack: A collection of Vue and JavaScript plug-ins. It currently includes 12 VS Code plugins, including some we didn’t mention before, such as auto-rename-tag and auto-close-tag.
  • Ionic Extesion Pack: This Pack contains add-ons for Ionic, Angular, RxJS, Cordova, and HTML.
  • SpreadJS is a pure front-end spreadsheet component that can be embedded into your system’s online Excel. It has a highly similar layout and is fully compatible with Excel’s 450 formulas and 92 charts.

conclusion

VS Code has a large number of high-quality plug-ins, which makes it popular with the JavaScript developer community. Writing JavaScript code has never been easier.

Plugins like ESLint help you avoid common errors in your code; Debugger for Chrome helps you debug your code more easily. Node.js plug-ins with smart tips help you reference modules correctly; Available tools like Live Server and REST Client make you less dependent on external tools to get your work done; SpreadJS is a pure front-end spreadsheet control that lets you embed Excel online in your application. All of these tools greatly speed up your iterative process.

I hope this list gives you access to the new VS Code plug-ins and helps you with your workflow.