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
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
2. Syntax highlighting plug-in
- Dotenv: supports. Env file syntax highlighting, which is very useful when you use node.
3. Code detection 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.
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
- 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.
- 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.
- Import cost: displays the size of the imported package. Source code: import cost.
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:
6. Browser plug in
- 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.
- 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
- 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.
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.
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.
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:
- Vs Code for node.js – development Pack: This includes NPM IntelliSense, eslint, debugger for chrome, code metrics, docker and import cost.
- 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.
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