Shulou(Shulou.com)06/02 Report--

This article is about what kinds of VSCode plug-ins there are. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Today, Visual Studio Code is undoubtedly the most popular lightweight code editor. It does borrow a lot from other code editors, mainly from Sublime and Atom. However, the key to its success lies in providing better performance and stable performance.

In addition, it also provides features that developers need very much, such as code intelligence tips. These features used to be available only in fully integrated development environments (IDEs) such as Eclipse or Visual Studio 2017.

There is no doubt that VS Code's strength comes from its plug-in market. Thanks to the open source community, VS Code now supports almost all programming languages, frameworks, and development technologies. This support can be provided in a variety of ways, including code snippets for specific technologies, syntax highlighting, Emmet, and smart prompts.

Types of VS Code plug-ins 1. Code snippet plug-in

When you install VS Code for the first time, it comes with code snippets of JavaScript and TypeScript. 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: currently 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 (ES6) code snippets in StandardJS style: this is basically a branch of the previous extension, but there is no semicolon.

Atom JavaScript Snippet: a JavaScript plug-in migrated from Atom.

JavaScript Snippets: provides a collection of ES6 code snippets. It includes support for Mocha, Jasmine, and other BBD (Behavior-Driven Development) testing frameworks.

two。 Syntax highlighting plug-in

The latest version of VS Code currently supports shading of variable and function references. It is now more like Atom.io editor syntax, so there is no need for extensions such as JavaScript Atom Grammar.

However, we still have some syntax highlighting extensions that are useful in some projects. This is a couple:

Babel JavaScript: syntax highlighting for ES201X, React, FlowType, and GraphQL is supported.

DotENV: supports .env file syntax highlighting, which is very useful when you use Node.

3. Code detection plug-in

Writing JavaScript code efficiently with minimal annoyance requires a code testing (linter) tool. It forces all members of the team to follow specific code specifications. ESLint is the most popular, supporting many code styles, including the JavaScript code specification for Standard, Google, and Airbnb. Here are the most popular VS Code code review plug-ins:

ESLint: this plug-in integrates ESLint into VS Code. It is the most popular code testing plug-in, with more than 6.7 million downloads. Its rules are configured in .eslintrc.json.

JSHint: a JSHint-based code detection plug-in. Use the .jshintrc file as its configuration in the project and directory.

JavaScript Standard Style: code detection with zero configuration and strict rules, enforcing the use of StandardJS rules.

Linter extension for JSLint:JSLint.

If you want to see an overview of the pros and cons of various code testing, you can take a look at our comparison of code testing 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 deal with Node modules more easily.

Npm: use package.json to verify the installed npm package, make sure that the version of the installation package is correct, and highlight packages that lack package.json files or that are not installed.

Npm Intellisense: automatically completes the npm module in the import statement.

Path IntelliSense: it doesn't really have anything to do with Node, but you definitely need a smart prompt for local files, and 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: use this plug-in to quickly view the source code of the Node package, allowing you to open the code base or documentation of the Node package directly in VS Code.

Node Readme: quickly open the npm package document.

Search node_modules: usually the node_modules folder is not in the default search scope, and this plugin allows you to search for it. Source code: vscode-search-node-modules.

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

5. Code formatting plug-in

Sometimes you find yourself formatting code that you've written in a less-than-ideal style. To save time, you can install any of the following VS Code plug-ins to quickly format and ReFactor existing code:

Beatufy: a plug-in for jsBeautifier that supports JavaScript, JSON, CSS and HTML. Can be customized through the .jsnormaltifyrc file. It is the most popular formatting tool and currently has 2.3 million downloads.

Prettier Code Formatter: there are currently more than 1.5 million downloads using Prettier's plug-ins that support JavaScript, TypeScript, and CSS.

JS Refactor: provides many practical methods and operations for refactoring JavaScript code, such as extracting variables and methods, converting existing code to the equivalent of using arrow functions and template strings, exporting functions, and so on.

JavaScript Booster: a great code refactoring tool. Owning requires code operations, such as converting var to const or let, removing redundant else statements, merging declarations and initialization. Its inspiration is largely inspired by WebStorm. Source code: vscode-javascript-booster.

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 will frequently refresh your browser to see the effect of every time you update your code. Here are some tools that can greatly reduce the repetitive process when you develop, instead of manually refreshing the browser every time:

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

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

Preview on Web Server: provides web server and real-time preview function.

PHP Server: useful for testing JavaScript code that can only be run on the client.

