VSCode 插件（分类查找）
Posted 半生过往
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VSCode 插件（分类查找）相关的知识，希望对你有一定的参考价值。
文章目录
- 优化外观
- Better Comments（不同种类的注释显示不同的颜色）
- Bracket Pair Colorizer / Bracket Pair Colorizer 2（配对的括号是相同的颜色）
- Highlight Matching Tag（ html 标签配对）
- Chinese（中文）
- Color Highlight（颜色高亮展示）
- Community Material Theme / Material Theme（主题颜色）
- Error Gutters（报错红波浪线提示）
- Image preview（图片的引用展示）
- indent-rainbow（彩虹缩进）
- Indenticator（缩进部分白线）
- Trailing Spaces（尾随空格显示）
- 更改文件图标（VSCode Great Icons/Material Theme Icons）
- 功能扩展
- AZ AL Dev Tools/AL Code Outline（便于找节点，方法）
- Code Runner（运行代码，可以在编辑器中查看结果）
- Color Info
- Code Spell Checker（检查代码中单词拼写是否正确）
- Debugger for Chrome
- git提交历史（Git History / GitLens — Git supercharged）
- LeetCode（刷算法题）
- Local History（本地代码的修改记录）
- open in browser（在浏览器中打开 html 文件）
- Partial Diff（文件比较）
- Postcode（在 vscode 里面使用 postman）
- Project Manager（项目管理器）
- Quokka（实时显示代码的运行结果）
- 提升编码效率
- 代码格式化
优化外观
Better Comments（不同种类的注释显示不同的颜色）
美化注释的插件，可以根据不同种类的注释，显示不同的颜色，一目了然。
正常注释，前面使用相应的前缀即可（vs code 会结合插件自动用配置的颜色去渲染，插件自带5种高亮注释）
Bracket Pair Colorizer / Bracket Pair Colorizer 2（配对的括号是相同的颜色）
找到括号的另一半。配对的括号是相同的颜色，并且选中一个括号以后，会出现一条线去找到它对应的另一半括号。
Highlight Matching Tag（ html 标签配对）
点击一下 html 标签，配对的标签就会出现下划线来指示你谁和谁是一对。
Chinese（中文）
变成中文
Color Highlight（颜色高亮展示）
代码中的颜色进行高亮展示
Community Material Theme / Material Theme（主题颜色）
修改编辑器的主题，内置很多种
安装完了以后点击 设置颜色主题 就可以了。
Error Gutters（报错红波浪线提示）
报错的地方都有大红波浪线提示，可以说是非常的直观了
Image preview（图片的引用展示）
预览代码中图片的引用，鼠标移上去就会有小窗展示图片。
indent-rainbow（彩虹缩进）
彩虹缩进，就是把代码不同的缩进展示不同的颜色。
Indenticator（缩进部分白线）
当你点击一个缩进部分的时候，会出现一条白线来告诉你当前处于的缩进层级，可以更方便的查看代码结构。(尽量不要与类似插件同时用，否则效果可能不明显)
Trailing Spaces（尾随空格显示）
把尾随空格显示出来。
更改文件图标（VSCode Great Icons/Material Theme Icons）
功能扩展
AZ AL Dev Tools/AL Code Outline（便于找节点，方法）
梳理代码结构，安装完后在文件图标里就会多出一个 AL OUTLINE的选项。
可以看到展开第一层是极具 vue 单文件组件特点的 template，script，style。逐层展开就可以看到 dom 节点， methods 里面定义的函数等，然后点击就可以快速定位到目标所在位置。
Code Runner（运行代码，可以在编辑器中查看结果）
可以在控制台看 console.log
VSCode插件推荐 | Code Runner: 代码一键运行，支持超过40种语言 
Color Info
查看颜色详细信息的插件，可以小窗口显示颜色值，rgb,hsl,cmyk,hex等等，可以在配置项里添加要展示的信息类型。
Code Spell Checker（检查代码中单词拼写是否正确）
Debugger for Chrome
这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，安装以后，无需打开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox，Debugger for Microsoft Edge等。
安装完以后，左边会出现一个调试的小图标，打开以后再点击上方小齿轮进行配置。根目录下会自动新建 .vscode 文件夹以及 launch.json 文件，不用管。
VSCode配置 Debugger for Chrome插件
git提交历史（Git History / GitLens — Git supercharged）
右键单击文件选择 Git：View File History 来以列表的形式查看所有的提交记录。
LeetCode（刷算法题）
Local History（本地代码的修改记录）
通常我们写错代码了可以撤销，但是撤销完以后再修改，想要取消撤销就难了。
有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比。
安装完以后，项目根目录下会自动生成 .history 的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore，不然每次提交代码的时候就要遭重了。
open in browser（在浏览器中打开 html 文件）
安装完以后在目标的 html 文件上右击，选择 open in default browser 即可打开使用浏览器打开文件。
Partial Diff（文件比较）
选中一代码，右键 Select Text for Compare ，选中另外一部分代码，右键Compare Text with Previous Selection即可。是中文的。
Postcode（在 vscode 里面使用 postman）
安装完以后左侧菜单会出现一个 小盒子 的图标，点开以后点击 Create Request 就可以正常使用了。
Project Manager（项目管理器）
安装完以后左侧列表会出现一个 文件夹 的小图标，点开以后就可以进行项目管理了，通常都是操作projects.json 这个文件，点击项目名字就可以切换了，也可以新窗口打开。
Quokka（实时显示代码的运行结果）
提升编码效率
Auto Rename Tag（自动修改标签名）
重命名一个开始标签时，自动重命名配对的结束标签。
CSS Peek（点击类名迅速定位到样式）
change-case（快速切换变量格式）
大坨峰，小驼峰，下划线等等，它里面有很多类型。使用方法按 F1（windows） ，输入对应命令即可。
Turbo Console Log（生成 console.log）
支持自定义 console.log 的内容，包括文件名，路径，大小等，还可以添加自己喜欢的 emoji 表情，快捷键 ctrl + alt + L。
javascript console utils（快速生成 console.log）
选中变量，然后按 ctrl + shift + L就可以生成了。需要删除的时候按 ctrl + shift + D即可删除。
json2ts（自动把 json 格式转成 ts 的类型）
复制 json 之后按 ctrl + alt + v 即可
Path Intellisense（引入文件的时候，路径自动补全。）
Npm Intellisense（导入 npm 包的时候，智能提示。）
px to rem & rpx (cssrem)（自动换算单位的插件。）
出现提示以后回车即可。
代码片段类插件
提供代码片段，使用几个字符的简写，可以敲出整段代码。
代码格式化
Beautify
ESLint
Prettier - Code formatter
vetur / volar
以上是关于VSCode 插件（分类查找）的主要内容，如果未能解决你的问题，请参考以下文章