diff --git a/packages/create-vite/template-react-ts/README.md b/packages/create-vite/template-react-ts/README.md index 7515059c254d03..7959ce4269342e 100644 --- a/packages/create-vite/template-react-ts/README.md +++ b/packages/create-vite/template-react-ts/README.md @@ -12,23 +12,31 @@ Currently, two official plugins are available: If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: ```js -export default tseslint.config({ - extends: [ - // Remove ...tseslint.configs.recommended and replace with this - ...tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - ...tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - ...tseslint.configs.stylisticTypeChecked, - ], - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, +export default tseslint.config([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + // Other configs... + + // Remove tseslint.configs.recommended and replace with this + ...tseslint.configs.recommendedTypeChecked, + // Alternatively, use this for stricter rules + ...tseslint.configs.strictTypeChecked, + // Optionally, add this for stylistic rules + ...tseslint.configs.stylisticTypeChecked, + + // Other configs... + ], + languageOptions: { + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + // other options... }, }, -}) +]) ``` You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: @@ -38,20 +46,24 @@ You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-re import reactX from 'eslint-plugin-react-x' import reactDom from 'eslint-plugin-react-dom' -export default tseslint.config({ - extends: [ - // other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, +export default tseslint.config([ + globalIgnores(['dist']), + { + files: ['**/*.{ts,tsx}'], + extends: [ + // Other configs... + // Enable lint rules for React + reactX.configs['recommended-typescript'], + // Enable lint rules for React DOM + reactDom.configs.recommended, + ], + languageOptions: { + parserOptions: { + project: ['./tsconfig.node.json', './tsconfig.app.json'], + tsconfigRootDir: import.meta.dirname, + }, + // other options... }, }, -}) +]) ``` diff --git a/packages/create-vite/template-react-ts/eslint.config.js b/packages/create-vite/template-react-ts/eslint.config.js index 092408a9f09eae..d94e7deb72c90f 100644 --- a/packages/create-vite/template-react-ts/eslint.config.js +++ b/packages/create-vite/template-react-ts/eslint.config.js @@ -3,26 +3,21 @@ import globals from 'globals' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' import tseslint from 'typescript-eslint' +import { globalIgnores } from 'eslint/config' -export default tseslint.config( - { ignores: ['dist'] }, +export default tseslint.config([ + globalIgnores(['dist']), { - extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactHooks.configs['recommended-latest'], + reactRefresh.configs.vite, + ], 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 }, - ], - }, }, -) +]) diff --git a/packages/create-vite/template-react/eslint.config.js b/packages/create-vite/template-react/eslint.config.js index d979e984076860..cee1e2c788d908 100644 --- a/packages/create-vite/template-react/eslint.config.js +++ b/packages/create-vite/template-react/eslint.config.js @@ -2,13 +2,17 @@ import js from '@eslint/js' import globals from 'globals' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' -import { defineConfig } from 'eslint/config' +import { defineConfig, globalIgnores } from 'eslint/config' export default defineConfig([ - { ignores: ['dist'] }, + globalIgnores(['dist']), { files: ['**/*.{js,jsx}'], - extends: [js.configs.recommended], + extends: [ + js.configs.recommended, + reactHooks.configs['recommended-latest'], + reactRefresh.configs.vite, + ], languageOptions: { ecmaVersion: 2020, globals: globals.browser, @@ -18,17 +22,8 @@ export default defineConfig([ sourceType: 'module', }, }, - plugins: { - 'react-hooks': reactHooks, - 'react-refresh': reactRefresh, - }, rules: { - ...reactHooks.configs.recommended.rules, 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], }, }, ])