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

This article mainly introduces 27 VSCode tools suitable for JavaScript development, which are very detailed and have certain reference value. Friends who are interested must finish reading them.

Visual Studio Code (also known as VSCode) is a lightweight but powerful cross-platform source code editor that more and more developers like to use with built-in support for development tools such as TypeScript and the Chrome debugger.

If you are looking for more useful VSCode tools, then this article may help you. Here are 27 incredible VSCode tools for JS developers in 2019.

1. Project Snippets (code snippet)

Project snippets, one of my favorite tools, comes from the original user code snippet built into VSCode. This feature allows you to create your own code snippets for reuse throughout the project.

But what does it mean to "reuse" them?

If we often have to repeat the following template file:

Import {useReducer} from 'react'const initialState = {/ /} const reducer = (state, action) = > {switch (action.type) {default: return state}} const useSomeHook = () = > {const [state, dispatch] = useReducer (reducer, initialState) return {. State,}} export default useSomeHook

In fact, we can put the above code directly into the user code snippet, so instead of writing (or copying and pasting) the entire code snippet, just type a custom prefix to generate the configured code snippet.

Open VsCode and select File > preferences > user snippet, and you can choose to create a new global snippet by clicking New Global snippet File.

For example, to create your own code snippet file for the TypeScript React project, click New Global snippet file and enter typescriptreact.json. It will guide us to a newly created .json file that you can use to build React applications that use TypeScript.

For example, to create a user fragment from the above code example, you can do this:

