As a JavaScript developer, do you ever use these necessary vs code plugins?

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

Please specify the Source: Grape City website, Grape City for developers to provide professional development tools, solutions and services, empowering developers.

Today, Visual Studio code is undoubtedly the most popular lightweight code editor. It does draw a lot from other code editors, mostly from sublime and atom. The key to its success, however, stems from its ability to deliver better performance and stability. In addition, it provides features such as code intelligence hints that developers are very much in need of. These features were once only in a complete integrated development environment (IDES) such as Eclipse or visual Studio 2017.

The power of VS code is undoubtedly from its plug-in market. Thanks to the open source community, VS code now supports almost all programming languages, frameworks, and development techniques. This support is provided in a variety of ways, including the provision of code snippets, syntax highlighting, Emmet, and smart hints for specific technologies.

VS code plug-in types

In this article, I mainly introduce the VS code plugin specifically for JavaScript developers. There are a lot of vs code plugins that meet this condition, and of course I won't introduce them all. Instead, I'll focus on the VS code plug-ins that are already quite popular and essential to JavaScript developers. For the sake of simplicity, I divide them into 10 categories.

There may be plugins you already know and are using, but it's also possible that there are some that you've heard about but never used, and I hope that this article will give you a brief introduction to these plugins.

1. Code Snippets Plugin

When you first install VS code, it comes with some code snippets for JavaScript and typescript. Before you start to get started with modern JavaScript, you'll need some extra code snippets to help you quickly write ES6/ES7 code:

• VS Code JavaScript (ES6) Snippets: Currently the most popular, there are more than 1.2 million downloads. This plugin provides ES6 syntax support for JavaScript, TypeScript, HTML, react, and Vue.
• JavaScript Snippet Pack: Provides a useful collection of JavaScript code fragments. (this link is not open.)
• Atom JavaScript Snippet: A JavaScript plugin that is ported from Atom.
• JavaScript Snippets: Provides a collection of ES6 code fragments. It includes support for other BBD (Behavior-driven development) test frameworks such as Mocha, Jasmine, and so on.

2. Syntax Highlighting plugin

VS code comes with good syntax highlighting for JavaScript code. You can change these colors by installing the theme. However, if you want a higher level of readability, you have to install the syntax highlighting plugin. Here are some:

• JavaScript Atom Grammar: It uses the JavaScript syntax in the Atom editor to highlight the replacement vs code original.
• Babel JavaScript: Supports syntax highlighting for es201x, React, Flowtype, and GRAPHQL.
• Dotenv: Supports .env file syntax highlighting, which is useful when you use node.

3. Code Detection Plugin

Writing JavaScript code efficiently with minimal annoyance requires a code detection (linter) tool. It forces all members of the team to follow specific code specifications. Eslint is the most popular and supports many code styles, including standard, Google, and Airbnb's JavaScript code specifications. Here is the most popular vs code check plugin:

• ESLint: This plugin integrates ESLint into vs code. It is the most popular code detection plugin and has more than 6.7 million downloads. Its rule is in the .eslintrc.json configuration.
• Jshint: Jshint-based code detection plug-in. Use the .jshintrc file as its configuration under the project and directory.
• JavaScript Standard Style: 0 configuration and strict rules for code detection, forcing the use of STANDARDJS rules.

If you want to see a review of the pros and cons of various code detections, take a look at our comparison of code detection tools.

4. Node Plugin

Every JavaScript project requires at least one node package, unless you're the kind of person who likes to do things in a tough way. Here are some vs code plugins that will make it easier for you to work with node modules.

• NPM: Use package.json to verify the installed NPM package, make sure the version of the installation package is correct, and highlight the missing package.json files or packages that are not installed.
• node. JS Modules IntelliSense: Provides automatic completion of JavaScript and typescript import declarations. Source: Vscode-node-module-intellisense.

　　

• Path IntelliSense: It doesn't really have to do with node, but you definitely need a smart hint for the local file that will automatically fill in the file name.
• Node exec: Allows you to execute the current file or selected code with node.
• View Node Package: Use this plugin to quickly see the source of node packages, allowing you to open the code base or document of the node package directly in VS code.
• Search node_modules: Usually the node_modules 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: Import-cost.

　　

5. Code Formatting Plugin

Sometimes, you find yourself writing code that is less than ideal for a previously written style. To save time, you can quickly format and refactor existing code by installing any of the following vs code plugins:

• Beatufy: A jsbeautifier plug-in that supports JavaScript, JSON, CSS, and HTML. Can be .jsbeautifyrc customized by file. It is the most popular format tool and currently has a 2.3 million download volume.
• Prettier Code Formatter: With prettier's support for JavaScript, typescript and CSS, there are currently more than 1.5 million downloads.
• JS Refactor: Provides a number of 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. Having code operations, such as converting var to const or let , removing redundant else statements, merging declarations and initializations. Its inspiration stems from the inspiration of Webstorm. Source: Vscode-javascript-booster.

　　

