create-react-app(cra) 或者craco,会忽

2022-05-20  本文已影响0人  mudssky

create-react-app内置了eslint,但是却不能正确读取eslintignore文件。

react这么大的项目,竟然还有这么明显的bug。

因为我是在公司的项目上发现的这个问题 ,在node_modules 里面找到react-scripts 发现版本是3.4.1,不清楚新版本的cra是否修复了这个问题。

方案一 EXTEND_ESLINT=true

从StackOverflow上找到这个方法,但是对我没用。

可以参考这个帖子 https://stackoverflow.com/questions/42324618/eslintignore-is-ignored-by-create-react-app/45745206#45745206

据说cra某次提交修复了这个问题。可以从 env读取变量。

只要创建一个.env文件,然后加入下面一行。

#.env
EXTEND_ESLINT=true

这个env文件确实是生效的。

比如你在里面写上

PORT=3101

然后你执行yarn start 确实启动在3101端口了

但是EXTEND_ESLINT=true这个配置对我是不生效的

方案二 使用/* eslint-disable */ 放在文件开头,或者把要忽略的文件移动到public目录

这其实是4种忽略注释方式中的一种,public目录是因为eslint不会检查这个目录

但是这样项目里很多文件要加,就很蠢。我需要的是一种改动文件最少的方式。

01.关闭段落校验

/* eslint-disable */some code
some code
/* eslint-enable */

02.关闭当前行校验

some code // eslint-disable-line

03.关闭下一行校验

// eslint-disable-next-line
some code

04.关闭整个文件校验

/* eslint-disa

方案三 在craco.config.js里面进行配置

首先我们在.eslintrc.js里面配置ignorePatterns

比如:

module.exports = {
  root: true,
  extends: ['react-app'],
  ignorePatterns:['src/']
}

然后我们在craco.config.js里面进行引入。

const eslintConfig = require('./.eslintrc.js')
module.exports = {
  eslint: {
    // enable: false,
    enable: true,
    configure: {
      ...eslintConfig,
    },
  },
    ...
}

这样就可以了。

想要支持eslintignore也可以自己写js读取。但是我懒,所以直接配置ignorePatterns比较方便

上一篇下一篇

猜你喜欢

热点阅读