本文已参与「新人创作礼」活动，一起开启掘金创作之路。
大家好，我是CoderBin
前言
正所谓，工欲善其事，必先利其器。对于前端开发人员使用频率非常高的 Vscode（宇宙第一编辑器，不接受反驳👿）而言，插件就是战场的矛与盾。所以我整理出了目前正在用的30款插件Vscode插件，总有一款适合你😄 。
如果屏幕前的小伙伴有非常好用的插件，欢迎在评论区留言分享啦🌻
1. Chinese (Simplified) (简体中文)
第一个必须是中文汉化插件，vscode安装后默认是英文，所以为了方便使用，有必要进行汉化（英语好的自动忽略😜）
2. Auto Close Tag
可以自动补全 HTML / XML 结束标签（但某些不需要双标签的情况下不太好用）
3. Auto Rename Tag
重命名一个 HTML / XML 标签时，自动重命名配对的 HTML / XML 标签，很方便
4. CSS Peek
快速查看或定位该类名在css中的样式，注意，如果不生效，请重启Vscode
使用方法：按住ctrl键，将鼠标移动至类名处就会显示对应样式，点击类名就会跳转至css文件中的对应位置
5. Better Comments
让注释颜色更加丰富
使用方法：添加指定字符即可生效，某些需要做区分的情况，确实好用
6. Bookmarks
对某一行代码进行标记为书签，后续可以快速定位到该行代码。在阅读源码时非常好用！！
这里拿vue的源码做演示，只需右键书签-> 开关，然后书签就保存到了左侧书签栏中
7. Code Runner
一个可以让代码直接运行在终端的插件，在写 js 代码进行输出时，直接右键 "Run Code" 即可，非常好用（当然，也适用于其他语言）
8. any-rule
正则表达式大全，再也不用百度了一个个找了，直接右键点击 "正则大全" 即可选择所需的正则表达式，截止今天已经提供了83条正则
9. Easy LESS
编译 less 文件，当我们创建 less 文件并保存时，会自动生成 css 文件，这时只需要引入 css文件即可，后续只需要在 less 文件中编写 css 样式，都会更新到 css 文件中
10. open in browser
编写完html代码，直接右键打开浏览器进行预览
11. Live Server
用这个插件打开的页面，可以进行实时预览，无需手动刷新即可看到最新效果，巨好用！
12. Material Icon Theme
美化文件夹、文件，提高视觉体验~
13. Markdown Preview Enhanced
可以在Vscode当中编写 md文档，并且支持实时预览！直接右键即可选择预览
14. px2vw
将 px 单位转成 vw 的 VSCode 插件
15. Draw.io Integration
一个在Vscode中画各种流程图的插件
使用方式：创建 .drawio 文件即可
16. EditorConfig for VS Code
规范开发中的一些格式，就是由你自己来决定开发工具或者编辑器在格式化时对于内容的排版
17. ESLint
审查代码是否符合编码规范和统一的代码风格、是否存在语法错误
18. Prettier - Code formatter
一款格式化js、css代码插件。可配置化、支持多种语言、集成多数的编辑器、简洁的配置项
19. px to rem & rpx & vw (cssrem)
一个px转换rem的插件
20. Vetur
VSCode里安装Vetur可以将“.vue”文件中的语法进行高亮显示，Vetur不仅支持Vue中的template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass、TypeScript、Jade和Less等等。
21. ES7+ React/Redux/React-Native snippets
关于react的快速代码插件，只需要输入几个前缀，即可生成各种模板
例如，输入 rcc 快速生成类组件模板，简直解放双手！
22. Error Lens
这个插件能够在编写代码过程中，如果出现语法不正确等的错误，就会直接在错误的那一行代码旁显示错误信息
例如：
23. Time Master
时间大师，记录着你一天的编码情况
24. Project Manager
项目管理，可以对工程项目进行保存，方便快速查看
如图：直接点击即可打开项目，也可以右键新窗口打开
25. Path Autocomplete
@路径提示的插件，需要进行配置（自行百度~）
接下来分享几个我用过的好看的主题😍
26. Moonlight
整体色调更暗，适合凌晨工作者，本人正在使用的一款主题（Moonlight ll ltalic）
27. One Dark Pro
经典暗黑主题插件，相信很多小伙伴都是用过
28. Atom One Dark Theme
coderwhy同款主题插件，跟上一个蛮像的
29. Dracula Official
德古拉吸血鬼主题，个人觉得不错
30. Cobalt2 Theme Official
暗绿色调，用久了纯暗色的可以试试
往期推荐 💐 🌸 🌹 🌻 🌺 🍁
高阅读好文：
【2】Vue内置指令大全
【3】全面拥抱Vue3，Vue-Router4 快速上手指南！
每文一句：现在，我怕的并不是那艰苦严峻的生活，而是不能再学习和认识我迫切想了解的世界。对我来说，不学习，毋宁死。
本次的分享就到这里，如果本章内容对你有所帮助的话可以点赞+收藏。文章有不对的地方欢迎指出，有任何疑问都可以在评论区留言。希望大家都能够有所收获，大家一起探讨、进步！
