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

11,610 阅读6分钟

协同开发过程中,不同的编码习惯写出的代码,差异很大。日常维护代码或者修复bug的时候时候,看各种风格的代码,影响效率不说,还有可能改出低级问题。目前我们的项目还没有代码规范,我决定要做点改变,于是考虑使用 ESlint 来做代码规范检查。

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

预测获得的收益:

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

预期风险:

担心整个项目添加了 ESLint,其他同事冒火,因为是多页面应用,在项目根目录下做了配置,新需求可以使用新配置,老项目可以自行选择要不要改一轮eslint的报告提示,这次给我们的 Vue2.x 项目配置了 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

打开 webpackconfig 配置文件配置:

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-eslintvue-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/essentialplugin:vue/essential 的具体规则可以访问eslint-plugin-vue官网。

参考

JS Linter 进化史

最后

很多学习 Vue 的小伙伴知识碎片化严重,我想整理出系统化的一套关于Vue的学习系列博客。在自我成长的道路上,也希望能够帮助更多人进步。

不看后悔,Vue进阶系列

都看到这里了,赶紧关注 MiaoMiao、点赞、评论留言啦~