create-react-app Make ESLint configuration flexible

3duebb1j  于 2个月前  发布在  React
关注(0)|答案(6)|浏览(43)

你的提案是否与问题相关?

在CRA中设置ESLint总是一个痛点。大部分时间,一切似乎都运行得很好,直到我运行像eslint 'src/**/*.js'这样的单独的lint检查命令时,我意识到CRA返回的eslint结果是不完整/损坏的,主要原因是CRA正在为某些与eslint相关的包修复版本,例如@typescript-eslint/parser。到目前为止,我的解决方法是使用像cracocraco-eslint-webpack-plugin这样的工具来替换CRA中的整个eslint模块,这很hacky但对我来说效果很好。正如我们都知道的那样,使用这种工具会导致问题。

你希望提出的解决方案是什么?

使eslint配置更加灵活,不要默认包含默认的eslint设置/包。我知道这样会导致问题,但目前的eslint设置有问题,让我们让开发者来处理这个问题。

你考虑过的替代方案是什么?

至少不要像@typescript-eslint/parser等那样修复eslint包。

其他上下文

j7dteeu8

j7dteeu81#

如果你使用Yarn,可以使用resolutions部分来强制指定一些包版本。你可以使用它来升级eslint依赖项。

smtd7mpg

smtd7mpg2#

我认为CRA应该覆盖.eslintrc文件中的react-script配置。

kmynzznz

kmynzznz3#

如果你使用Yarn,可以使用resolutions部分来强制指定一些包版本。你可以使用它来升级eslint依赖项。
再次强调,只有在我们使用yarn的情况下才会出现这个问题😕

ftf50wuq

ftf50wuq4#

@chungweileong94 请问你分享一下你的craco设置是如何实现这个功能的?这可能会在找到真正解决方案之前派上用场。

fzwojiic

fzwojiic5#

@chungweileong94 请问你能否分享一下你的craco设置来实现这个功能?这可能会在找到真正解决方案之前派上用场。
我没有一个很好的仓库来展示我的craco设置,但我可以和你分享我当前的craco.config.js

/* eslint-disable import/no-extraneous-dependencies */
const CracoAlias = require('craco-alias');
const FastRefreshCracoPlugin = require('craco-fast-refresh');
const CracoESLintWebpackPlugin = require('craco-eslint-webpack-plugin');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.extend.json',
      },
    },
    {
      plugin: FastRefreshCracoPlugin,
    },
    {
      plugin: CracoESLintWebpackPlugin,
      options: {
        skipPreflightCheck: true,
        eslintOptions: {
          files: 'src/**/*.{js,ts,tsx}',
          lintDirtyModulesOnly: true,
          emitWarning: true,
        },
      },
    },
  ],
};

请注意,目前craco是only supported CRA 3

xyhw6mcr

xyhw6mcr6#

不是真的了@chungweileong94 :)我们今天早上发布了https://www.npmjs.com/package/@craco/craco/v/6.0.0,它支持CRA 4🥳🥳

相关问题