在React（Next.js）的ESLint中找不到Airbnb TypeScript选项求助

问题原因 #

安装Storybook时选择迁移ESLint，可能会覆盖原项目的ESLint依赖或配置文件，导致Airbnb TypeScript相关规则和配置丢失。

解决步骤 #

1. 重新安装Airbnb TypeScript ESLint依赖 #

执行以下命令安装所需依赖（根据包管理器选择）：

# npm
npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

# yarn
yarn add eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

2. 修复ESLint配置文件 #

打开项目根目录的.eslintrc.json（或.eslintrc.js），确保配置包含Airbnb TypeScript相关规则，示例配置如下：

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"]
}

注意：如果项目使用tsconfig.eslint.json作为ESLint专用的TypeScript配置，需要将parserOptions.project路径改为./tsconfig.eslint.json。

3. 隔离Storybook与主项目的ESLint配置 #

Storybook安装后可能生成单独的ESLint配置文件（如.eslintrc.storybook.json），确保该文件不会干扰主项目配置：

• 在主项目的.eslintignore中添加Storybook相关目录（如.storybook/、stories/），避免ESLint检查这些文件
• 或者在Storybook的ESLint配置中继承主项目规则，减少冲突

4. 清除ESLint缓存并重启编辑器 #

运行命令清除ESLint缓存：

npx eslint --clear-cache

之后重启你的代码编辑器（如VS Code），确保新配置生效。

内容的提问来源于stack exchange，提问作者Ryuz zaki