{"const initialState = {}" Const reducer = (state, action) ": {" prefix ":" rsr "," body ": [" const initialState = {"," / / $1 ","} "," const reducer = (state, action) = > {"," switch (action.type) {"," default: "," return state ","} " "}"]}}

With it, we can create a new TypeScript file that ends in .tsx, enter rsr in the newly created file, and then press enter or tab key VSCode to help us generate the code snippet content.

Const initialState = {/ /} const reducer = (state, action) = > {switch (action.type) {default: return state}}

The problem with the global user code snippet is that it will run through all of our projects (which is very powerful for general code snippets in some cases).

Some projects will be configured in different ways, and the global file used to configure code snippets becomes a problem when you need to distinguish between specific use cases.

For example, when the project structure of each project is different

{"import Link from components/common/Link": {"prefix": "gcl", "body": "import Link from 'components/common/Link'"}, "border test": {"prefix": "b1", "body": "border:' 1px solid red',"}, "border test2": {"prefix": "b2", "body": "border: '1px solid green',"} "border test3": {"prefix": "b3", "body": "border: '1px solid magenta',"}}

This may be sufficient for a project with a specific file/folder structure, but what if we are working on another project where the Link component has a components/Link-like path?

Notice how the three border tests enclose their values in single quotation marks: border: '1px solid red'.

This is completely valid in JS, but what if you use styled-components as the style solution for your project? This syntax no longer applies to the workspace because styled components uses the normal CSS syntax

This is the highlight of project snippets.

Project snippets allows us to declare code snippets at the project / workspace level so that the current project code snippet does not conflict with or pollute other projects.

2. Better Comments (a more humane comment)

If you like to write comments in your code, you may sometimes find it frustrating to search for specific comments you have previously written, because the code can become a little crowded.

With Better Comments, you can make annotations more obvious by introducing color annotations.

3. Bracket Pair Colorizer (tag matching parenthesis matching plug-in)

The first time I saw a screenshot of Bracket Pair Colorizer, I immediately went into the installation and used it.

4. Material Theme

Material Theme is an epic theme that can be installed directly into VSCode, and the post-installation code looks like this:

5. @ typescript-eslint/parser

If you are a TypeScript user, you should start thinking about moving your TSLint configuration to ESLint + TypeScript. Supporters behind TSLint have announced plans to abandon TSLint sometime this year.

The project is gradually adopting @ typescript-eslint/parser and related packages to ensure the forward-looking settings of its project.

We can still take advantage of most of ESLint's rules and compatibility with prettier use of new settings.

6. Stylelint

For me, stylelint is a must in all my projects for the following reasons:

It helps to avoid mistakes.

It strengthens the style conventions in CSS.

It goes hand in hand with Prettier support.

It supports CSS/SCSS/Sass/Less.

It supports plug-ins written by the community.

7. Markdownlint + docsify

Markdown enthusiasts must try the markdownlint extension on vscode, which will use green wavy lines to show you how many areas do not conform to the writing standards, such as:

There must be a blank line under the title

The code snippet must add a type

It cannot appear in the text.

This kind of html label

URL must be used

Expand

You can also install docsify in conjunction with the installation, as it supports Markdown and other enhancements to each project.

8. TODO Highlight

If you are a developer used to writing to-dos in your application code, you can install an extension such as TODO Highlight to highlight the to-do items set up throughout the project.

9. Import Cost

Import Cost can display the size of the package we imported in the VS code editor.

10. Highlight Matching Tag

Sometimes trying to match the end of a tag can be frustrating, and Highlight Matching Tag comes in handy.

11. Vscode-spotify

Programmers often type code while listening to music, sometimes in the middle of writing, the song is too bad, if you want to switch, you have to cut to the music player, and then go back to the VsCdoe interface, which is a bit troublesome.

This is where vscode-spotify uses kung fu because it can use music players directly from within VSCode.

With this extension, you can see the currently played songs in the status bar, you can switch between songs through hotkeys, you can click buttons to control the music player, and so on.

12. GraphQL for VSCode

GraphQL has been developing, and we can often see it in the JS community. Therefore, it's best to start thinking about installing GraphQL for VSCode in VSCode.

13. Indent-Rainbow

Indent-Rainbow will add a color to the indentation to give you a more intuitive view of the code hierarchy.

14. Color Highlight

Color Highlight can highlight colors in the code, as follows:

15. Color Picker

Color Picker is an VSCode extension that provides us with a graphical user interface for selecting and generating color codes such as CSS color symbols.

16. REST Client

When I first saw REST Client and tried it, it didn't seem to be a very useful tool compared to existing software such as Postman.

However, the more you learn about the use of REST Client extensions, you will realize how much impact it has on development tools, especially when testing API.

You just need to create a new file to write to the following line:

Https://google.com

Then go to the command panel (CTRL + SHIFT + P) and click Rest Client: Send request, which pops up a new tab with request response details in an instant, which is very useful:

You can even pass parameters, or request body data to POST, with just a few lines of code:

POST https://test.someapi.com/v1/account/user/login/Content-Type: application/json {"email": "someemail@gmail.com", "password": 1}

The POST request is sent with parameters {"email": "someemail@gmail.com", "password": 1}.

17. Settings Sync

There are a variety of different plug-ins on vscode, if you want to use vscode configuration on different computers is a more troublesome thing, use Settings Sync to back up the vscode configuration, when you need to use vscode on other computers, just download the backup configuration.

All we need is a GitHub account, and every time we want to save the configuration (including key bindings, code snippets, extensions, etc.), simply press SHIFT + ALT + U to upload the private settings to the GitHub account. Then, the next time you log in or reformat to another computer, you can press SHIFT + ALT + D to download the configuration immediately.

18. Todo Tree

Todo Tree will help us find all the to-do items created throughout the application code. It will put them in a separate tree and can view them at the same time on the left side of the panel

19. Toggle Quotes

Toggle Quotes is an interesting utility extension that allows us to switch between quotation marks. It comes in handy when you need to switch to backquotes when using string insertion.

20. Better Align

Better Align aligns assignment symbols and comments. To use it, place the cursor in the code you want to align, use CTRL + SHIFT + P to open the command panel (or use a custom shortcut to open the command panel), and then invoke the Align command.

21. Auto Close Tag

Auto Close Tag automatically closes html tags.

twenty-two。 Sort Lines

Sort lines can help us sort selected rows.

23. VSCode Google Translate

If you are involved in multilingual development projects, VSCode Google Translate can help us switch languages quickly.

24. Prettier

Prettier is an extension of VSCode that automatically formats JavaScript/TypeScript, etc., to make the code more beautiful.

25. Material Icon Theme

I prefer Material Icon Theme to other icon themes because the file types are more obvious, especially when using dark themes.

twenty-six。 IntelliSense for CSS Class Names in HTML

IntelliSense for CSS Class Names in HTML, based on the definition found in the workspace, provides CSS class name completion.

twenty-seven。 Path Intellisense

Path Intellisense automatic road strength repair.

These are all the contents of the article "27 VSCode tools for JavaScript Development". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.