VS code 前端常见插件

1. Better Comments ：一款美化注释的插件，可以根据不同种类的注释，显示不同的颜色，一目了然

2. Bracket Pair Colorizer / Bracket Pair Colorizer 2 ：这是一个找对象的插件，不是帮你们找对象啊，是帮你找到括号的另一半

3. Highlight Matching Tag ： 这也是一个找对象的插件，找的是标签的对象，当我点击一下 html 标签，配对的标签就会出现下划线来指示你谁和谁是一对。

4. Chinese ： 让你的 vscode 变成中文

5. Color Highlight ：用于给我们代码中的颜色进行高亮展示的插件

6. Community Material Theme / Material Theme ：修改编辑器的主题，内置很多种

7. Material Theme Icons ： 设置文件图标的

8. Error Gutters ： 报错的地方都有大红波浪线提示

9. Image preview ： 预览代码中图片的引用，鼠标移上去就会有小窗展示图片

10. indent-rainbow ： 彩虹缩进，就是把代码不同的缩进展示不同的颜色

11. Indenticator ： 当你点击一个缩进部分的时候，会出现一条白线来告诉你当前处于的缩进层级，可以更方便的查看代码结构。

12. Trailing Spaces ： 把尾随空格显示出来

13. VSCode Great Icons ： 修改文件图标的插件

14. AZ AL Dev Tools/AL Code Outline ： 用来梳理代码结构的插件

15. Code Runner ： 运行代码，可以在编辑器中查看结果

16. CodeIf ： 它通过搜索 GitHub, Bitbucket, GitLab 来找到真实的使用变量名，为你提供一些高频使用的词汇。使用时只需要选中变量名，然后 右键 选择 CodeIf 就可以跳转到网页，显示候选命名。

17. Color Info ： 查看颜色详细信息的插件，可以小窗口显示颜色值

18. Code Spell Checker ： 检查代码中单词拼写是否正确，当单词不正常的时候，就会在下方出现波浪线进行提示，还可以自定义词典，忽略某个单词的检查等

19. Debugger for Chrome ： 这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，安装以后，无需打开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox，Debugger for Microsoft Edge等

20. Git History ： 右键单击文件选择 Git：View File History 来以列表的形式查看所有的提交记录。

21. GitLens — Git supercharged ： 这个也是跟 git 相关的插件，功能比上一个要强大一些。可以看到上一次 git 提交的记录。

22. LeetCode ： 可以在 vscode 中刷算法题的

23. Local History ：本地代码的修改记录。通常我们写错代码了可以撤销，但是撤销完以后再修改，想要取消撤销就难了。有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比

24. open in browser ： 在浏览器中打开 html 文件

25. Partial Diff ： 选中一代码，右键 Select Text for Compare ，选中另外一部分代码，右键Compare Text with Previous Selection即可

26. Postcode ： 在 vscode 里面使用 postman 

27. Project Manager ： 项目管理器

28. Quokka.js ： 实时显示代码的运行结果，使用方法请跳转链接

29. Auto Import - ES6, TS, JSX, TSX ：  自动导入相关语法

30. Auto Rename Tag ： 自动修改标签名

31. change-case ： 快速切换变量格式

32. CSS Peek ： 可以通过点击类名迅速定位到样式的定义

33. ECMAScript Quotes Transformer ： 用于 模板字符串 和 普通字符串拼接 的相互转化

34. embrace ： 快速的在选中代码两边添加各种引号、括号，不用来回移动光标

35. File Utils ： 创建，复制，移动，重命名，删除文件和目录的便捷方法

36. javascript console utils ： 这是一款快速生成 console.log 的插件。使用方法非常简单， 选中变量，然后按 ctrl + shift + L 就可以生成了。需要删除的时候按 ctrl + shift + D 即可删除

37. json2ts ： 自动把 json 格式转成 ts 的类型，复制 json 之后按 ctrl + alt + v 即可

38. koroFileHeader ： 自动添加 头部注释 和 函数注释 的插件

39. Path Intellisense ： 引入文件的时候，路径自动补全。

40. Npm Intellisense ： 导入 npm 包的时候，智能提示。

41. px to rem & rpx (cssrem) ： 自动换算单位的插件。

42. Beautify ： 用来代码格式化的

43. ESLint ： 代码检查，不符合规范的就会跟你报错，或者警告

44. Prettier - Code formatter ：代码格式化插件

45. vetur / volar ： volar 是跟 vue3 更配的，功能也能多

46. Live Server ： 一个具有实时加载功能的小型服务器，可以使用它来破html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果