Practical vscode plugin recommendation

Practical vscode plugin recommendation

Everyone knows that the foremost IDE in the universe is Microsoft's Microsoft Visual Studio. In the past, Microsoft was a closed source, and now it is open source everywhere, especially the cross-platform Visual Studio Code editor. Indeed, this editor has been affected as soon as it was launched. Welcome, mainly with the help of the aura of Microsoft Visual Studio, but after I use it, I think it is indeed a very useful editor. Today I recommend a few of my commonly used vscode plugins to you.

1. Auto Close Tag

Automatically close html/xml tags, so you don t have to write closed tags every time, especially when there are more tags nested, this plugin really saves time, and the method of use is also very simple without any buttons. , You only need to write the start tag, and the closing tag is automatically generated when the right> of the current start tag is finished. Use it as follows:

Of course, vscode comes with the emmet plugin, so basically we don't have the opportunity to write such tags.

2. Auto Rename Tag

Automatically rename tags, this plug-in will automatically match the end tag and modify it to the corresponding end tag when modifying a tag, use the following:

3. AutoFileName

The file name is automatically loaded. Sometimes when we write some relative paths, we don t know if the path and file name are right, so we have to open it. This wastes time and we don t need this plugin. Use as follows:

4. Bracket Pair Colorizer

The function of this plug-in is to match the curly brackets or parentheses you selected with the ending brackets and distinguish them with colors and lines, using the following:

The above color is modified to suit my theme. The original color has three kinds of brackets and one color, which seems a bit unaccustomed, so I modified it to suit the theme.

5. Document This

Automatically generate js document comments, only need to press the Ctrl+Alt+D key combination twice, use the following:

6. Filesize

Display the size of the current file, and the size will be displayed in the status bar at the bottom left corner of the editor, as follows:

7. HTML Class Suggestions

Class suggestions in the Html file are used as follows:

8. Path Autocomplete

The path is automatically filled. This plug-in works best when used in conjunction with autofilename. Use it as follows:

9. Polacode

Use code snippets to generate pictures for dissemination, use as follows:

10. Prettier formatter

Format js, ts, css files, use as follows:

There are two ways, one is to format all, but to format the selected part

Eleven, VSCode Great Icons

Display file icon, display effect and supporting file pictures are as follows:

Twelve, vscode-fileheader

Add header information to the file. The header information can be customized in the configuration. The effect is as follows:

If you have a better recommendation, please comment below.