前端工程化（1）：VSCode中编写Vue代码的最佳姿势

网上有一大堆关于格式化vue代码的方法，但基本都配合使用了prettier格式化插件，相信捣鼓过的同学肯定会跟我一样都有一种感受：杂乱！prettier插件在使用的时候需要与eslint配合使用，两者在一起使用的话不仅会产生冲突（你需要额外在prettier规则配置里配置上和eslint一样的规则），而且两者功能重叠（两者在一起工作的原理也是在eslint --fix以后再用prettier去格式化代码）。eslint --fix已经能帮你格式化出一套漂亮的vue代码，再用prettier就显得多此一举。

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

第一步、Vetur

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

vue代码高亮

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

快速生成代码片段

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

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
复制代码

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

使用缩写语法快速编写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等，能给这些框架提供自动补全属性的功能。

第二步、VSCode中的eslint

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

安装完eslint插件以后，我们需要在VSCode配置中添加几个选项：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
], 
"eslint.autoFixOnSave": true 
复制代码

配置好这两个选项后，VSCode就能静态的对vue代码进行检查，并提示有不符合规范的地方，并且当文件保存时，将自动修复不符合规范的地方。

第三步、代码中的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:
    'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/html-self-closing': 'off'
  }
}
复制代码

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

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

module.exports = {
  extends: [
    ...,
    'plugin:vue/recommended'
  ]
}
复制代码

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

最后

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