60 divine vs Code plug-ins!!

source ： A flowing warbler
link ：https://juejin.cn/post/6994327298740600839

This article does not do any editor comparison , Just my daily use vscode Development , And I prefer to toss vscode , I will look everywhere for these interesting plug-ins , So save more and more , Today, I would like to recommend my collection 60 Multiple vscode plug-in unit , It is said that there are too many plug-ins , The editor will become stuck , Maybe my computer configuration can withstand , At present, I don't feel Kaka's .

Next, I will Optimize the appearance , Function extension , Improve coding efficiency , Code formatting , Other plug-ins Several categories are introduced .

notes ： This article only covers the basic use of plug-ins , That is to let you know that there is such a plug-in , And an overview of what the plug-in can do , The detailed configuration of some plug-ins is too complex , If you need any friends, please surf by yourself . According to everyone's computer ,vscode To configure , And the difference of plug-ins , Some plug-ins may not work on your computer . The shortcut keys mentioned in the article are windows Under the , For shortcut keys of other operating systems, please know for yourself .

Good horse, good saddle , Nice editor look , It can improve the coding experience of programmers , It can make developers feel better , Let's write bug More motivation .

Better Comments

A plug-in for beautifying annotations , According to different kinds of comments , Show different colors , Be clear at a glance .

After installation , The plug-in will default to several colors of comments , You can also use vscode Customize any color for your profile , Type of comment . I've found the specific configuration method for you .

Bracket Pair Colorizer / Bracket Pair Colorizer 2

This is a plug-in for finding objects , Not to help you find someone , Is to help you find the other half of the bracket . There are currently two versions ,Bracket Pair Colorizer 2 It's an enhanced version , Specifically, I didn't study in depth what was enhanced . And it has a lot of settings , Anyway, the default configuration is enough after installation , Interested students find more interesting ways to play by themselves .

You can see that the paired brackets are the same color , And when I select a bracket , A line will appear to help you find the other half of its bracket .

Highlight Matching Tag

This is also a plug-in for finding objects , Find the object of the tag , Look at the demo picture of my last plug-in , When I click html label , Paired tags will appear underlined to indicate who you are paired with .

Chinese

Let your vscode Become Chinese , Only a chicken with weak English like me can use , Big guys skip . Why put it in the category of optimized appearance , Because I think Chinese is better than English 🧐🧐, Just restart after installation .

Color Highlight

Just look at the name , A plug-in for highlighting colors in our code . You can see the... I set in the figure below css color property , Intuitively displayed .

Community Material Theme / Material Theme

Modify the theme of the editor , Built in many , I use it Material Theme Palenight High Contrast This one . After installation, click Set color theme That's all right. .

Material Theme Icons

Sets the of the file icon , This plug-in looks like this , There are many other plug-ins that modify file icons , I don't like this one , You can find it yourself .

Error Gutters

There is a big red wavy line at the wrong place , It can be said to be very intuitive .

Image preview

Preview the reference of the picture in the code , When the mouse moves up, there will be a small window to show the picture .

indent-rainbow

Just look at the name , Rainbow indent , Is to show different colors in different indents of the code .

Indenticator

When you click on an indent , A white line will appear to tell you the indentation level you are currently at , You can more easily view the code structure .

Trailing Spaces

Show the trailing space .

VSCode Great Icons

Another plug-in to modify the file icon , This is what I use , be relative to Material Theme Icons I prefer this style , Radishes and vegetables can be loved , We all take what we need .

The function of the editor itself is still limited , In order to cope with daily development , Have to install a lot of other software to assist , However, some commonly used auxiliary software can also be introduced through plug-ins , Their functionality may not be as powerful as native , But basically enough , And it's really convenient .

AZ AL Dev Tools/AL Code Outline

A plug-in used to sort out the code structure , After installation, there will be one more... In the file icon AL OUTLINE The option to .

I found a longer one for demonstration , Typical vue file , Please ignore my code , Focus on plug-in functionality , You can see that the first layer is very vue Characteristics of single file components template,script,style. Expand layer by layer to see dom node , methods Functions defined inside , Then click to quickly locate the target , Mom doesn't have to worry about my global search anymore ！

notes ： It seems to be expanded by default , It should be possible to set whether to expand by default , But I haven't studied , Interested bosses can investigate deeply .

Code Runner

Run code , You can view the results in the editor , Front end students can watch on the console console.log , There are many other ways to play , Refer to this article for specific use

CodeIf

