【vue系列】 vue2.0 项目配置 ESLint

协同开发过程当中，不一样的编码习惯写出的代码，差别很大。平常维护代码或者修复bug的时候时候，看各类风格的代码，影响效率不说，还有可能改出低级问题。目前咱们的项目尚未代码规范，我决定要作点改变，因而考虑使用 ESlint 来作代码规范检查。

考察了ESlint的官方网站和一些技术贴，决定先给咱们其中的一个 Vue2.0 项目配置 ESLint。在配置 ESLint 过程当中走了一些弯路，把配置过程记录下来，方便往后查看。

预测得到的收益：

• 项目编码风格统一，师出一人；
• 开发过程当中修复语法错误，减小潜在 bug；
• 规定规范编码，减小代码冗余，提升代码质量；

预期风险：

担忧整个项目添加了 ESLint，其余同事冒火，由于是多页面应用，在项目根目录下作了配置，新需求可使用新配置，老项目能够自行选择要不要改一轮eslint的报告提示，此次给咱们的 Vue2.0 项目配置了 ESLint 也给团队作点贡献。

配置ESLint

咳咳，配置流程来了。

1. 安装 eslint

既然要用 ESLint ，就要安装它，经过命令： cnpm I eslint -D 安装。

2. 初始配置 eslint

eslint 安装好以后，运行 eslint —init命令作些简单配置，咱们能够选择咱们须要的检测的环境、文件类型等等。这步完成，在项目根目录下会生成一个 eslintrc.js 文件。

3. 安装 eslint-loader

咱们的项目须要webpack来编译，须要对应的loader，安装 eslint-loader，运行命令 cnpm I eslint-loader -D。

若是有 command not found: eslint 的报错提示，能够运行 ./node_modules/.bin/eslint --init 来进行eslint配置化安装

4. 配置 webpack

打开 webpack 的 config 配置文件配置：

obj.module = {
    rules: [
        // ...
        { 
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [ path.resolve(commonDir, '../index.js'), resolve('./pages'), resolve('./components')], // 
            options: {
                formatter: require('eslint-friendly-formatter')
            }
        }
    ]
};
复制代码

5. 安装 eslint-friendly-formatter

eslint-friendly-formatter 这个模块是为了方便本地规范检查代码。记得运行 cnpm i eslint-friendly-formatter -D 安装上。

6. 安装 babel-eslint

操做到这里关于 eslint 的基本配置就完成了，把项目跑起来，咿居然有 parset 的报错，说最新的eslint解析有问题。查询资料是说须要 babel-eslint，按依赖安装的方式安装上。

7. 安装 eslint-plugin-vue

Vue.js 的官方 ESLint 插件： eslint-plugin-vue ，这个插件容许 咱们使用 ESLint 检测 .vue 文件的 <template> 和 <script>，有助于实时检测代码。 把这个插件安装上，最终的 .eslintrc.js:

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "parser": 'babel-eslint',
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};
复制代码

配置参数：

• root 为true根配置文件，不然会按照目录树向上搜索
• env 执行环境
• extends 对基础配置进行扩展，能够配置共享配置包 eslint-config-airbnb等。配置包须要安装。
• globals 指定全局变量，无视 no-undef 规则
• parserOptions 语法解析器选项
• plugins 插件 ，插件命名规范是 eslint-plugin- 为前缀
• rules 校验规则

8. 配置小结

• 须要安装的依赖有

cnpm i eslint eslint-loader eslint-friendly-formatter babel-eslint  eslint-plugin-vue  -D
复制代码

• webpack 配置
• .eslintrc.js 配置

配置完事，项目跑起来一堆的报错，来来来，💃开始自我折磨吧。经历磨练才能写出更优雅更规范的代码。看着页面很少，花了几个小时来处理 ESLint 的警告和报错。😓

配置问题

Use the latest vue-eslint-parser

在eslint-plugin-vue官网看到关于这个问题的解释和解决方案:

eslint-plugin-vue 里的大多数规则都须要 vue-eslint-parser 来解析 template 的AST， 然而 babel-eslint 和 vue-eslint-parser 在解析上有冲突，解决办法是把 "parser": "babel-eslint", 移入到 parserOptions 内。

- "parser": "babel-eslint",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "babel-eslint",
      "sourceType": "module"
  }
复制代码

疑问

此次配置ESLint，留下了一些疑惑，得空扒源码吧。

• eslint 是如何检查代码的？
• eslint-loader 都处理了什么？
• 为何须要 eslint-friendly-formatter？
• 为何用 babel-eslint，它是怎样工做的？
• 为何须要 eslint-plugin-vue？

1. ESLint 是如何检查代码的

出于对这个问题的疑惑，去查了一些资料，了解了 JS Linter 进化史。ESLint 的核心诉求是将代码解析与代码检查逻辑分开，支持自定义规则，每一个规则是一个插件，超强的开发能力让ESLint变的更好用。

引用JS Linter 进化史的一段话：

ESLint 核心部分专一于配置生成、规则管理、上下文维护、遍历 AST、报告产出等主流程。目前 ESLint 支持自定义的解析器、规则插件、预编译插件、结果报告，它更像是一个平台，对核心的流程设定约束，并开放各方面的能力，从而适应复杂多变的实际场景。

2. 为何须要 eslint-loader

eslint-loader 的做用是让 webpack 能够处理eslint。

3. 为何须要 eslint-friendly-formatter

看 eslint-friendly-formatter介绍的时候，该插件的做者说了下面这段话：

大概是讲，他使用eslint的时候，发现eslint的报告提示在命令行中不友好，他不能在命令行中直接点击跳转到报错的代码处，没有记录报错的行列，对应的报错提示相关文档也不方便直接查看。因而他写了这个插件来处理以上问题。

如今这个插件被 eslint 官方推荐了。

4. 为何用 babel-eslint，它是怎样工做的

一般状况下 eslint 使用默认的解析器 babel。可是 eslint 自己不能检测实验阶段的语法，ESNext 的不少实验阶段的语法浏览器厂商支持了，开发者也在用。恰好 eslint 容许使用自定义解析器，因此就有了 babel-eslint 插件来处理这个事。

babel-eslint 导出了 eslint 可使用的AST。

AST 是 Abstract Syntax Tree（抽象语法树）

5. 为何须要 eslint-plugin-vue

Vue 单文件组件不是普通的 Javascript，不能使用默认的解析器。因此不得不有了 eslint-plugin-vue 用于对 template 和 <script> 进行解析生成特定的加强的 AST。

能够对比着 vue风格指南看。目前咱们使用的 优先级A：必要的 的规范，即 plugin:vue/essential 。plugin:vue/essential 的具体规则能够访问eslint-plugin-vue官网。

参考

JS Linter 进化史

最后

不少学习 Vue 的小伙伴知识碎片化严重，我想整理出系统化的一套关于Vue的学习系列博客。在自我成长的道路上，也但愿可以帮助更多人进步。

不看后悔，Vue进阶系列

• 【vue-进阶】vue-router源码分析
• 【vue-进阶】深刻理解Vuex
• 【vue-进阶】你不知道的 vue-devtools
• 【vue-进阶】vue 和 echats 结合的春天，vue插件vechart
• 【vue-进阶】优雅地用Vue生成动态表单
• 【vue-进阶】 Vue2.0 项目配置 ESLint
• 【vue进阶】vue2.0 项目配置 Mocha 单元测试

都看到这里了，赶忙关注 MiaoMiao、点赞、评论留言啦～