在vscode中统⼀vue编码风格的⽅法
vetur 很多⼈知道，但在 vscode 下没办法格式化 .vue ⾥的 html, js 很是头疼，代码风格⽆法统⼀。
所以不少⼈直接拆分开，然后在 .vue 中引⼊，虽然⽅法很好，但这有违 .vue 单⽂件组件的初衷。
本⽂详细介绍 vscode 下使⽤ vetur + prettier + eslint 来统⼀ vue 编码风格。
vetur 插件
vetur 经过多个版本迭代，算是⽬前 vscode 下最好⽤的 vue 插件了，甚⾄⽀持 ts, webpack alias 等特性。
但有⼏个功能不是直接⽀持，需要⼿动配置，⽽且有⼏个功能需要其他插件配置后才能配合他完成。
这就有点⿇烦了，新⼿同学们往往就是死在这⾥。
1. 配置 eslint
prettier 覆盖 vscode 默认格式化快捷键，但没有针对 eslint 配置进⾏格式化，所以需要单独配置⽤户设置开启。
到⾸选项 -> 设置菜单，在右侧⽤户配置中添加 "prettier.eslintIntegration": true 开启 eslint ⽀持。
⾄此，可以对 js ⽂件采⽤ eslint 规范进⾏格式化了，但 .vue ⽂件还不⾏，因为他不认识这是个什么东西。
在⽤户设置中添加如下配置，以⽀持 .vue ⽂件。
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
现在 eslint 认识 vue 了，但这只是 eslint 认识，prettier 依然不认识这是什么东西。
所以我们要加上 "eslint.autoFixOnSave": true 配置，在保存⽂件时，⾃动fix⾥⾯的js代码。
2. 配置 prettier
虽然 eslint 可以处理 vue ⽂件了，但却跟 prettier 的格式化冲突，因为 prettier 不知道这是什么东西。
安装了 vetur 插件后，prettier 知道 .vue 原来是⼀个 html 格式⽂件的，但依然没办法很好的格式化。
PS：⽬前 vetur 不⽀持 prettier 的 eslint。
因为 html 包括了 html+script+style 3部分，prettier 只能采⽤默认的格式化规范去格式化，不⽀持eslint，⽽且默认也不格式化html。
刚才开启的 "prettier.eslintIntegration": true 只是针对 .js ⽂件的，⽽不是针对 .vue ⽂件。
所以当你格式化 .vue ⽂件时候，stript 部分可能会跟你的 eslint 风格不⼀致，你需要单独配置。
例如我的eslint 规范，字符串单引号，对象末尾项也有逗号。
// 强制单引号
"prettier.singleQuote": true,
// 尾随逗号
"ailingComma": "all",
如果你是双引号，⽽且不加末尾逗号的，就不必配置了。
或者你觉得⽆伤⼤雅，也不⽤配置这个，反正保存时 eslint ⾃动fix了。
3. 配置 vetur 对 html 的格式化
因为 vetur 就是把 .vue 中的 html+script+style 3部分拆分，然后交给对应的语⾔处理器去处理。
例如:
html 可以是 html，也可以是 pug, jade 等。
script 可以是 es5, es6, ts, coffee。
style 可以是 css, less, sass, postcss 等。
除了 html 部分，其他都默认采⽤ prettier 格式化。
如果需要 html 的格式化，则需⼿动配置。
// 使⽤ js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折⾏对齐
"wrap_attributes": "force-aligned",
}
}
完成收⼯
⾄此，配置完成，完整配置如下：
{
// 强制单引号
"prettier.singleQuote": true,
// 尽可能控制尾随逗号的打印
"ailingComma": "all",
// 开启 eslint ⽀持
"prettier.eslintIntegration": true,
// 保存时⾃动fix
"eslint.autoFixOnSave": true,
/
/ 添加 vue ⽀持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 使⽤插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
/
/ 格式化插件的配置
"vetur.format.defaultFormatterOptions": {html文件格式化
"js-beautify-html": {
// 属性强制折⾏对齐
"wrap_attributes": "force-aligned",
}
}
}
现在你可以在 .vue 中格式化 html+js+css 了。
但 js 部分格式化不是根据 eslint 格式化的，上⾯有解释。
js 部分只能采⽤ prettier 默认格式，然后保存的时候⾃动 fix，来达到 prettier+eslint 的效果。
⼩结
主要解决了 prettier 不格式化 .vue 内的 js 问题，以及 prettier 格式化时跟 eslint ⾃动 fix 风格冲突问题。当然，prettier格式化和 eslint的fix 有本质区别，但 prettier + ⾃动fix，就完美了。
对于 .js 来说，prettier 开启 eslint ⽀持，直接完美。
但 .vue 只能这样配置了，因为⽬前 vetur 也没⽀持，官⽹只给了这个解决⽅案。
或许之后就⽀持了呢。
其他插件推荐
1. Auto Close Tag
2. Auto Rename Tag
3. Bracket Pair Colorizer
4. Code Runner
5. Document This
6. EditorConfig
7. ESLint
8. gitignore
9. GitLens
10. Guides
11. Import Cost
12. npm intellisense
13. Path Autocomplete
14. Prettier
15. Settings Sync
16. TODO Highlight
17. Vetur
18. vscode-icons
我就不⼀⼀解释了。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。