前端工程化（1）：VSCode中编写Vue代码的最佳姿势网上有一大堆关于格式化vue代码的方法，但基本都配合使用了pre

网上有一大堆关于格式化vue代码的方法，但基本都配合使用了prettier格式化插件，相信捣鼓过的同学肯定会跟我一样都有一种感受：杂乱！

prettier插件在使用的时候需要与eslint配合使用，两者在一起使用的话不仅会产生冲突（你需要额外在prettier规则配置里配置上和eslint一样的规则），而且两者功能重叠（两者在一起工作的原理也是在eslint --fix以后再用prettier去格式化代码）。eslint --fix已经能帮你格式化出一套漂亮的vue代码，再用prettier就显得多此一举。

其实，要想统一并写出一手漂亮的vue代码，最简单直接的办法就是按照vue官方提供的vue风格指南，配合官方提供的配套的校验插件 eslint-plugin-vue，再在VSCode中安装vetur和eslint插件即可。

1. Vetur

vetur 是vue官方提供的支持vue编写风格的VSCode插件。具体的安装很简单，这里我就介绍几个vetur常用的功能：

vue 代码高亮

支持多种语言，包括但不局限于ts、coffee。

快速生成代码片段

当你新建一个vue文件时，你可以通过输入<vue快速生成如下代码：

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

或者通过输入<template、<script、<style，生成相应的html、script、style代码。

vetur还提供了更强大的配置自定义模板的功能，只需要在<WORKSPACE>/.vscode/vetur/snippets目录中新建.vue文件，然后重启vscode就能使用这些代码片段。具体用法可以参考customizable-scaffold-snippets。

使用缩写语法快速编写 html、css 等

vetur集成了 emmet 插件，比如输入div.a回车就变成<div class="a"></div>。emmet还有很多功能，想要了解更多的同学可以上emmet官网逛逛。

静态检查代码错误

能够静态的检测template、script、style中的语法错误。

格式化代码

vetur官方建议配合prettier来进行代码格式化，但本文并不采取prettier来进行代码的格式化，有兴趣的同学可以去浏览vetur官网。

智能提示

vetur集成了vue的语法，所以当你在编写一些vue具有的指令、事件或者生命周期等一切属于vue的语法时，都会对你进行智能化的提示，从而让你快速的编写出vue代码。

框架支持

vetur还对一些框架有支持，比如vue-router、element-ui等，能给这些框架提供自动补全属性的功能。

2. VSCode 中的 eslint

VSCode中的eslint插件将使用安装在当前打开的工作区文件夹中的eslint库，也就是会读取你当前项目的eslint配置信息。如果你的eslint配置是写在.eslintrc.js文件中，则VSCode中的eslint插件将会读取.eslintrc.js文件的配置信息来对你的代码做静态分析，并标记出不符合规范的代码片段。

安装完eslint插件以后，我们只需要在VSCode配置中设置保存自动修复即可：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

3. 代码中的 eslint

代码中不仅需要js的eslint还需要vue的eslint。

安装

npm install --save-dev eslint eslint-plugin-vue

eslint-plugin-vue这个插件的作用是能用eslint按照官方提供的风格指南来校验.vue文件的template和script里的代码。eslint-plugin-vue提供了一系列的规则供开发者们参考。

配置

根目录下新建.eslintrc.js文件，并写入：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    'plugin:vue/essential',
    '@vue/standard'
  ]
}

如果同一个目录下有多个配置文件，eslint只会使用一个。优先级顺序如下：

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

遇到项目内有多个层叠配置时，依然采用就近原则作为高优先级。

配合第二步，VSCode就可以按照vue风格指南对.vue文件的script片段进行eslint和vue风格指南静态校验。

虽然script片段统一了风格，但是每个人写template的风格也不一样，如果还想约束并校验template的风格，则将上述的配置修改为：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    'plugin:vue/essential',
    '@vue/standard'
  ]
}

当你修改保存时，VSCode就会对你代码里的template和script里的代码进行eslint自动修复。

这里推荐几个笔者觉得相比较vue官方可能让开发更舒适的几个规则：

module.exports = {
  rules: {
    'vue/html-self-closing': [ // 自定义组件校验自闭和，常规的html不校验
      2,
      {
        html: {
          normal: "never",
          void: "always"
        }
      }
    ],
    'vue/singleline-html-element-content-newline': 0, // 不要求标签中的内容另起一行
    'vue/no-unused-components': 1, // 警告引入但没有使用的组件
    'vue/max-attributes-per-line': [ // 模板标签属性大于4个才换行
      2,
      {
        singleline: 4,
        multiline: {
          max: 1,
          allowFirstLine: false
        }
      }
    ],
    'vue/attribute-hyphenation': 2, // 要求模板中使用短横线命令来访问 props
    'vue/this-in-template': ['error', 'never'], // 禁止在template中使用this访问属性
    'vue/no-side-effects-in-computed-properties': 0 // 允许在计算属性中对属性进行修改
  }
}

附上eslint的启用规则：

off或0 - 关闭规则
warn或1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
error或2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

4. VSCode 中的 stylelint

同VSCode中的eslint一样，stylelint也将会按照你工作区中的stylelint配置文件对代码中的样式做静态检查，并标记不符合规范的代码片段。

安装完stylelint插件以后，我们只需要在VSCode配置中设置保存自动修复即可：

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}

5. 代码中的 stylelint

安装

npm install -D stylelint stylelint-standard stylelint-scss

配置

根目录下新建.stylelintrc.js文件，并写入：

module.exports = {
  'extends': [
    // add more generic rulesets here, such as:
    'stylelint-config-standard',
    "stylelint-config-recommended-scss"
  ],
  plugin: ['stylelint-scss']
  rules: {
    "indentation": 2, // 缩进设为2
    "selector-pseudo-element-no-unknown": [ // 忽略对::v-deep的校验
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ]
  }
}

最后

本文的目的也是为了让用VSCode开发Vue的同学们不再被其他的插件（Prettier）搞得乱七八糟，只需要eslint和stylelint，不需要下载额外的格式化插件，也不需要额外的繁琐的配置，按照上述几步，就能很轻松的格式化出一套统一标准的Vue代码。