为eject后的create-react-app配置ESLint

Dean 发布于2019-08-21 17:53 / 447人阅读

摘要：一开始我以为是的问题，然后重新手写了一些配置依然会报错，证明不是的问题。规则真的很严格。配置问题按照的文档默认是，按照说明应该是不会阻止。

问题

项目一开始使用的是create-react-app创建的，配置的ESLint是用的AlloyTeam的eslint-config-alloy/react，默认配置已经很合理了，并且每条配置都有相应的说明，只需要再根据个人喜好修改一些rule即可，我个人修改的.eslintrc.json配置如下

{
    "extends": [
        "eslint-config-alloy/react"
    ],
    "globals": {
        // 这里填入你的项目需要的全局变量
        // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
        //
        // jQuery: false,
        // $: false
    },
    "rules": {
        "indent": [
            "warn",
            2,
            {
                "SwitchCase": 1,
                "flatTernaryExpressions": true
            }
        ],
        "semi": [
            "error",
            "never"
        ],
        "react/jsx-indent": [
            "warn",
            2
        ],
        "react/jsx-indent-props": [
            "warn",
            2
        ],
        "no-unused-vars": [
            "warn",
            {
                "vars": "all",
                "args": "none",
                "caughtErrors": "none"
            }
        ]
    }
}

但是在eject之后运行npm start后会直接报错

思考

按理说，eject前后配置不变，只不过是将配置弹出，npm start 应该可以直接运行，但是却报了ESLint的错误。

一开始我以为是eslint-config-alloy/react的问题，然后重新手写了一些配置依然会报错，证明不是eslint-config-alloy/react的问题。google之后在一个issue发现：

By default Eslint errors will raise webpack errors unless you change the config as shown above.

也就是说，ESLint的会在发现error级别错误的时候触发webpack报错，导致编译失败。

但是为什么在eject之前能通过审查的代码在eject后就遇到error报错了呢？

简单粗暴我们直接看create-react-app文档中关于ESLint的部分

If you want to enable even more accessibility rules, you can create an .eslintrc file in the root of your project with this content:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

However, if you are using Create React App and have not ejected, any additional rules will only be displayed in the IDE integrations, but not in the browser or the terminal.

现在回想一下create-react-app中ESLint是如何工作的，终端有warning/error的信息，但是这个打印出来的信息的其实并不是依照eslint-config-alloy/react规则，而是create-react-app的默认规则。在集成在编辑器（我用的VSCode）中的红色波浪线功能则是根据eslint-config-alloy/react规则显示的。

但是在eject后，编译与波浪提示都根据eslint-config-alloy/react规则进行代码审查，所以eject前根据默认规则审查通过的代码在eject后并不能通过eslint-config-alloy/react的审查报了错。（eslint-config-alloy/react规则真的很严格）。

ESLint的error该不该直接退出

在这里还有一个设计思路与使用思路上的冲突：ESLint默认error级别直接报错退出，是因为将某种rule的错误等级定为error时，当出错代码触发了这个rule，就意味着程序根据规则来说已经不对了，就不需要再往后进行编译等等了。所以代码必须先过了ESLint这关（也就是用户自己对代码定下的规则），才能放到babel里去进行编译。（具体的可以看zakas大神关于这个问题的讨论）

（我个人之前本来比较喜欢error时不退出，然后选择性的去修改部分有问题的代码，有些报错的代码就不理会等重构的时候再说。但是仔细一想其实违背了ESLint的思想，既然有warning和error的区分，那些不重要的error其实就应该定义为warning。）

eslint-loader配置问题

按照ESLint-loader的文档

failOnError (default: false)

Loader will cause the module build to fail if there are any ESLint errors.

failOnError默认是false，按照说明应该是不会阻止build。

ESLint-loader的作者也提到（不过远在2015年3月）

failOn* are off by default to avoid webpack to break the build for "just some linting issues". So you should not have any error/warning that break the build by default.

然而，实际上build依然失败，具体原因我也不清楚，有几个issue也在反应failOnError不起作用，我猜可能是ESLint-loader没能成功的配置ESLint，这个坑以后仔细研究一下再来填（逃。

解决方案 方案1

eslint-loader的作者给出的解决方案

