Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify ESLint configuration #19594

Open
4 tasks done
Mikilll94 opened this issue Mar 6, 2025 · 3 comments
Open
4 tasks done

Simplify ESLint configuration #19594

Mikilll94 opened this issue Mar 6, 2025 · 3 comments
Labels
feat: create-vite create-vite package p2-nice-to-have Not breaking anything but nice to have (priority)

Comments

@Mikilll94
Copy link

Mikilll94 commented Mar 6, 2025

Description

When creating project from template React + TypeScript we got this ESLint config

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

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 },
      ],
    },
  },
)

I think we should simplify it to this version.

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  {
    ignores: ['dist'],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
  js.configs.recommended,
  tseslint.configs.recommended,
  reactHooks.configs['recommended-latest'],
  reactRefresh.configs.vite,
)

This updated version is also more compliant with docs for various packages, i.e.

Image
Image

https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks
https://github.com/ArnaudBarre/eslint-plugin-react-refresh

Suggested solution

Simplify ESLint config in templates

Alternative

No response

Additional context

No response

Validations

@bluwy
Copy link
Member

bluwy commented Mar 7, 2025

Probably it makes sense to wait for it to be supported in the JS variant too before doing that: #19524 (comment)

@Mikilll94
Copy link
Author

Probably it makes sense to wait for it to be supported in the JS variant too before doing that: #19524 (comment)

@bluwy ESLint now supports extends

@bluwy
Copy link
Member

bluwy commented Mar 14, 2025

Feel free to send a PR 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: create-vite create-vite package p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

No branches or pull requests

2 participants