美文网首页
create-react-app(cra) 或者craco,会忽

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

作者: mudssky | 来源:发表于2022-05-20 23:41 被阅读0次

    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比较方便

    相关文章

      网友评论

          本文标题:create-react-app(cra) 或者craco,会忽

          本文链接:https://www.haomeiwen.com/subject/sdbqprtx.html