Simian can’t just have Ctrl + C and Ctrl + V, but Ctrl + D.

To do a good job, he must sharpen his tools. Today brings you a blogger to learn the front end of more than a year of laziness, fh ~ improve efficiency necessary 40 vscode plug-ins.

Please give a thumbs up if you find it helpful

Automatic CLOSING of HTML tags — Auto Close Tag

As a front-end programmer, tagging HTML must be fast, and vscode provides automatic tag closing. However, vscode does not recognize some custom tags.

When you install this plugin, vscode will automatically recognize your custom tag name. You just need to write the tag name. I’ll leave the rest to vscode

Presentation:

Synchronous RENaming of HTML tags — Auto Rename Tag

If the label is wrong, then you need to modify the start tag and end tag, usually the HTML code is very much, very difficult, despite the Ctrl + D shortcut key. But often delete child tags with the same name.

When this plugin is installed, a yellow underline is generated for the currently matched tag. When you modify the start and end labels, the labels on the other side are automatically renamed.

Chinese interface

That goes without saying.

One click to run Code — Code Runner

If you don’t want to be a full stack programmer, you’re not a good programmer. Many ides integrate running code, so why not vscode? Once you have configured the Path environment variable, press Ctrl + Alt + N to see the result on the console. Vscode also supports F5, Ctrl + F5 debugging and running code, but you need to rewrite the configuration file. Too much trouble

Check word spelling — Code Spell Checker

Can both code and learn English, 🐂

You will be underlined if the word is misspelled or if the name of a variable, function, etc is not humped.

View CSS definitions in HTML – CSS Peek

Vscode does not support idea by clicking on a CSS class name or ID name to jump to where the CSS style is written. Some developers need to use Ctrl + D for word matching, but the matching is not precise enough.

Use CSS Peek to view the CSS style defined by the current class name and ID value while hovering over a class or ID defined in HTML.When used, you can quickly see the currently defined styles by holding Down Ctrl and moving the mouse over the name of the CSS class you want to view. Ctrl + click can also jump to the style location.

Dark theme — Dracula Official

This plug-in is actually a black theme, sitting in front of the computer for a long time to knock on code without a good theme how line? I personally think this theme is ok. Look at the picture:In fact, look for a long time, or own the theme is the most beautiful……Pull across

Highlight Matching Tag

As the plugin icon shows, the plugin will display the matching HTML tag on a red background and never worry about finding the closing tag again.

Effect:

CSS Class name awareness – HTML CSS Support

This goods and the bottom of that goods needless to say, see this installation quantity also have to install. Feel for yourself…

HTML intellisense – HTML Snippets

Smooth coding experience.

Image Import Preview — Image Preview

You can preview the image on the left after importing the image like IDEA. Look at the picture:

Displays the size of the Import file — Import Cost

When importing a module, the size of the imported module is displayed

ES6 code snippets – JavaScript (ES6) code snippets

The ultimate ES6 code experience…

Jupyter

The official launch of Microsoft, the following blog says, blog.csdn.net/pythonxiaop…

Live Update page – Live Server

If you have a monitor installed, a Go Live button will appear in the bottom right corner of your vscode.Click this button to create a local server where code changes in vscode can be synchronized in real time without refreshing the browser.

Edit MarkDown

No markdown software is needed, vscode is enough.

Powerful NodeJS snippets — Node-Snippets (Wall crack recommended)

I really like this plugin. No, I have to make time to move this plugin to number one. If you prefer to use NodeJS on the server side, then this plugin may be in desperate need of you. Simply type Node in the JS file to see a series of NodeJS code snippets. For example, express, HTTP, koA module basic code.

Look at the picture:

NPM extension

Quickly open an HTML file in your browser — Open in Browser

Right mouse click, or Alt + B to quickly open the current HTML file in the default browser.

Path auto-completion —

Just type in. /This extension will automatically determine if you want to import a file or image and give you a path.

Prettier-code formatter — prettier-code formatter

Importantly, this plug-in allows you to customize the style of formatting code.

Quick switching between projects — Project Manager

Installing this plugin will create a new icon in your left columnClick on it to quickly switch between saved items, just as silky as that.

Todo Tree — Todo Tree

A TODO flag is usually used when you have bugs in your code that are sometimes found but not fixed at the time. Wait for inspiration to solve it, then this little thing will work.

Click on this icon to see how many ToDos there are in the current open file or project, and give their location. Click on the corresponding mark will automatically jump.

Look at the picture:

Vue file syntax highlighting — Vetur

When I first started learning Vue, I opened vscode. You might need this guy.It will have the same effect as HTML.

Vue Intellisense – Vue 3 Snippets

After installation, look directly at the picture:

Assist in development — Visual Studio IntelliCode

To be honest, I don’t know what that means either, but that’s the number of installs, and it’s official from Microsoft. It did work when it was installed.

Beautiful file ICONS – vscode- ICONS

Code quick jump — Bookmarks

This plug-in, if used proficiently, can zip through thousands of lines of code.

To be clear, the shortcut keys for this plugin can be customized. Mine are Ctrl + Alt + J k L

In plain English, it means marking, jumping to the previous mark, jumping to the next mark.

Code Error prompt — Error Lens

Sometimes you code too carefully and may not see vscode reporting errors, or sometimes vscode fails to alert you to potential errors in your code. This plugin can help you

Plug-in is recommended here, you have what good plug-in can also leave a message to me oh ~

If I find a good plugin, I will continue to recommend it.