定制小程序开发真的是被代码格式化搞烦了，定制小程序开发在网上抄答案，定制小程序开发但是发现大多数答案互相抄袭，还过时了。定制小程序开发所以只能狠下心自己搞定制小程序开发明白这些插件到底都什么用处。
定制小程序开发选取插件的标准：尽可能还在维护
举个例子，vue代码格式化推荐最多的两个格式化插件“beautify”和“prettier”，我两个都尝试了，一度觉得“beautify”好用，但是总感觉差点意思，然后对比了一下，发现“beautify”好久不更新了，再看“prettier”还在更新，果断选择“prettier”
开发必备插件
Vue Language Features (Volar)
刚开始不懂，看着网上的推荐，把和这个都下了，也不知道干啥的，查了资料终于知道，Volar为vue3开发，vetur主要是vue2，所以，这下知道选哪个了，而且他们不能共存。
这个插件主要功能就是vue3的代码高亮及语法提示
额外配置：
官方推荐使用
实测托管模式的代码提示比vs code自带的提示好一点。
Prettier - Code formatter
前面提到了，目前最热门的代码格式化工具。但是默认的配置不好看，需要配置：
- bracketSameLine 将>单独一行还是在最末尾
true的例子：<button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here</button>false的例子：<button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here</button>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- vueIndentScriptAndStyle 是否缩进 Vue 文件中的代码<script>和<style>标签，个人喜欢缩进的，所以这项填true
- tabWidth 缩进字符数，默认两个，我喜欢4个的
- printWidth设置行的长度，默认是80，如果不改，就会多很多没必要的换行，现在的屏幕都比较大了，设置个150。
所以总的配置如下：
全局配置的话，在
文件中添加：
"prettier.bracketSameLine": true, // 但是这一项无法被识别，所以是无效的 "prettier.vueIndentScriptAndStyle":true, "prettier.tabWidth": 4- 1
- 2
- 3
再项目中配置：
在项目的根目录创建文件“.prettierrc”，然后添加一下内容：
{ "bracketSameLine":true, "vueIndentScriptAndStyle":true, "tabWidth": 4, "printWidth":150}- 1
- 2
- 3
- 4
- 5
- 6
这样在项目中就可用了。其他配置可去官网看看。
PS：其他配置：
设置文件的默认格式化插件
以.vue文件为例，打开文件后，在空白处右键：
这样就可以了，这个设置仅针对.vue文件，其他文件也是同样的方式
PS：该插件也还有不满意的地方，比如链式调用他就全部换行，就不是很有必要，似乎没有配置支持配置这一项。只能用// prettier-ignore去忽略这一行的格式化了
设置保存文件时自动格式化
文件>首选项>设置，然后搜索“Format On Save”，将这一项勾上，然后保存文件时，就会自动格式化。
ESLint
代码规范提示插件，为了代码规范，得装上，不然被同行嫌弃
Path Intellisense
路径智能提醒，还是很有必要的，特别是对静态文件的引用时
HTML CSS Support
帮助写样式的
Bracket Pair Colorizer 2
给括号添加颜色，对多重括号的分辨有帮助，对其他语言也有效
Auto Close Tag
自动补充html 的tag
Auto Rename Tag
和上面那个一家的，这个自动重命名tag，就是修改其中一个tag，另一半也会跟着变。
npm
它作用于package.json。我主要用它来看看依赖的最新版本是什么，其他功能暂时觉得很鸡肋。
还可以 按F1之后输入npm执行命令，见