I saw a sentence on the Internet , There are only two difficulties in Computer Science : Cache invalidation and naming . Ha ha ha , Such is the case , When developing a project , Naming has always been a painful thing .

But naming is a very important thing in the development process , A good function name , Can let you instantly understand the function it realizes , therefore , Whenever a variable to be named is encountered during development 、 function 、 Think hard when you are in class , Various translations .

however ,CodeIf This problem is solved by the emergence of , It searches GitHub, Bitbucket, GitLab To find the actual use of variable names , Give you some high frequency words .

Only the variable name needs to be selected when using , then Right click choice CodeIf You can jump to the web page , Show candidate names .

Color Info

Plug in for viewing color details , Color values can be displayed in a small window ,rgb,hsl,cmyk,hex wait , You can add the information type to be displayed in the configuration item .

Code Spell Checker

Check that the words in the code are spelled correctly , When words are abnormal , A wavy line will appear below , You can also customize the dictionary , Ignore the check of a word, etc , For more usage, refer to the link below .

Debugger for Chrome

This plug-in is specially developed for front-end debugging , Very convenient for debugging , It has the same function as Google's console , After the installation , You can debug breakpoints without opening the browser's console . The counterpart is Debugger for Firefox,Debugger for Microsoft Edge etc. , I haven't used anything else , You can install it as needed , The methods of use should be similar .

After installation , A small debugging icon will appear on the left , After opening, click the pinion at the top to configure . The root directory will be automatically created .vscode Folders and launch.json file , Never mind .

See this article for the specific contents and usage of the configuration file , Very detailed .

Git History

Right click the file and select Git：View File History To view all submission records as a list .

GitLens — Git supercharged

This is also with git Related plug-ins , The function is more powerful than the previous one . In the demo picture of the previous plug-in, you can see that every line of my code has the last time git Records submitted , That's the credit of this plug-in .

There are many other operations , See the link below for details .

LeetCode

Can be in vscode Chinese brush algorithm problem . I didn't use it myself

Local History

This is very strong , Modification record of local code . Usually we write the wrong code and can undo , But you can change it after you undo it , It's hard to undo . With this plug-in, you can directly see the modification record of the code . It can also be compared with the current version , Artifact .

After installation , The project root directory will automatically generate .history Folder . The modification record of the code will be put here . Remember to add .gitignore, Otherwise, every time you submit code, you'll get heavy .

open in browser

Open it in a browser html file .

After the installation, install in the target html Right click on the file , choice open in default browser You can open the file using the browser .

Partial Diff

The big winner in the field of document comparison must be Beyond Compare 了 , But it's for a fee ！ that Partial Diff This magical plug-in becomes a good substitute , Select a code , Right click Select Text for Compare , Check another part of the code , Right click Compare Text with Previous Selection that will do . Mine is in Chinese , It's even more obvious

Postcode

Postman Have you heard of it , This plug-in can basically be understood as , stay vscode It uses postman .

After installation, a... Will appear in the left menu Small box The icon , Click... After opening Create Request It can be used normally .

Project Manager

Project manager , It is applicable to the boss who often switches projects , Although I don't usually contact many projects , But I also have a lot of projects to play with . With this plug-in , You don't have to open the project in a new window .

After installation, a... Will appear in the list on the left Folder The little icon of , After clicking on it, you can carry out project management , It's usually an operation projects.json This file , Click the project name to switch , You can also open a new window .

Quokka.js

Display the running results of the code in real time , Please jump to the link

How to achieve the ultimate coding efficiency , Of course, if you can't write, you don't write . The following plug-ins are to assist you in some automation , In this way, you can save a lot of time for fishing .

Auto Import

Typescript Automatic import , In fact, many plug-ins now basically have this function built in , It's not necessary anymore . Maybe it's because I installed all kinds of strange plug-ins , When I want to import something now , A lot of tips , Any one can lead in

Auto Rename Tag

Automatically modify the tag name , When renaming a start tag , Automatically rename the end tag of the pairing .

All the corresponding changes are deleted at once , Isn't it very nice.

change-case

Quickly switch variable formats , What big Tuofeng , Little hump , Underline, etc , There are many types in it . Use according to F1（windows） , Enter the corresponding command .

CSS Peek

You can quickly locate the style definition by clicking the class name . I don't know if it's my own reason , Sometimes it will fail , Need to click Ban , Click again Enable That's good . Refer to the link for specific usage

ECMAScript Quotes Transformer

