10 VSCode plug-in artifacts, there is always one suitable for you! !

VSCode的确是一款非常热门、有强大用户基础的一款开发工具。因此，本文就来介绍10款高效、好用的插件，能够让原本单薄的VS Code如虎添翼，开发效率顿时提升到一个新的阶段。

1. Codelf

安装次数：2万+

在计算机科学中只有两件难事:缓存失效和命名。

我对这句话深有同感，当开发项目时，命名一直都是一种让我痛苦的事情。我想，应该不止我一个人有这样的感觉。

可是，命名又是开发过程中一项非常重要的事情，例如，一个好的函数命名，能够让你瞬间明白它实现的功能，这样就节省了很大一部分时间琢磨一段代码到底是什么含义。

所以，每当开发过程中遇到要命名的变量、函数、类时我就不得不停下开发，苦思冥想半天。

但是，CodeIf的出现让这个问题迎刃而解，它通过搜索GitHub, Bitbucket, GitLab来找到真实的使用变量名，为你提供一些高频使用的词汇，同时为你标明使用的语言、代码链接。

可以直接在网页上搜索要命令的词汇，当然，它不仅有网页版，也支持VS Code, Atom, Sublime, WebStorm等开发工具。

在VS Code中，Extensions->搜索“CodeIf”即可完成安装。

使用时只需要选中变量名，然后右键选择CodeIf就可以跳转到网页，显示候选命名。

推荐学习：《vscode教程》

2. local history

安装次数：14万+

修改代码之后想找回历史代码怎么办？

在使用Pycharm、IDEA时可以直接查看本地历史代码，然后轻松恢复之前某个版本。但是，VS Code默认是不支持local history的，所以，仅凭Ctrl+z撤销操作时不行的。何况，撤销操作是把前面步骤所有的操作都撤销了，其中有很多是我们不需要的。

但是，为VS Code配合上local history，所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。

3. Partial Diff

安装次数：19万+

文件比较是一种即常用有实用的一项功能，例如，我们想查看哪里修改了代码、查看输出的日志信息有什么区别等等，如果用肉眼逐个词的去分辨，显然是无法承受的。

提起文件比较，我首先想到的就是Beyond Compare，这是一款好用的工具，但是，仅凭收费这一点就把很多人拒之门外了。

还好，VS Code插件库里有Partial Diff这款神奇的插件，选中一代码，右键Select Text for Compare，选中另外一部分代码，右键Compare Text with Previous Selection即可。

4. TODO Tree

安装次数：40万+

我在此前多篇文章中提到过，习惯使用TODO、FIXME标签是一个非常好的习惯。

When we find that a certain piece of code needs to be modified, or that a certain piece of code needs to be further improved in the future, if we can mark it, then it will be very easy and efficient to locate the corresponding location.

Regarding the TODO tag, many authors have recommended the TODO Highlight plug-in, but I recommend using the TODO Tree.

Although many tag tools can achieve TODO tag highlighting, the question is "How do we quickly locate the corresponding tags?" Open files one by one It is obviously very troublesome to find, and the efficiency has not been greatly improved.

TODO Tree is different. It can not only realize tag highlighting, but also add a tab to the activity bar, which can display our marked items in different views. Location, click the corresponding label to quickly locate the specified location.

5. vscode-icons

Number of installations: 4.66 million

A good editing interface can make the development process more enjoyable Comfortable, it can even improve development efficiency.

Obviously, the default icon of VS Code cannot reach this level.

However, with vscode-icons this plug-in is different. It has the following features,

• Customization Icon
• Automatic detection of projects
• Custom configuration

It can not only add comfortable icons to folders and files, but also automatically detect projects, according to the project Different functions are paired with different icons, such as git, Markdown, configuration items, tool classes, etc.

6. Better Comments

Number of installations: 660,000

Yes Do you think the annotation information is the same?

Better CommentsThis plug-in can make VS Code comment information more user-friendly.

It can display comments differently based on alerts, queries, TODO, highlights and other tags. Additionally, commented out code can be styled.

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

7. Bracket Pair Colorizer

Number of installations: 250 Wan

#When you see the multiple levels of nested brackets in the above example, don’t you think it’s messy? At least, that's the case for me. Whenever I see such complex nested brackets, especially when the number of lines of code increases, it's difficult to determine which ones are at the same level. If you don't understand the hierarchical structure, of course it will be a lot more troublesome to read the code.

Bracket Pair ColorizerThis plug-in can display commonly used brackets such as (), [], {} Different colors can be directly linked together with line segments when clicking on the corresponding brackets, making the hierarchical structure clear at a glance. In addition, it also supports user-defined symbols.

This artifact really solved my pain points.

8. Better Align

Number of installations: 100,000

Clean code is a must for a good programmer Did it. When we read the open source code of large companies, we will find that its design patterns and programming specifications are amazing.

Better Align is such a tool that can implement code specifications. It is mainly used for upper and lower alignment of code.

It can align code with colons (:), assignments (=, =, -=, *=, /=) and arrows (=>).

Usage: Ctrl Shift p Enter "Align" to confirm.

9. change-case

Number of installations: 240,000

Identifiers and naming rules are for learning A language is the most basic and must be understood.

Different languages ​​have different naming requirements for variable names, function names, and class names. Some are camel case, and some are underscores... However, no matter what the requirements are, there is one thing in common - Naming is very important.

Some programming languages ​​are even so strict about naming that if they do not follow the specifications, an error will be reported directly during execution.

And change-case is a plug-in that quickly changes the name of the currently selected content or the current word.

Usage: Ctrl Shift p input "change" and then select the format to be modified.

10. Markdown All in One

Number of installations: 1.19 million

Markdown for development For readers, it should be a commonly used way of writing documents. Although I am accustomed to using Typora when writing independent Markdown documents, I am still accustomed to using VS Code for API interface documents and README involved in the development process.

Markdown All in OneThis plug-in can achieve a Markdown editing experience comparable to Typora. It has the following features,

• Rich shortcut keys
• TOC tag
• Mathematical formula
• Autocomplete
• List editing
• Output HTML and convert to PDF
• Github style document
• ......

This plug-in truly does All in One.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 10 VSCode plug-in artifacts, there is always one suitable for you! !. For more information, please follow other related articles on the PHP Chinese website!