工欲善其事必先利其器，整理一套好用的开发插件，就像是工匠在打磨自己的工具，johh要有自己的装备。
就算是差生也要文具多呢，出门在外，怎么能不整理一套属于自己的插件套装呢。
正文
以前整理过一套，但是现在毕竟是VUE3的时代了，以前整理的那一套多少有点落伍。
所以，根据新的开发习惯，重新整理一套。
通用
必装，常规的开发插件，前端开发必装。
Chinese (Simplified) Language Pack for Visual Studio Code
工具的简中插件，早年很多人非得说要适应英语，我的评价是，别逞能了，是中国人肯定还是看中文来的亲切
vscode-icons
给不同的文件对应的icon，让开发者更形象的记住所有的文件。不过，你如果只记文件后缀的话，或许不需用。
open-in-browser
在浏览器打开当前文件，几乎是传统页面独立开发的必备工具，如果你喜欢用vscode手撸html的话，那这确实是个不错的插件。
不过，为什么不直接问问神奇的webstorm呢？
Git Graph
VScode用的图形化git管理插件有不少，Git Graph和Git History都可以，二者随便选一个都可以。
GitLens — Git supercharged
可以在行内提示本行代码由谁提交，非常便利的git版本排查管控插件。
开发
必装，无论用什么框架都不影响。
Auto Close Tag
html自动闭合标签
Auto Rename Tag
html辅助修改标签，可以辅助修改闭合标签，省的开发者前后都要改一遍
Color Info
当您将鼠标悬停在CSS颜色上，会提示颜色信息
Bracket Pair Color DLW
函数方法括号颜色加深，清亮的颜色可以帮你在眼瞎的回调函数中增加发现BUG的几率，比原版的提示效果好不少
提示
必装，这些工具算是大浪淘沙留下来比较实用的提示插件。
Path Intellisense
智能路径提示，提示文件中的引用路径，必用的路径提示插件
SVG Viewer
svg预览工具，可以右键选中，预览项目中的svg，如果项目中有很多SVG的icon，那么，这个插件就是很有必要的。
filesize
可以告诉你写的文件有多大，虽然我们的代码终归会成为屎山，但是我们尽量还是要控制啊（笑）
Element Plus Helper
选择性安装，个人因为公司项目安装，此插件适用于 Vue Admin Plus、Vue Shop Vite 等基于 element-plus 开发的项目
格式
选择性安装，我个人是习惯这套代码格式化+检测辅助，不过这套插件推荐根据项目习惯而选择性安装的，并非是必须安装的。
ESLint
检测js标准的工具，只是一个检测和提示插件
Prettier - Code formatter
自定义代码格式化工具，是用来做格式化配置的，建议配合上边的Eslint标准使用，这是一个格式化插件
HTML+CSS
传统的html和CSS的开发提示支持，这套提示插件现在似乎已经被vscode内置
HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式，新版已经支持scss文件检索，也支持vue。
HTMLHint
HTML格式提示，HTMLHint 工具内置 23 条规则，可以对 HTML 代码文件进行静态代码检查，从而提高 HTML 代码编写的规范和质量。
VUE2
如果主要以vue3开发为主的话，以下这套开发插件可以避免，选择性安装。
这套插件和vue3的相关插件有一定的冲突，如无VUE2项目的开发需求，则没必要装这些插件。
Vetur
主要是为vue提供快捷语法提示，非常好用，但是不建议使用作为格式化工具
Vue 2 Snippets
基于最新的 Vue 官方语法高亮文件添加了语法高亮，并且依据 Vue 2 的 API 添加了代码补全
Vue Peek
必装，即便是vue3里边，也可以装这个插件，用于查找vue组件文件
VueHelper
vue代码提示插件，包括了vue2所有api，vue-router2和vuex2的代码提示。
VUE3
选择性安装，如果Vue3开发的倾向比较多，那么就用这套插件。
Vue VSCode Snippets
- 提供 Vue 3 相关的代码片段，方便快速输入常见代码结构。
- 支持 Vue 组件选项、指令、生命周期等。
Vue - Official
- 提供 Vue 文件的语法高亮。
- 支持 Vue 文件的智能感知和自动完成。
- 提供了 Vue 文件的格式化工具。
结语
本篇文档并未有任何参考，纯粹是自己这几年开发整理出来的经验，因为个人擅长使用vue相关，所以本篇的工具更倾向于vue。
如果以后用react的话，我会考虑使再用react整一套。