Like I said, you can use emitWarning: true option to force all ESLint error/warning being reported as warnings

将emitWarning设为true就可以了，所有的error/warning信息都会打印出来，error也不会阻止编译，简单粗暴。

rules: [{
  enforce: "pre",
  test: /.jsx?$/,
  loader: "ESLint-loader",
  options: {
    emitWarning: true
  }
}]

方案2

遵照zakas大神的设计思路，报error的就阻止编译，改到通过为止，报warning的就打印出来，个人认为这才是正确遵照ESLint的使用方法。

方案3（粗暴）

将./node_modules/ESLint-loader/index.js中的

emitter(webpack.version === 2 ? new ESLintError(messages) : messages)

直接注释掉！不给ESLint传递任何错误信息，也不会返回错误码了，这样终端永远都是 0 errors 0 warnings（误），错误就只能通过编辑器的红线提示来看了。

tips

Also to note, the actual build still finishes and produces output. This only affects wrappers that would call webpack, such as webpack-dev-server (won"t automatically reload the browser if lint errors exist) or frontend-maven-plugin (will fail the maven build if lint errors exist).

这位仁兄提到了关于ESLint其实并不会阻止build，只是会在遇到error时阻止像webpack-dev-server这种服务器对浏览器的自动刷新。

参考

errors cause webpack to not build #23

MoOx/ESLint-loader

ESLint error causing Webpack to stop watching/building #168

Option to exit with success even if there are errors #2949

ESLint-loader with WebPack 2.2 #148

云服务器 GPU云服务器 eject ESLint create-react-app 为阿里云服务器配置域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90160.html

React项目笔记之create-react-app自定义ESLint配置文件

摘要：初始化项目使用创建项目此过程不做详解，然后运行使其暴露等配置文件自定义上述步骤并没有暴露脚手架封装的操作，为了使得项目统一规范化，添加操作是非常不错的选择关于其他的操作，请参见官网，本文主要针对限制规范配置。原博客地址：https://yezihaohao.github.io 前言了解eslint基础用法，若想更进一步了解其，请查阅官网以及相关资料(中文网) 若有问题请指出或加群...

Dogee 2019-08-20 15:25 评论0 收藏0
react+express项目

摘要：暴露所有内建配置，项目下会新增或对部分配置文件进行修改。开发环境开发时，前端项目和后端项目运行时端口端口不同，存在跨域问题。项目目录结构优化项目目录结构优化开发目录主要是目录，因此需要修改的目录主要是目录。 1 开发环境准备（windows） 1.1 安装nodejs和npm 1) 下载nodejs安装包：http://nodejs.org/en/download/ nodejs安...

Luosunce 2019-08-23 14:13 评论0 收藏0
在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

摘要：编码规范是独角兽公司内部的编码规范，该项目是上很受欢迎的一个开源项目，在前端开发中使用广泛，本文的配置规则就是以编码规范和编码规范作为基础的。更新时间：2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范前言为什么要使用 ESLint 在项目开发过程中，编写符合团队编码规...

Hujiawei 2019-08-23 14:55 评论0 收藏0
做一个基于react-scripts的脚手架

摘要：前言作为官方的脚手架是相当好用的。注意就是脚手架的核心配置代码。另一个是使用，用户通过增加修改配置。所以才有了今天的主题基于的脚手架，确切说应该是基于的脚手架。其中一定要填写。前言 create-react-app作为facebook官方的react脚手架是相当好用的。主要设计原理是将配置好的如Webpack，Babel，ESLint，合并到react-scripts这npm包中，用户就可以...

linkFly 2019-05-23 17:29 评论0 收藏0
create-react-app 源码学习（上）

摘要：这里通过调用方法方法主要是通过来通过命令执行下的方法。原文地址Nealyang/personalBlog 前言对于前端工程构建，很多公司、BU 都有自己的一套构建体系,比如我们正在使用的 def，或者 vue-cli 或者 create-react-app，由于笔者最近一直想搭建一个个人网站，秉持着呼吸不停，折腾不止的原则，编码的过程中，还是不想太过于枯燥。在 coding 之前...

MkkHou 2019-08-23 18:12 评论0 收藏0