What plug-ins are available for vscade?

hello, Hello everyone , I am a Jackpop, Master graduated from Harbin Institute of technology , I worked in Huawei 、 Ali and other big factories work , If you are interested in further education 、 employment 、 There are doubts about technology improvement , Might as well make a friend ：

I am a Jackpop, Let's make a friend ！

VS Code Your reputation is getting better and better , The popularity is getting higher and higher , Take me for example , Sometimes a project may use C++、Java、JS And other programming languages , If you install a corresponding for each language IDE, That will not only waste a lot of time , And it will greatly slow down the computer speed . and VS Code Through simple configuration , It can be compared with the most popular corresponding language IDE par , therefore , There is no need to install PyCharm、IDEA、Clion、Webstorm That's it .

VS Code Why is it so popular , Without its strong community , This makes VS Code There are rich and practical plug-ins . and , Through the cooperation of some plug-ins , It can complete those majors IDE Most of the work that can be done .

today , Bring you 20 Increase efficiency 、 It's easy to use and let people 【 Make an impression 】 Of VS Code plug-in unit ！

1. Colorful Comments

Colorful Comments Is an easy to create and easy to read 、 A more user-friendly annotation VS Code plug-in unit .

Annotations play an important role in code , What are the functions implemented ？ What are the input and return values respectively ？

Good notes , It can improve the reading efficiency of other team developers , It can also reduce the cost of later maintenance .

however , Previous comments were too boring , Single color , There is no differentiation .

Colorful Comments Make annotations more colorful , Easier to distinguish .

Use Colorful Comments when , We can use different symbols to distinguish the types of annotations , then VS Code You can use different colors to distinguish them , This greatly improves the identification of annotations .

The corresponding relationship between different symbols and annotation colors is as follows ：