be used for Template string and Ordinary string splicing The mutual transformation of , But in fact, my daily development basically uses template strings in a unified way , There is little need for such mutual transformation .

The usage is also very simple , Select the row to be converted , Press f1 Just type the command , General input esq A prompt appears .

embrace

Quickly add various quotes around the selected code 、 Brackets , Don't move the cursor back and forth , However, it seems that most editors on the market now have this function built-in 🤨🤨

File Utils

establish , Copy , Move , rename , A convenient way to delete files and directories , The demo picture is from the official website .

javascript console utils

The debugging of front-end personnel is indispensable console.log , So this is a fast generation console.log Plug in for . It's very simple to use , Select the variable , Then press ctrl + shift + L I can generate . To delete, press ctrl + shift + D You can delete .

json2ts

Automatic handle json Format to ts The type of , Copy json Then press ctrl + alt + v that will do .

koroFileHeader

Automatic addition Head note and Function Comments Plug in for . Support custom content , Need to be in settings.json Custom configuration in .

"fileheader.customMade": {    "Author": " A flowing warbler ",    "Description": "",    "Date": "Do not edit",    "LastEditTime": "Do not edit",    "FilePath": ""  },  "fileheader.cursorMode": {    "description": "",    "param": "",    "return": ""  },

Mithril Emmet

Quickly generate code structure , But it seems that the new version vscode It's already built in .

Path Intellisense

When importing files , Path auto completion .

Npm Intellisense

Import npm When the package , Smart tips .

px to rem & rpx (cssrem)

Plug in for automatic conversion of units .

It's simple , Press enter when prompted .

Turbo Console Log

The other is used to generate console.log Plug in for , The difference is , He supports customization console.log The content of , Include the file name , route , Size, etc , You can also add your favorite emoji expression , Shortcut key ctrl + alt + L.

Code snippet class plug-in

There are many plug-ins in this category , But the function is to provide code fragments , The function is to use the abbreviation of a few characters , You can type out the whole piece of code .

• JavaScript (ES6) code snippets
• Jest Snippets
• HTML Snippets
• Vue VSCode Snippets
• Vue 3 Snippets
• ... ...

Beautify

Used to format code , But I seem to have installed it. It's useless , I've always been eslint + prettier, There are small partners who are using it. You can express your views in the comment area , If you are interested, please search for your own usage .

ESLint

I don't need to say that , Code checking , If you don't meet the specifications, you will report an error , Or a warning . Specific specifications need to be created in the root directory .eslintrc.js File de configuration , You can also use the existing specifications of many large companies , It's too complicated to go into detail , Post a tutorial link .

Prettier - Code formatter

Code formatting plug-in , This plug-in is usually used with eslint Use , It can also be used alone .

New in the root directory .prettierrc.json file , Just write the format you want in it . See the link for more specific configuration content

vetur / volar

Use vue Small partners in development have to deal with them ,volar with vue3 Better match , More functions , Because the functions of these two plug-ins are too large , I'm not going to expand on that , Interested self search use .

In addition to functional plug-ins , Of course, there are a lot of fancy things . Let's introduce some models that may have little impact on the development , But very fun plug-ins .

Little overlord

Remember the console game you played when you were a child ？ The boss has given us a plug-in , But I still want a friendly reminder ： The game is risky , Be careful when fishing ！

The operation is very simple , After installation, the joystick icon will appear on the left , Click open to download the game and play .

Emoji

Add... To the code emoji expression , Besides writing some notes myself ,console.log outside , Basically no other role , But it's fun , People look at all kinds of small expressions in your code , I think you are a lovely person .

In its official example, you can also put emoji Set to variable name , I don't suggest you do this . It's also very simple to use , Press f1（windows） Input emoji , You can see that there are three options , Namely emoji expression ,markdown Under the emoji, also unicode Under the emoji. Select a mode and press enter to enter the list , Press enter again and you can enter it into the code .

Settings Sync

Can synchronize vscode Configured plug-ins , Because I haven't changed my computer , So I haven't tested it yet , But there are still a lot of people using it online .

Recent hot article recommends ：

1.1,000+ Avenue Java Arrangement of interview questions and answers (2022 The latest version )

2. Explode ！Java Xie Cheng is coming ...

3.Spring Boot 2.x course , It's too complete ！

4. Don't write about the explosion on the screen , Try decorator mode , This is the elegant way ！！

5.《Java Development Manual （ Song Mountain version ）》 The latest release , Download it quickly ！

I think it's good , Don't forget to like it + Forward ！