使用create-react-app的自定义eslint配置

TL; DR;
使用react-app-rewired和react-app-rewire-eslint。

create-react-app aka CRA对于任何React项目都是一个很好的入门者,因为它包含了开始编写组件所需的一切。
您唯一要做的就是npm i -g create-react-app并通过create-react-app your-crazy-project初始化您create-react-app your-crazy-project
该项目的主要理念是“需要零配置”,这既是主要优点(对于初学者),也有缺点(对于高级“反应堆”)。

迟早您将需要自定义Webpack配置,或者像我一样,调整eslint规则。 但是,只要您想使用原始的react-scripts.就不能这样做react-scripts.

所以? 从官方文档中可以了解到,添加自定义配置的唯一方法是弹出项目。 但是弹出是一种单向解决方案。

幸运的是,在疯狂搜索之后,我发现了一个库,该库使我可以覆盖默认项目的配置部分,而无需破坏create-react-app

让我为您介绍react-app-rewired项目。

要使用自定义.eslintrc配置,需要四个简单的步骤:

  1. npm i -D react-app-rewired react-app-rewire-eslint
  2. 在项目根目录中,创建config-overrides.js文件,然后
  3. 编辑文件:
  //config-overrides.jsconst rewireEslint = require('react-app-rewire-eslint');
 module.exports =函数override(config,env){
 配置= rewireEslint(config,env);
 返回配置;
 } 

4.在package.json中,通过用react-app-rewired替换react-scripts编辑“ scripts”部分。 它看起来应该如下所示:

  “脚本”:{
  “ start”:“ react-app-wired开始”,
  “ build”:“ react-app-rewired构建”,
  “ test”:“ react-app-wired测试-env = jsdom”,
  “ eject”:“反应脚本弹出”
  }, 

当您运行npm start您应该看到在自定义.eslintrc配置中定义的警告/错误。