I’ve been switching editors lately and found some good stuff to share with you.

Auto Close Tag Indicates the closing Tag of automatic completion

Just install it, you type the HTML tag, and it automatically completes it for you.

Auto Rename Tag Automatically renames a label

When you change the TAB name, it will do the same for the corresponding closed TAB.

Beautify

HTML, CSS, JS, JSON SASS syntax highlighting, formatting code tools

CTRL + Shift + P will prompt you to type beautify.

Better Comments

Different comments show different colors, *,? ,! Start and start writing, and you can see that the color of the comments is different

Bracket Pair Colorizer

The corresponding parentheses show the same color in case we confuse the parentheses pairing.

Code Runner

For example, if you want to run a JS file, open the file and CTRL + Alt + N will run the file. The system automatically calls Node to run the file for you.

Document This(JS and typescript comment templates)

CTRL + Alt +D, twice (note: new vscode already supports natively, type /** TAB on function)

Easy Sass compiles output CSS

Step 1: Open the command panel in VS Code using Ctrl+Shift+P and type Preferences: Open User Settings or Preferences: Open Workspace Settings.

usersittings
    "easysass.compileAfterSave": true// Save is compile"easysass.formats": [//expanded: non-indent CSS code. //compact: compact CSS code. //compressed: compressed CSS code {"format": "expanded"."extension": ".css"
            },
            {
                "format": "compressed"."extension": ".min.css"}]."easysass.targetDir": "css/"// Create a custom output path. If not, the default output path is the same as the current sass path.Copy the code

JavaScript (ES6) code snippets

Es6 code completion is automatic

jQuery Code Snippets

Jquery code auto-completion. For example, if you want to write ajax you need to type jqAjax and hit Enter.

Node.js Modules IntelliSense

Provides automatic completion of JavaScript and TypeScript import declarations.

Path Autocomplete Path completion tool

Project Manager Is a Project management tool

To solve this problem, vscode provides Project Manager plug-in management to develop frequently used projects

(1) Command + shift + p to open the configuration file and type Project Manager: Edit Projects

[{"name": "nuxtest"."rootPath": "e:\\nuxtest"."paths": []."group": ""
	},
	{
		"name": "vuetest"."rootPath": "e:\\vuetest"."paths": []."group": ""}]Copy the code

(2) Under the left icon bar there will be a small folder option, click into the project can switch.

Vetur

Syntax highlighting, Intellisense, Emmet, and more helped us develop VUE quickly

Vscode – ICONS adds file type ICONS to the file manager

vue-beautify

1. Shortcut keys CTRL + Shift + F; 2. Right-click in the file and select Beautify Vue. 3. Press F1, search Beautify Vue and click.

The use of the markdown

Create a new MD file, CTRL + Shift + V to preview while writing