6. Browser Plugin

Unless you're writing a console program in JavaScript, you'll probably execute your JavaScript code in the browser. This means that you will frequently refresh your browser to observe the effects of each time you update your code. Here are some tools that can drastically reduce this repetitive process at the time of your development, rather than manually refreshing your browser every time:

• Debugger for Chrome: Break points in the editor, making it easy to debug JavaScript in Chrome. Source: Vscode-chrome-debug.

　　

• Live server: Enables local development-time servers to provide real-time refresh functionality for both static and dynamic pages. Source: Vscode-chrome-debugvscode-live-server.

　　

• Preview on Web server: Provides Web servers and real-time preview capabilities.
• PHP Server: Useful for testing JavaScript code that can be run only on the client.
• Rest Client: Instead of testing your REST API endpoint with a browser or a curl program, you can install the tool to send HTTP requests to each other directly in the editor.

7. Framework class Plug-in

For most projects, you will use the appropriate framework to build your code to reduce development time. VS code supports most mainstream frameworks through plugins. However, there are still some specific frameworks that are not fully supported. Here are some of the more powerful vs code plugins available.

• Angular 6: Provides code snippets for Angular 6, supporting Typescript, HTML, Angular Material Ngrx, RXJS, and Flex Layout. There are currently more than 2.2 million downloads and 172 angular code snippets.
• Angular V5 Snippets: Provides snippets of code for TYPESCRIPT, RxJS, HTML, and Docker files. There is currently a more than 2.7 million download volume.
• React Native/react/redux Snippets for Es6/es7: Provides a snippet of the ES6/ES7 syntax for these frames.
• React Native Tools: Provides code intelligence hints, command-line tools, and debugging features for the React Native framework.
• Vetur: Provides syntax highlighting, code snippets, Emmet, code detection, smart hints, and debugging support for the Vue framework. It has a good document published on the Gitbook.
• Ember: Provides command line support and smart hints for Ember. Once installed, all ember cli commands can be used directly in the VS Code own list of command rows.
• Cordava Tools: Supports Cordava plug-ins and ionic frameworks, provides smart hints for Cordova-based projects, and debugs support for other features.
• jquery Code Snippets: Provides a snippet of more than 130 jquery, using a jq prefix to activate.

8. Test class Plug-in

Testing is a key part of software development, especially for projects in the production phase. You can get an overview of JavaScript testing by reading our guide-javascript test: Unit test vs functional Test vs integration test. Here are some of the VS code plugins for testing:

• Mocha Sidebar: Use the Mocha Library to provide unit testing for your project. This framework helps you run the test directly in the code, displaying the error message in the form of an adorner.
• ES Mocha Snippets: Provides Mocha code snippets for ES6 syntax. The focus of this plugin is to use the arrow functions to minimize the use of curly braces, keeping the code compact. You can use a semicolon by setting the Allow.
• Jasmine Code Snippets: A snippet for the Jasmine test framework.
• Protractor Snippets: Code snippet for protractor end-to-end test framework. Supports JavaScript and typescript.
• Node TDD: Provides support for test-driven development for node and JavaScript projects. Can immediately trigger the construction of automated tests after the source code is updated. Source: NODE-TDD

9. Other stick-stick plugins

I classified the next batch of VS code plugins as "Awesome", because the description is just right.

• Quokka.js: A very powerful debugging tool that provides JavaScript with a quick prototype of the walkthrough farm, with good documentation attached.
• Paste as JSON: quickly convert JSON data to JavaScript code. Source: Quick-type.

　　

• Code Metrics: This is another great plug-in that calculates the complexity of JavaScript and typescript code. Source: Codemetrics.

　　

　　

　　

10. Plug-in Package

Now that we have come to the last category, I want you to know that the VS code market has a category of plug-in packages. Essentially, they are associated with a collection of some vs code plugins, which are made into a package for easy installation. Here are some better:

• Nodejs Extension Pack: This package has 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 some Vue and JavaScript plugins. It currently contains 12 vs code plugins, some of which we did not mention before, such as Auto-rename-tag and Auto-close-tag.
• Ionic extesion Pack: This package has plugins for Ionic, Angular, RxJS, Cordova, and HTML development.
• SPREADJS Pure front-end Table component: Online Excel that can be embedded in your system, with a feature layout similar to Excel, fully compatible with Excel's 450 formulas and 92 charts.

Summarize

VS code has a large number of high-quality plugins, which makes it popular among the JavaScript developer community. Writing JavaScript code is no easier than it is now.

Plugins like Eslint help you avoid common mistakes in your code; Debugger for Chrome helps you debug your code more easily; the node. js plugin with smart hints helps you to properly reference modules; like Live server and Rest The available tools such as the client allow you to reduce the reliance on external tools when you're done, or, for example, Spreadjs pure front-end table controls, to embed online Excel into your app. All of these tools greatly speed up your iterative process.

I hope these lists give you access to the new VS code plugin that will help you with your workflow.