• Red (!)
• Blue (?)
• green (*)
• yellow (^)
• Pink (&)
• violet (~)
• Deep yellow (todo)
• gray (//)

You can see the effect ：

2. arrr

arrr It is a very efficient plug-in in the front-end development process , It can quickly put HTML The code is extracted into a component .

In the process of developing front end , There are many components that can be shared , for example ,header、footer etc. . Of course , In addition to these , As the case may be , There are always many components that can be shared under different systems .

If you can share , Then there is no need to write something repeatedly on every page HTML, This can cause huge code redundancy .

In response to this question , We can extract the common part into a component , such , This component can be directly introduced where it is used .

arrr It is such a plug-in , When using, you only need to select the part of the code that needs to be extracted as a component , Can quickly generate a component , And complete the code of the import part . such , There is no need for developers to manually copy 、 Paste and write a component , And then tediously modify the original code .

3. WakaTime

WakaTime Is a Kanban plug-in , Can be used to monitor 、 track 、 Statistics of developers' coding status .

Every day 、 Every week I like to summarize myself , What did I do this day ？ Are there any quantifiable indicators to measure my achievements and gains during this period ？

Most of the time it's vague , The result is not clear , Completed several to-do items ？ How many lines of code have been written ？ How far the project has progressed ？ These all need to have a clear understanding .

Data and graphics are the things that can bring people the most intuitive feeling and inner impact , for example , Yes 2000 Line code 、 Average daily completion of 2 A need 、 The project is progressing 45% wait .

WakaTime This is one of them VS Code plug-in unit , It can directly count your code workload , And in the form of Kanban, you can easily understand your own situation .

Usage method

WakaTime Certain configurations are required for use , Install the plug-in first , And then visit https://wakatime.com/ Website , Open Settings , Copy ApiKey, Then back VS Code Medium shortcut key control+shift+p, Search for WakaTime:ApiKey, Input ApiKey Can be confirmed ！

4. Rainbow csv

Rainbow csv It's an upgrade CSV View and edit productivity artifacts .

CSV This format is often used in the working process , Generally, we are doing data related work ,CSV Often used to store offline data .

although ,CSV It can be used Excel Open view , But I personally don't think this is a good choice , If the amount of data is small, it can bear , But if the amount of data reaches tens of thousands or hundreds of thousands , use Excel It's very bloated , and Excel By default, some formats in the data will also be modified , This is very offensive .

If you use Sublime、VS Code These text editor words , You don't have to put up with format and Caton .

however , The consequent problem is poor readability , Columns cannot be aligned , It is difficult to distinguish the correspondence of each column .

Rainbow csv Provides several powerful features to easily solve VS Code stay CSV Problems encountered in the file ：

• The highlighted , Easily distinguish each column
• suspension , Be able to distinguish the header information of each column
• Automatic check CSV File consistency
• Column mode edit
• Be able to align with spaces
• Can use class SQL Language search query

5. 100 Days of Code

100 Days of Code Is a tool for setting and achieving goals , A way to improve development skills VS Code plug-in unit .

We often see all kinds of 100 Day challenge , Challenge continuous exercise 100 God 、 Challenge content is continuously output 100 God …

and 100 Days of Code Is a challenge for you to develop 100 God , A plug-in to improve development skills .

It has the following characteristics ：

• Track progress ： Record daily progress , Indicators and milestones , To see 100 Progress within days
• Collect milestones ： In encoding and unlocking badges , See achievements along the way
• instrument panel ： Quickly view the overall milestone progress in the entire challenge , Recent logs and overall encoding time
• The backup data ： Create a free software account , Be able to back up challenges

100 Days' code plug-ins are based on Code Time structure ,Code Time Is a powerful time tracking plug-in , from 70,000 Support from a community of multiple developers .

6. Codelf

Installation times ：2 ten thousand +

There are only two difficulties in Computer Science : Cache invalidation and naming .

I have a deep sympathy for this sentence , When developing a project , Naming has always been a painful thing for me . I think , I'm not alone .

But , Naming is also a very important thing in the development process , for example , A good function name , Can let you instantly understand the function it realizes , This saves a lot of time to figure out what a piece of code really means .

therefore , Whenever a variable to be named is encountered during development 、 function 、 Class, I have to stop developing , Meditate for a long time .

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 , At the same time, it will show you the language used 、 Code link .

You can search the web page directly for the words you want to command , Of course , It's not just a web page , Also support VS Code, Atom, Sublime, WebStorm Development tools such as .

stay VS Code in ,Extensions-> Search for “CodeIf” To complete the installation .

Only the variable name needs to be selected when using , Then right click to select CodeIf You can jump to the web page , Show candidate names .

7. local history

Installation times ：14 ten thousand +

What to do if you want to retrieve the history code after modifying the code ？

In the use of Pycharm、IDEA You can view the local history code directly , And then easily restore the previous version . however ,VS Code Not supported by default local history Of , therefore , On the basis of Ctrl+z You can't undo it . Moreover, , Undo is to undo all the previous steps , There's a lot of it that we don't need .

however , by VS Code Match up local history, All the questions are answered .

After installing this plug-in, it will appear in the sidebar LOCAL HISTORY The words... , Whenever we save changes , It will back up a history file , When we need to restore the previous version , Just click on the corresponding file . Besides , It also displays the comparison details in the edit box , Allows you to change the location at a glance .

8. Partial Diff

Installation times ：19 ten thousand +

File comparison is a common and practical function , for example , We want to see where the code has been modified 、 Check the difference between the output log information and so on , If we use the naked eye to distinguish words one by one , It's obviously unbearable .

File comparison , The first thing I think about is Beyond Compare, This is a useful tool , however , It's just fees that keep a lot of people out .

not so bad ,VS Code Plug in Library Partial Diff This amazing plug-in , 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 .

9. TODO Tree

Installation times ：40 ten thousand +

I mentioned it in many previous articles , Habitual use TODO、FIXME Label is a very good habit .

When we find that a piece of code needs to be modified , Or some code needs to be further improved in the future , If you can mark it , Then it is very easy and efficient to locate the corresponding position in the future .

About TODO label , Many authors have recommended it TODO Highlight This plug-in , however , I recommend it more TODO Tree.

Although many tagging tools can implement TODO Tag highlight , But the problem is “ How can we quickly locate the corresponding label ？” It's obviously troublesome to open files one by one , Efficiency has not been greatly improved .

TODO Tree Is different , It can not only realize label highlighting , You can also add a tab to the activity bar , It can show the location of our tags in different views , Click the corresponding label to quickly locate to the specified location .

10. vscode-icons

Installation times ：466 ten thousand +

A good editing interface can make the development process feel comfortable , It can even improve development efficiency .

obviously ,VS Code The default icon doesn't do that .

however , coordination vscode-icons This plug-in is different , It has the following characteristics ,

• Custom icon
• Auto detect items
• Custom configuration

It not only gives folders 、 Comfortable icon on file , And it can automatically detect items , Different icons according to different functions of the project , for example ,git、Markdown、 Configuration item 、 Tools, etc .

11. Better Comments

Installation times ：66 ten thousand +

Do you think the annotation information is the same ？

Better Comments This plug-in allows VS Code Annotation information is more humanized .

It can be based on the alarm 、 Inquire about 、TODO、 Highlight and other marks to show different notes . Besides , You can also style commented code .

Any other annotation style you want can be specified in the settings

12. Bracket Pair Colorizer

Installation times ：250 ten thousand

When you see the example above with multiple nested parentheses , Do you think it's messy ？ At least , I'm like this , Whenever you see such a complex nested bracket , Especially when there are more lines of code , It's hard to determine what's at the same level . Don't understand hierarchy , Of course, it's a lot of trouble to read the code .

Bracket Pair Colorizer This plug-in can give ()、[]、{} These common brackets show different colors , When you click the corresponding bracket, you can link them directly with line segments , Make the hierarchy clear at a glance . besides , It also supports user-defined symbols .

This artifact really solved my pain .

13. Better Align

Installation times ：10 ten thousand +

Neat code , Is a good programmer must do . When we read open source code from big companies , Will find , Its design pattern 、 Its programming specifications are amazing .

Better Align It is such a tool that can realize code specification , It is mainly used to align the code up and down .

It can use colons （：）、 assignment （=,+=,-=,*=,/=） And arrows （=>） Alignment code .

Usage method ：Ctrl+Shift+p Input “Align” Can be confirmed .

14. change-case

Installation times ：24 ten thousand +

Identifiers and naming rules are the most basic ways to learn a language , It is also a must to understand .

Variable names in different languages 、 Function name 、 Different naming requirements for class names , There are humps 、 Some are underlined … however , Whatever it is , There's one thing in common – Naming matters .

Some programming languages are even strict with naming if they don't follow the specifications , Error will be reported directly during execution .

and change-case It is a plug-in that can quickly modify the current selection or current word name .

Usage method ：Ctrl+Shift+p Input “change” Then select the format to modify .

15. Markdown All in One

Installation times ：119 ten thousand +

Markdown For developers , It should be a common way of document writing , Although I'm on my own Markdown Used to writing documents Typora, But for those involved in the development process API Interface document 、README, I'm still used to using VS Code.

Markdown All in One This plug-in is comparable Typora Of Markdown Editing experience , It has the following characteristics ,

• Rich shortcuts
• TOC label
• The mathematical formula
• Done automatically
• List editing
• Output HTML Simultaneous transfer PDF
• Github Style document
• …

This plug-in really does All in One.

16. Error Lens

Installation times ：52645

Error Lens A code check （ error 、 Warning 、 Grammar problem ） A plug-in for highlighting .

Students who often deal with code should know , Most development tools identify code by underlining . however , This is not direct and friendly enough for code debugging .

Error Lens By making the diagnosis more prominent , Enhanced language diagnosis function , Highlights the entire line of diagnostics generated by the language , The diagnostic message is printed online at the position of the code line .

It has the following characteristics ,

• Highlight errors or warnings more clearly
• Append the diagnostic results to the end of any line that contains diagnostic information , This means that you don't have to switch context to the problem view
• The status bar shows the number of diagnostics that opened the file （ You can configure the ）
• Settings can be configured to control ErrorLens Show how to enhance diagnostics
• Applicable to any programming language

17. Duplicate action

Installation times ：73975

Duplicate action Is a quick copy and create files 、 The folder VS Code plug-in unit .

File copy and new , It is not as common as syntax checking in the development process , It can also be said that this function is rarely used in the development process , therefore , Few people will notice the tediousness it brings . Whenever we need to copy and create a new file , You need to create an empty file -> Copy -> The process of pasting .

And by Duplicat action You can copy files and folders with one click .

There are two ways to use it ：

1. Right click to select file , Click on “Duplicate file”;
2. Click on F1 key , choice “Duplicate file”;

18. Git History

Installation times ：2503915

Git History It's a product that can be viewed git And file history VS Code plug-in unit .

Compared with the first two paragraphs ,Git History Is much more famous , The functions are more abundant and commonly used , It has the following characteristics ,

• Display and search in detail in the form of image git Log contents
• View a copy of the file
• View and search file history
• Comparison Branch 、commit
• …

19. jumpy

Installation times ：194559

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-kRKkpT1h-1655810910529)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/336306449d91457dba6d162bbe8eddbc~tplv-k3u1fbpfcp-zoom-1.image)]

