As a JavaScript developer, have you used all these necessary vs Code plug-ins?

Time:2021-5-4

This article is translated from:https://www.sitepoint.com/vs-…

Please indicate the source of Reprint:Official website of grapevineGrapevine provides professional development tools, solutions and services for developers to enable them.


Nowadays, visual studio code is undoubtedly the most popular lightweight code editor. It does learn a lot from other code editors, mostly from sublime and atom. However, the key to its success is that it can provide better performance and stable performance. In addition, it also provides functions that developers need, such as code intelligence tips. These functions were only available in integrated development environments (ides) such as eclipse or visual studio 2017.

The strength of vs Code undoubtedly comes from its plug-in market. Thanks to the open source community, vs code now supports almost all programming languages, frameworks and development technologies. There are many ways to provide this support, including code snippet, syntax highlighting, Emmet and intelligent prompt for specific technology.

Types of vs Code plug-ins

In this article, I mainly introduce the vs code plug-in for JavaScript developers. There are many vs Code plug-ins that meet this condition. Of course, I will not introduce them all. Instead, I’ll focus on the popular vs Code plug-ins that are essential for JavaScript developers. For the sake of simplicity, I divide them into 10 categories.

There may be plug-ins that you already know and are using, but there are also plug-ins that you have heard of but haven’t used. I hope to give you a brief introduction of these plug-ins through this article.

1. Code fragment plug-in
When you first install vs code, it comes with some JavaScript and typescript snippets. Before you get started with modern JavaScript, you’ll need some extra code snippets to help you write ES6 / ES7 code quickly:

  • Vs Code JavaScript (ES6) snippets: the most popular, with more than 1.2 million downloads. This plug-in provides ES6 syntax support for JavaScript, typescript, HTML, react, and Vue.
  • JavaScript snippet Pack: provides a useful collection of JavaScript code snippets( I can’t open this link.)
  • Atom JavaScript snippet: Javascript plug-in ported from atom.
  • JavaScript snippets: provides a collection of ES6 code snippets. It includes support for other BBD (behavior driven development) testing frameworks such as mocha and jasmine.

2. Syntax highlighting plug-in
Vs code comes with good JavaScript code syntax. You can change these colors by installing themes. However, if you want a higher level of readability, you need to install the syntax highlighting plug-in. Here are some:

  • JavaScript atom Grammar: it replaces vs Code with JavaScript syntax highlight in atom editor.
  • Babel javascript: supports syntax highlighting of es201x, react, flowtype and graphql.
  • Dotenv: supports. Env file syntax highlighting, which is very useful when you use node.

3. Code detection plug-in
Efficient writing of JavaScript code with minimal hassle requires a code checker. It forces all members of the team to follow specific code specifications. Eslint is the most popular and supports many code styles, including JavaScript code specifications from standard, Google and airbnb. Here is the most popular vs code checking plug-in:

  • Eslint: this plug-in integrates eslint into vs code. It is the most popular code checking plug-in with over 6.7 million downloads. Its rules are configured in. Eslintrc. JSON.
  • Jshint: code detection plug-in based on jshint. Use the. Jshintrc file as its configuration in the project directory.
  • JavaScript standard style: Zero Configuration and strict rules of code detection, forcing the use of standard JS rules.

If you want to see an overview of the advantages and disadvantages of various code detection tools, take a look at our comparison of code detection tools.

4. Node plug in
Every JavaScript project requires at least one node package, unless you are the kind of person who likes to do things in a difficult way. Here are some vs Code plug-ins that can help you handle node modules more easily.

  • NPM: check the installed NPM package with package.json to ensure the correct version of the package. Highlight the package that lacks package.json file or is not installed.
  • Node.js modules IntelliSense: provides automatic completion when JavaScript and typescript import declarations. Source code: vscode node module IntelliSense.

  

  • Path IntelliSense: it has nothing to do with node, but you definitely need an intelligent prompt for local files. This plug-in will automatically complete the file name.
  • Node exec: allows you to execute the current file or selected code with node.
  • View node package: with this plug-in, you can quickly view the source code of the node package and directly open the code base or document of the node package in vs code.
  • Search node_ Modules: common nodes_ The modules folder is not in the default search range. This plug-in allows you to search it. Source code: vscode search node modules.

  As a JavaScript developer, have you used all these necessary vs Code plug-ins?

  • Import cost: displays the size of the imported package. Source code: import cost.

  As a JavaScript developer, have you used all these necessary vs Code plug-ins?

5. Code format plug-in
Sometimes, you find that you’ll sort out the format of the code that you’ve written before. To save time, you can install any of the following vs Code plug-ins to quickly format and refactor existing code:

  • Beatify: a plug-in of jsbeatifier, supporting JavaScript, JSON, CSS and HTML. It can be customized through the. Jsbeautifyc file. It is the most popular formatting tool with 2.3 million downloads.
  • Prettier code formatter: using prettier’s plug-ins that support JavaScript, typescript and CSS, there are more than 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 form using arrow function and template string, exporting function, etc.
  • JavaScript booster: a great code refactoring tool. It needs code operation, such as converting VaR to const or let, removing redundant else statements, merging declaration and initialization. A lot of inspiration comes from webstorm. Source code: vscode JavaScript booster.

  As a JavaScript developer, have you used all these necessary vs Code plug-ins?