Rest Client: instead of testing your REST API endpoints with a browser or a CURL program, you can install this tool and send HTTP requests interactively 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 major frameworks through plug-ins. However, there are still specific frameworks that are not fully supported. Here are some VS Code plug-ins that provide powerful features.

Angular 7 Snippets:Angular 2, 4, 5, 5, 6, 7 and 8 Beta. Typescript,HTML,Angular Material ngRx,RxJS,PWA and Flex Layout are supported. So far, it contains 237 angular segments.

Angular v7 snippets: provides code snippets for TypeScript, RxJS, HTML, and Docker files. At present, there are more than 2.7 million downloads.

ES7 React/Redux/GraphQL/React-Native snippets: use the Babel plug-in feature to provide React/Redux code snippets in ES7 syntax. A code snippet that contains JavaScript and TypeScript.

React Native Tools: provides code intelligence tips, command-line tools, and debugging features for the React Native framework.

React-Native/React/Redux snippets for es6/es7: provides ES6 / ES7 syntax fragments for React,React Native,Redux and storybook in ES6 / ES7 syntax.

Vetur: provides syntax highlighting, code snippets, Emmet, code testing, smart hints, and debugging support for the Vue framework. It comes with good documentation published on GitBook.

Ember: provides command line support and smart prompts for Ember. After installation, all ember cli commands can be used directly in VS Code's own command line list.

Cordava Tools: supports Cordava plug-ins and the Ionic framework, provides support for smart tips, debugging and other features for Cordova-based projects.

JQuery Code Snippets: provides code snippets of more than 130 jQuery, activated using the jq prefix.

8. Test class plug-in

Testing is a key part of software development, especially for projects in production. You can learn more about tests in JavaScript and read more about the various tests you can run in our guide, JavaScript tests: unit and functional and integration tests. Here are some VS Code plug-ins for testing:

Mocha sidebar: use the Mocha library to provide unit tests for the project. This framework helps you run tests directly in the code and display error messages in the form of decorators.

ES Mocha Snippets: a Mocha code snippet that provides ES6 syntax. The focus of this plug-in is to use the arrow function to minimize the use of curly braces and keep the code compact. You can set the semicolon to be allowed.

Jasmine Code Snippets: a code snippet for the Jasmine test framework.

Protractor Snippets: a code snippet for the Protractor end-to-end testing framework. JavaScript and TypeScript are supported.

Node TDD: provide test-driven development support for Node and JavaScript projects. Can trigger the construction of automated tests immediately after the source code is updated. Source code: node-tdd

9. Other great plug-ins

I classify the next batch of VS Code plug-ins as "awesome" because the description is just right.

Quokka.js: a very powerful debugging tool that provides a drill ground for rapid prototyping for JavaScript, along with good documentation.

Paste as JSON: quickly convert JSON data into JavaScript code. Source code: quick-type.

Code Metrics: this is another great plug-in that calculates complexity in JavaScript and TypeScript code. Source code: codemetrics.

10. Plug-in package

Now that we have come to the last category, I want you to know that there is a category of plug-in packages in the VS Code market. In essence, they are a collection of associated VS Code plug-ins that are packaged into a package for easy installation. Here are some of the better ones:

Nodejs Extension Pack: there are ESLint, npm, JavaScript (ES6) snippets, Search node_modules, NPM IntelliSense and Path IntelliSense in this package.

VS Code for Node.js-Development Pack: this contains NPM IntelliSense, ESLint, Debugger for Chrome, Code Metrics, Docker, and Import Cost.

Vue.js Extension Pack: a collection of Vue and JavaScript plug-ins. Currently it contains 12 plug-ins for VS Code, some of which we haven't mentioned before, such as auto-rename-tag and auto-close-tag.

Ionic Extesion Pack: there are plug-ins for Ionic, Angular, RxJS, Cordova and HTML in this package.

VS Code has a large number of high-quality plug-ins, which makes it popular among JavaScript developers. It couldn't be easier to write JavaScript code.

● plug-ins like ESLint help you avoid common errors in your code

● Debugger for Chrome to help you debug your code more easily

● Node.js plug-in with IntelliSense helps you reference the module correctly

● 's available tools like Live Server and REST client make you less dependent on external tools when you get your work done

●, such as SpreadJS pure front-end table controls, allows online Excel to be embedded in your application.

All of these tools greatly speed up your iterative process.

Thank you for reading! This is the end of this article on "what kinds of VSCode plug-ins are there?" I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.