React Typescript template's ESLint configuration doesn't correctly ignore `dist` directory

simonlary commented 2 months ago

Describe the bug

The ESLint configuration in the React Typescript template has a ignores: ['dist'] line in it, but ESLint still scans and lints files in the dist directory.

The problem is not immediately visible since the only included files are .ts and .tsx files and you usually don't have those types of files in your dist output, but if you add .js/.jsx files to the files to the ESLint configuration the linting fails when after you have built the app.

This is also a pretty big issue for projects with big dependencies since even without adding .js/.jsx files to the configuration, ESLint still scans those files in some way which slows down the linting process a ton and can even make Node.js run out of memory.

Reproduction

https://stackblitz.com/edit/vitejs-vite-lcggzf

Steps to reproduce

npm run lint works at first.
Run npm run build
npm run lint fails with 1224 errors in the dist/index-f40OySzR.js file.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.4.0 => 5.4.0

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 2 months ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-lcggzf (Open reproduction)

simonlary commented 2 months ago

No idea if that's the right way to fix the problem, but moving the ignore field up seems to work? 🤷

export default tseslint.config(
  {
    ignores: ['dist'],
  },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  }
)

bluwy commented 2 months ago

Putting ignores in it's own object is a way to tell ESLint to apply it to all configs by default, and I agree the template could probably set that as a default instead. Feel free to send a PR to fix this for the react and react-ts templates!

vitejs / vite