6. Browser plug in
Unless you are writing a console program in JavaScript, you will probably execute your JavaScript code in the browser. This means that you refresh your browser frequently to see how it works every time you update your code. Here are some tools that can greatly reduce the repetitive process of your development, instead of manually refreshing the browser every time:

  • Debugger for chrome: break points in the editor to make it easy for you to debug JavaScript in chrome. Source code: vscode chrome debug.

  

  • Live server: open the local development server to provide real-time refresh function for static and dynamic pages. Source code: vscode chrome debug vscode live server.

  

  • Preview on Web server: provides Web server and real-time preview function.
  • PHP server: useful for testing JavaScript code that can only run on the client side.
  • Rest client: instead of using a browser or a curl program to test your rest API endpoint, you can install this tool and send HTTP requests to each other directly in the editor.

7. Framework plug-ins

For most projects, you will use the right framework to build your code to reduce development time. Vs code supports most mainstream frameworks through plug-ins. However, there are still some specific frameworks that are not fully supported. Here are some powerful vs Code plug-ins.

  • Angular 6: provide code fragment of angular 6, support typescript, HTML, angular material ngrx, rxjs and flex layout. At present, there are more than 2.2 million downloads and 172 pieces of angular code.
  • Angular V5 snippets: provides code fragments for typescript, rxjs, HTML and docker files. There are currently more than 2.7 million downloads.
  • React native / react / Redux snippets for ES6 / ES7: provides code fragments for ES6 / ES7 syntax of these frameworks.
  • React native tools: provides intelligent code prompt, command line tools and debugging features for react native framework.
  • Vetur: provides syntax highlighting, code snippet, Emmet, code detection, intelligent prompt and debugging support for Vue framework. It comes with great documentation published on gitbook.
  • EMBER: provides command line support and intelligent prompt for Ember. After installation, all the commands of the member cli can be directly used in the command line list of vs code.
  • Cordava tools: support cordava plug-in and ionic framework, provide intelligent prompt, debugging and other features of Cordova based projects.
  • JQuery code snippets: more than 130 jQuery code fragments are provided, which are activated with JQ prefix.

8. Test plug-ins
Testing is a key link in software development, especially for projects in the production stage. 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 Mocha library to provide unit test for project. This framework helps you run tests directly in the code and display error messages in the form of decorators.
  • Es Mocha snippets: provides Mocha code fragments for ES6 syntax. The focus of this plug-in is to use arrow functions to minimize the use of curly braces and keep the code compact. Semicolons can be allowed by setting.
  • Jasmine code snippets: code snippets for jasmine test framework.
  • Protactor snippets: code snippets for the protactor end-to-end testing framework. JavaScript and typescript are supported.
  • Node TDD: provides test driven development support for node and JavaScript projects. It can trigger the construction of automatic test immediately after the source code is updated. Source code: node TDD

9. Visual design plug-in
WijmoJS VSCodeDesigner for building angular applications. With this designer, front-end developers can easily configure more than 20 pure front-end controls and automatically update HTML source files. Configurable controls include wijmojs data grid, chart, calendar, dashboard, input control and tree view.
As a JavaScript developer, have you used all these necessary vs Code plug-ins?

10. Plug in of other sticks
I put the next batch of vs Code plug-ins in the category of “awesome”, because this description is just right.

  • Quokka.js: a very powerful debugging tool, which provides JavaScript with a walkthrough for rapid prototyping, with good documentation.
  • Paste as JSON: quickly turn JSON data into JavaScript code. Source code: quick type.

  

  • Code Metrics: another great plug-in for calculating complexity in JavaScript and typescript code. Source code: codemetrics.

As a JavaScript developer, have you used all these necessary vs Code plug-ins?
As a JavaScript developer, have you used all these necessary vs Code plug-ins?
As a JavaScript developer, have you used all these necessary vs Code plug-ins?
  

  

10. Plug in package
Now we come to the last category. I want you to know that there is a category of plug-in packages in vs Code market. In essence, they are a collection of associated vs Code plug-ins, which are packaged to facilitate installation. Here are some good ones:

  • Nodejs Extension Pack: this package includes eslint, NPM, JavaScript (ES6) snippets and 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. At present, it contains 12 vs Code plug-ins, some of which we haven’t mentioned before, such as auto rename tag and auto close tag.
  • Ionic EXTESION Pack: this package contains plug-ins developed for ionic, angular, rxjs, Cordova and HTML.
  • Spreadjs pure front end table component: it can be embedded in the online excel of your system. The function layout is highly similar to that of Excel. It is fully compatible with 450 formulas and 92 charts of Excel.

summary

Vs code has a large number of high-quality plug-ins, which makes it popular among JavaScript developers. Nothing is easier than writing JavaScript code.

Plug ins like eslint help you avoid common errors in your code; Debugger for chrome helps you debug code more easily; The node.js plug-in with intelligent tips helps you reference the module correctly; Available tools like live server and rest client make you less dependent on external tools when you finish your work; Another example is the spreadjs pure front-end table control, which makes theOnline ExcelEmbed your app. All of these tools greatly speed up your iteration process.

I hope these lists give you access to the new vs code plug-in and help you with your workflow.


This article is published by the technical development team of grapevine. Please indicate the source for Reprint:Official website of grapevine

To learn about pure front-end control set, please go toWijmoJS

To learn about the online excel that can be embedded in your system, please go toSpreadjs pure front end table control

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]