diff --git a/.pkgs/configs/eslint.js b/.pkgs/configs/eslint.js index 2a2f08a36..f458f2139 100644 --- a/.pkgs/configs/eslint.js +++ b/.pkgs/configs/eslint.js @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-deprecated */ import js from "@eslint/js"; import stylistic from "@stylistic/eslint-plugin"; import pluginDeMorgan from "eslint-plugin-de-morgan"; diff --git a/.pkgs/configs/eslint.ts b/.pkgs/configs/eslint.ts index 5bc6b431c..9953266a7 100644 --- a/.pkgs/configs/eslint.ts +++ b/.pkgs/configs/eslint.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-deprecated */ import js from "@eslint/js"; import stylistic from "@stylistic/eslint-plugin"; import pluginDeMorgan from "eslint-plugin-de-morgan"; diff --git a/README.md b/README.md index 8c1984fdc..bd45fdd7d 100644 --- a/README.md +++ b/README.md @@ -69,40 +69,42 @@ npm install --save-dev typescript-eslint @eslint-react/eslint-plugin ```js // eslint.config.js -// @ts-check import eslintReact from "@eslint-react/eslint-plugin"; import eslintJs from "@eslint/js"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - - // Extend recommended rule sets from: - // 1. ESLint JS's recommended rules - // 2. TypeScript ESLint recommended rules - // 3. ESLint React's recommended-typescript rules - extends: [ - eslintJs.configs.recommended, - tseslint.configs.recommended, - eslintReact.configs["recommended-typescript"], - ], - - // Configure language/parsing options - languageOptions: { - // Use TypeScript ESLint parser for TypeScript files - parser: tseslint.parser, - parserOptions: { - // Enable project service for better TypeScript integration - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + + // Extend recommended rule sets from: + // 1. ESLint JS's recommended rules + // 2. TypeScript ESLint recommended rules + // 3. ESLint React's recommended-typescript rules + extends: [ + eslintJs.configs.recommended, + tseslint.configs.recommended, + eslintReact.configs["recommended-typescript"], + ], + + // Configure language/parsing options + languageOptions: { + // Use TypeScript ESLint parser for TypeScript files + parser: tseslint.parser, + parserOptions: { + // Enable project service for better TypeScript integration + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, }, - }, - // Custom rule overrides (modify rule levels or disable rules) - rules: { - "@eslint-react/no-missing-key": "warn", + // Custom rule overrides (modify rule levels or disable rules) + rules: { + "@eslint-react/no-missing-key": "warn", + }, }, -}); +]); ``` [Full Installation Guide ↗](https://eslint-react.xyz/docs/getting-started/typescript) diff --git a/apps/website/content/docs/getting-started/typescript.mdx b/apps/website/content/docs/getting-started/typescript.mdx index 3506c8c67..898be9f80 100644 --- a/apps/website/content/docs/getting-started/typescript.mdx +++ b/apps/website/content/docs/getting-started/typescript.mdx @@ -23,41 +23,43 @@ import { Step, Steps } from "fumadocs-ui/components/steps"; ## Configure ESLint - ```js title="eslint.config.js" - // @ts-check - import eslintJs from "@eslint/js"; + ```ts title="eslint.config.js" import eslintReact from "@eslint-react/eslint-plugin"; + import eslintJs from "@eslint/js"; + import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; - export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - - // Extend recommended rule sets from: - // 1. ESLint JS's recommended rules - // 2. TypeScript ESLint recommended rules - // 3. ESLint React's recommended-typescript rules - extends: [ - eslintJs.configs.recommended, - tseslint.configs.recommended, - eslintReact.configs["recommended-typescript"], - ], - - // Configure language/parsing options - languageOptions: { - // Use TypeScript ESLint parser for TypeScript files - parser: tseslint.parser, - parserOptions: { - // Enable project service for better TypeScript integration - projectService: true, - tsconfigRootDir: import.meta.dirname, + export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + + // Extend recommended rule sets from: + // 1. ESLint JS's recommended rules + // 2. TypeScript ESLint recommended rules + // 3. ESLint React's recommended-typescript rules + extends: [ + eslintJs.configs.recommended, + tseslint.configs.recommended, + eslintReact.configs["recommended-typescript"], + ], + + // Configure language/parsing options + languageOptions: { + // Use TypeScript ESLint parser for TypeScript files + parser: tseslint.parser, + parserOptions: { + // Enable project service for better TypeScript integration + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, }, - }, - // Custom rule overrides (modify rule levels or disable rules) - rules: { - "@eslint-react/no-missing-key": "warn", + // Custom rule overrides (modify rule levels or disable rules) + rules: { + "@eslint-react/no-missing-key": "warn", + }, }, - }); + ]); ``` @@ -65,7 +67,6 @@ import { Step, Steps } from "fumadocs-ui/components/steps"; ## Configure [Project Config](/docs/glossary#project-config) (Optional) ```ts title="eslint.config.js" - // @ts-check import tseslint from "typescript-eslint"; export default [ diff --git a/apps/website/eslint.config.ts b/apps/website/eslint.config.ts index 16c26c8ff..504681673 100644 --- a/apps/website/eslint.config.ts +++ b/apps/website/eslint.config.ts @@ -6,6 +6,7 @@ import { recommended as fastImportRecommended } from "eslint-plugin-fast-import" import pluginReactHooks from "eslint-plugin-react-hooks"; import pluginReactRefresh from "eslint-plugin-react-refresh"; import { globalIgnores } from "eslint/config"; +import { defineConfig } from "eslint/config"; import url from "node:url"; import tseslint from "typescript-eslint"; @@ -26,7 +27,7 @@ const GLOB_IGNORES = [ const dirname = url.fileURLToPath(new URL(".", import.meta.url)); -export default tseslint.config( +export default defineConfig([ gitignore(), globalIgnores(GLOB_IGNORES), { @@ -107,4 +108,4 @@ export default tseslint.config( "no-undef": "off", }, }, -); +] as never); diff --git a/eslint.config.ts b/eslint.config.ts index ad4cbc01b..b7dd46e21 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -4,7 +4,7 @@ import markdown from "@eslint/markdown"; import gitIgnores from "eslint-config-flat-gitignore"; import { recommended as fastImportRecommended } from "eslint-plugin-fast-import"; import pluginVitest from "eslint-plugin-vitest"; -import { globalIgnores } from "eslint/config"; +import { defineConfig, globalIgnores } from "eslint/config"; import tseslint from "typescript-eslint"; import * as configs from "@local/configs/eslint"; @@ -36,7 +36,7 @@ const packagesTsConfigs = [ "packages/*/*/tsconfig.json", ]; -export default tseslint.config( +export default defineConfig([ gitIgnores(), globalIgnores(GLOB_IGNORES), { @@ -57,7 +57,7 @@ export default tseslint.config( }, { extends: [ - ...tseslint.configs.strictTypeChecked, + tseslint.configs.strictTypeChecked, configs.typescript, fastImportRecommended({ rootDir: dirname }), ], @@ -120,4 +120,4 @@ export default tseslint.config( "local/avoid-multiline-template-expression": "off", }, }, -); +] as never); diff --git a/packages/plugins/eslint-plugin-react-debug/README.md b/packages/plugins/eslint-plugin-react-debug/README.md index 1af59b820..d357acfd7 100644 --- a/packages/plugins/eslint-plugin-react-debug/README.md +++ b/packages/plugins/eslint-plugin-react-debug/README.md @@ -19,27 +19,30 @@ npm install --save-dev eslint-plugin-react-debug // @ts-check import js from "@eslint/js"; import reactDebug from "eslint-plugin-react-debug"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - extends: [ - js.configs.recommended, - tseslint.configs.recommended, - reactDebug.configs.all, - ], - languageOptions: { - parser: tseslint.parser, - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactDebug.configs.all, + ], + languageOptions: { + parser: tseslint.parser, + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + rules: { + // Put rules you want to override here + "react-debug/function-component": "warn", }, }, - rules: { - // Put rules you want to override here - "react-debug/function-component": "warn", - }, -}); +]); ``` ## Rules diff --git a/packages/plugins/eslint-plugin-react-dom/README.md b/packages/plugins/eslint-plugin-react-dom/README.md index 069cfca15..b59f0a040 100644 --- a/packages/plugins/eslint-plugin-react-dom/README.md +++ b/packages/plugins/eslint-plugin-react-dom/README.md @@ -17,27 +17,30 @@ npm install --save-dev eslint-plugin-react-dom // @ts-check import js from "@eslint/js"; import reactDom from "eslint-plugin-react-dom"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - extends: [ - js.configs.recommended, - tseslint.configs.recommended, - reactDom.configs.recommended, - ], - languageOptions: { - parser: tseslint.parser, - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactDom.configs.recommended, + ], + languageOptions: { + parser: tseslint.parser, + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + rules: { + // Put rules you want to override here + "react-dom/no-dangerously-set-innerhtml": "warn", }, }, - rules: { - // Put rules you want to override here - "react-dom/no-dangerously-set-innerhtml": "warn", - }, -}); +]); ``` ## Rules diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/README.md b/packages/plugins/eslint-plugin-react-hooks-extra/README.md index 2386e9945..63f6f8a11 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/README.md +++ b/packages/plugins/eslint-plugin-react-hooks-extra/README.md @@ -17,26 +17,29 @@ npm install --save-dev eslint-plugin-react-hooks-extra // @ts-check import js from "@eslint/js"; import reactHooksExtra from "eslint-plugin-react-hooks-extra"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - extends: [ - js.configs.recommended, - tseslint.configs.recommended, - reactHooksExtra.configs.recommended, - ], - languageOptions: { - parser: tseslint.parser, - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactHooksExtra.configs.recommended, + ], + languageOptions: { + parser: tseslint.parser, + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + rules: { + // Put rules you want to override here }, }, - rules: { - // Put rules you want to override here - }, -}); +]); ``` ## Rules diff --git a/packages/plugins/eslint-plugin-react-naming-convention/README.md b/packages/plugins/eslint-plugin-react-naming-convention/README.md index f574d4398..ef9f182dd 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/README.md +++ b/packages/plugins/eslint-plugin-react-naming-convention/README.md @@ -17,29 +17,32 @@ npm install --save-dev eslint-plugin-react-naming-convention // @ts-check import js from "@eslint/js"; import reactNamingConvention from "eslint-plugin-react-naming-convention"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - extends: [ - js.configs.recommended, - tseslint.configs.recommended, - ], - plugins: { - "react-naming-convention": reactNamingConvention, - }, - languageOptions: { - parser: tseslint.parser, - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + ], + plugins: { + "react-naming-convention": reactNamingConvention, + }, + languageOptions: { + parser: tseslint.parser, + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + rules: { + // Put rules you want to use here + "react-naming-convention/component-name": "warn", }, }, - rules: { - // Put rules you want to use here - "react-naming-convention/component-name": "warn", - }, -}); +]); ``` ## Rules diff --git a/packages/plugins/eslint-plugin-react-web-api/README.md b/packages/plugins/eslint-plugin-react-web-api/README.md index 10cfe96f8..551d32100 100644 --- a/packages/plugins/eslint-plugin-react-web-api/README.md +++ b/packages/plugins/eslint-plugin-react-web-api/README.md @@ -17,27 +17,30 @@ npm install --save-dev eslint-plugin-react-web-api // @ts-check import js from "@eslint/js"; import reactWebApi from "eslint-plugin-react-web-api"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - extends: [ - js.configs.recommended, - tseslint.configs.recommended, - reactWebApi.configs.recommended, - ], - languageOptions: { - parser: tseslint.parser, - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + reactWebApi.configs.recommended, + ], + languageOptions: { + parser: tseslint.parser, + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + rules: { + // Put rules you want to override here + "react-web-api/no-leaked-event-listener": "warn", }, }, - rules: { - // Put rules you want to override here - "react-web-api/no-leaked-event-listener": "warn", - }, -}); +]); ``` ## Rules diff --git a/packages/plugins/eslint-plugin-react-x/README.md b/packages/plugins/eslint-plugin-react-x/README.md index 10d273269..5da492ab1 100644 --- a/packages/plugins/eslint-plugin-react-x/README.md +++ b/packages/plugins/eslint-plugin-react-x/README.md @@ -17,27 +17,30 @@ npm install --save-dev eslint-plugin-react-x // @ts-check import js from "@eslint/js"; import react from "eslint-plugin-react-x"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - extends: [ - js.configs.recommended, - tseslint.configs.recommended, - react.configs.recommended, - ], - languageOptions: { - parser: tseslint.parser, - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + extends: [ + js.configs.recommended, + tseslint.configs.recommended, + react.configs.recommended, + ], + languageOptions: { + parser: tseslint.parser, + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + rules: { + // Put rules you want to override here + "react-x/no-class-component": "warn", }, }, - rules: { - // Put rules you want to override here - "react-x/no-class-component": "warn", - }, -}); +]); ``` ## Rules diff --git a/packages/plugins/eslint-plugin/README.md b/packages/plugins/eslint-plugin/README.md index 27065390d..b6a0d3ada 100644 --- a/packages/plugins/eslint-plugin/README.md +++ b/packages/plugins/eslint-plugin/README.md @@ -69,40 +69,42 @@ npm install --save-dev typescript-eslint @eslint-react/eslint-plugin ```js // eslint.config.js -// @ts-check import eslintReact from "@eslint-react/eslint-plugin"; import eslintJs from "@eslint/js"; +import { defineConfig } from "eslint/config"; import tseslint from "typescript-eslint"; -export default tseslint.config({ - files: ["**/*.ts", "**/*.tsx"], - - // Extend recommended rule sets from: - // 1. ESLint JS's recommended rules - // 2. TypeScript ESLint recommended rules - // 3. ESLint React's recommended-typescript rules - extends: [ - eslintJs.configs.recommended, - tseslint.configs.recommended, - eslintReact.configs["recommended-typescript"], - ], - - // Configure language/parsing options - languageOptions: { - // Use TypeScript ESLint parser for TypeScript files - parser: tseslint.parser, - parserOptions: { - // Enable project service for better TypeScript integration - projectService: true, - tsconfigRootDir: import.meta.dirname, +export default defineConfig([ + { + files: ["**/*.ts", "**/*.tsx"], + + // Extend recommended rule sets from: + // 1. ESLint JS's recommended rules + // 2. TypeScript ESLint recommended rules + // 3. ESLint React's recommended-typescript rules + extends: [ + eslintJs.configs.recommended, + tseslint.configs.recommended, + eslintReact.configs["recommended-typescript"], + ], + + // Configure language/parsing options + languageOptions: { + // Use TypeScript ESLint parser for TypeScript files + parser: tseslint.parser, + parserOptions: { + // Enable project service for better TypeScript integration + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, }, - }, - // Custom rule overrides (modify rule levels or disable rules) - rules: { - "@eslint-react/no-missing-key": "warn", + // Custom rule overrides (modify rule levels or disable rules) + rules: { + "@eslint-react/no-missing-key": "warn", + }, }, -}); +]); ``` [Full Installation Guide ↗](https://eslint-react.xyz/docs/getting-started/typescript)