如何配置ESLint：规则作用于*.ts，排除*.stories.ts且保留Storybook规则

1. 修正普通TS文件的匹配规则 #

将针对.ts文件的override块中的files配置改为递归匹配所有.ts文件并排除.stories.ts，确保普通TS规则不会作用于Storybook文件：

{
  "files": ["**/*.ts", "!**/*.stories.ts"],
  // 原extends和rules保持不变
}

原配置中的"*.ts"仅匹配当前目录下的.ts文件，无法覆盖子目录；使用**/*.ts可递归匹配所有目录的.ts文件，!**/*.stories.ts则排除所有目录下的.stories.ts文件。

2. 新增Storybook文件专属配置 #

在overrides数组中添加一个针对.stories.ts的配置块，继承Storybook推荐规则，并关闭或调整冲突规则：

{
  "files": ["**/*.stories.ts"],
  "extends": ["plugin:storybook/recommended"],
  "rules": {
    // 关闭@typescript-eslint/naming-convention规则，解决"export const Primary"的报错
    "@typescript-eslint/naming-convention": "off",
    // 若不想完全关闭，可配置规则允许首字母大写的导出（示例）
    // "@typescript-eslint/naming-convention": [
    //   "error",
    //   {
    //     "selector": "variable",
    //     "modifiers": ["exported"],
    //     "format": ["PascalCase", "camelCase"]
    //   }
    // ]
  }
}

3. 调整根目录extends配置 #

移除根目录的"plugin:storybook/recommended"，避免全局应用Storybook规则，仅在专属配置块中引入即可：

// 原根目录extends删除"plugin:storybook/recommended"
"extends": [],

修改后的完整根目录eslintrc.json #

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  },
  "overrides": [
    {
      "files": ["**/*.ts", "!**/*.stories.ts"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "hv",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "hv",
            "style": "kebab-case"
          }
        ],
        "@typescript-eslint/member-ordering": "error",
        "@typescript-eslint/naming-convention": "error",
        "default-case": "error",
        "default-case-last": "error"
      }
    },
    {
      "files": ["*.html"],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "@angular-eslint/template/no-duplicate-attributes": ["error"],
        "@angular-eslint/template/attributes-order": ["error"],
        "@angular-eslint/template/no-call-expression": [
          "error"
        ],
        "@angular-eslint/template/accessibility-elements-content": [
          "error",
          {
            "allowList": [
              "ariaLabel"
            ]
          }
        ],
        "@angular-eslint/template/accessibility-valid-aria": [
          "error"
        ]
      }
    },
    {
      "files": ["**/*.stories.ts"],
      "extends": ["plugin:storybook/recommended"],
      "rules": {
        "@typescript-eslint/naming-convention": "off"
      }
    }
  ],
  "extends": []
}

额外说明 #

• .storybook目录下的eslintrc.json可保留，其规则会与根目录的Storybook专属配置叠加生效；若有冲突，根目录的规则优先级更高。
• 若仅需针对特定规则（如@typescript-eslint/naming-convention）关闭，而非全部普通TS规则，上述配置即可精准实现需求，同时保留Storybook的推荐检查。

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