在 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 文件。

1
2
3
4
5
6
7
8

"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 规范，字符串单引号，对象末尾项也有逗号。

1
2
3
4

// 强制单引号
"prettier.singleQuote": true,
// 尾随逗号
"prettier.trailingComma": "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 的格式化，则需手动配置。

1
2
3
4
5
6
7
8
9

// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    // 属性强制折行对齐
    "wrap_attributes": "force-aligned",
  }
}

完成收工

至此，配置完成，完整配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

{
  // 强制单引号
  "prettier.singleQuote": true,
  // 尽可能控制尾随逗号的打印
  "prettier.trailingComma": "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": {
    "js-beautify-html": {
      // 属性强制折行对齐
      "wrap_attributes": "force-aligned",
    }
  }
}

现在你可以在 .vue 中格式化 html+js+css 了。
但 js 部分格式化不是根据 eslint 格式化的，上面有解释。
js 部分只能采用 prettier 默认格式，然后保存的时候自动 fix，来达到 prettier+eslint 的效果。

如果需要详细配置，可以访问 vetur 官方文档 https://vuejs.github.io/vetur

小结

主要解决了 prettier 不格式化 .vue 内的 js 问题，以及 prettier 格式化时跟 eslint 自动 fix 风格冲突问题。
当然，prettier格式化 和 eslint的fix 有本质区别，但 prettier + 自动fix，就完美了。
对于 .js 来说，prettier 开启 eslint 支持，直接完美。
但 .vue 只能这样配置了，因为目前 vetur 也没支持，官网只给了这个解决方案。
或许之后就支持了呢。

其他插件推荐

Auto Close Tag Auto Rename Tag Bracket Pair Colorizer Code Runner Document This EditorConfig ESLint gitignore GitLens Guides Import Cost npm intellisense Path Autocomplete Prettier Settings Sync TODO Highlight Vetur vscode-icons

我就不一一解释了。