jumpy It's similar to Atom Tools with the same name VS Code plug-in unit , It provides fast cursor movement （ Jump ） The function of .

Jumping between codes is a very common , Functions that greatly affect development efficiency . If the number of lines of code is small , We can scroll the mouse to move to the specified position . however , For a few hundred 、 Thousands of lines of code , This is bound to make developers feel broken .

When Jumpy When activated , An identification is created in the area around the cursor ( Two letters ). then , Just enter a two letter code to jump to that position .

20.Path Intellisense

Installation times ：3002830

​

edit

Add picture comments , No more than 140 word （ Optional ）

Path Intellisense Is an autocomplete file name 、 File path VS Code plug-in unit .

File reading and writing is a function that is often touched in the development process , Whether using local offline files for functional testing , Or static files are involved in the development process .

In the past , You need to find the specified file manually , Then copy the path . Such a tedious process can be tolerated for a few file processing , If there is too much, it will become a very inefficient thing .

Path Intellisense You can complete the file name as you complete the code , This will greatly improve the efficiency of the development process .

---

dried food

lately , For your convenience , It took me half a month to put together all kinds of technical dry goods collected in recent years , The contents include but are not limited to Python、 machine learning 、 Deep learning 、 Computer vision 、 Recommendation system 、Linux、 engineering 、Java, Up to 5T+, I put the download links of various resources into a document , Directory as follows ：

All dry goods are given to everyone , I hope you can praise and support ！

https://pan.baidu.com/s/1eks7CUyjbWQ3A7O9cmYljA （ Extraction code ：0000） ​