tsconfig.json 与 eslint9.x 配置

tsconfig.json

{
  "include": ["src"],
  "compilerOptions": {
    /* 语言和环境 */
    "target": "ESNext" /* 设置生成的 JavaScript 的语言版本，并包含兼容的库声明。 */,
    "lib": [
      /* 指定描述目标运行时环境的一组捆绑库声明文件。 */ "ESNext",
      "DOM",
      "DOM.Iterable",
      "WebWorker",
      "Decorators"
    ],
    "jsx": "react-jsx" /* 指定生成的 JSX 代码。 */,

    /* 模块 */
    "module": "ESNext" /* 指定生成的模块代码。 */,
    "moduleResolution": "Bundler" /* 指定 TypeScript 如何从给定模块说明符查找文件。 */,
    "baseUrl": "./" /* 指定解析非相对模块名称的基本目录。 */,
    "paths": {
      "@/*": ["./src/*"] /* 指定一组条目以将导入重新映射到其他查找位置。 */
    },
    "allowImportingTsExtensions": true /* 允许导入包含 TypeScript 文件扩展名。需要设置 '--moduleResolution bundler' 和 '--noEmit' 或 '--emitDeclarationOnly'。 */,
    "resolveJsonModule": true /* 启用导入 .json 文件。 */,

    /* JavaScript 支持 */
    "allowJs": true /* 允许 JavaScript 文件成为程序的一部分。使用 'checkJS' 选项从这些文件中获取错误。 */,
    "checkJs": true /* 启用类型检查 JavaScript 文件中的错误报告。 */,

    /* 发射 */
    "noEmit": true,
    "outDir": "./dist" /* 指定所有发出文件的输出文件夹。 */,
    "removeComments": true /* 禁用发出注释。 */,
    "esModuleInterop": true /* 发出额外的 JavaScript 以简化对 CommonJS 模块的导入支持。这为类型兼容性启用 'allowSyntheticDefaultImports'。 */,
    "forceConsistentCasingInFileNames": true /* 确保导入中的大小写正确。 */,

    /* 类型检查 */
    "strict": true /* 启用所有严格的类型检查选项。 */,
    "noImplicitAny": true /* 启用对具有隐含 'any' 类型的表达式和声明的错误报告。 */,
    "useUnknownInCatchVariables": true /* 默认将 catch 子句变量设为 'unknown' 而不是 'any'。 */,
    "noUnusedLocals": true /* 启用对未读取的局部变量的错误报告。 */,
    "noUnusedParameters": true /* 当函数参数未被读取时引发错误。 */,
    "noFallthroughCasesInSwitch": true /* 启用对 switch 语句中贯穿情况的错误报告。 */,

    /* 完整性 */
    "skipLibCheck": true /* 跳过对所有 .d.ts 文件的类型检查。 */
  }
}

eslint.config.mjs

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

// note：need to install eslint-config-prettier
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default tseslint.config(
  {
    files: ['src/**/*.{ts,tsx}'],
    languageOptions: {
      parser: typescriptParser,
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        project: './tsconfig.json', // 如果需要项目配置
      },
    },
    plugins: {
      '@typescript-eslint': typescript,
    },
    rules: {
      ...typescript.configs.recommended.rules,
      'prefer-const': 'error',
    },
  },
  {
    files: ['src/**/*.{jsx,ts,tsx}'],
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh, // 代码热更新
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
    rules: {
      ...react.configs.recommended.rules,
      // in tsconfig.json config is "jsx": "react-jsx" // 对于 React 17+ 引入的新的 JSX 转换方式
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
    },
  },
  {
    files: ['src/**/*.{js,jsx,ts,tsx}'],
    ...eslintPluginPrettierRecommended,
    rules: {
      ...eslintPluginPrettierRecommended.rules,
      'prettier/prettier': [
        'error',
        {},
        {
          usePrettierrc: true, // 使用配置文件
        },
      ],
    },
  },
)