Make ESLint configuration flexible

Is your proposal related to a problem?

Setting up ESLint is always a pain point in CRA. For most of the time, everything seems to work fine, right until I run a separate lint check command like eslint 'src/**/*.js', then I realize that the eslint result return by the CRA is incomplete/broken, and the root cause is mainly because of the CRA is fixing version for certain eslint related package, for instance, @typescript-eslint/parser. And so far, my workaround is to use tools like craco + craco-eslint-webpack-plugin to replace the entire eslint module in CRA, it’s hacky but works great for me. And as we all know things break by using tools like this.

Describe the solution you’d like

Make the eslint configuration even flexible, don’t include default eslint setup/packages by default. And yes I know, things will break, but it’s just problematic the current eslint setup, let us the developers handle the problem.

Describe alternatives you’ve considered

At least don’t fix the eslint package like @typescript-eslint/parser, etc.

Additional context

None

[patricklafrance]

Not true anymore @chungweileong94 😃 We released https://www.npmjs.com/package/@craco/craco/v/6.0.0 this morning which add support for CRA 4 🥳 🥳

[chungweileong94]

@chungweileong94 mind sharing your craco setup to accomplish this? That could come in handy until we have a real solution

I don’t have a good repo to represent my craco setup, but I can share with you my current 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,
        },
      },
    },
  ],
};

Do note that the craco is only supported CRA 3 at the moment.