SvelteKit项目中Airbnb ESLint规则无法生效的问题排查

问题背景 #

我在SvelteKit项目中尝试启用Airbnb的ESLint规则，但规则未正常生效。例如写const x = new Object()这种违反no-new-object规则的代码，ESLint并未触发错误。尝试切换extends为"airbnb-base"或"airbnb"都没用。

当前.eslintrc.ts配置：

module.exports = {
    root: true,
    parser: "@typescript-eslint/parser",
    extends: ["airbnb-base"],
    plugins: ["svelte3", "@typescript-eslint"],
    overrides: [{ files: ["**/*.svelte"], processor: "svelte3/svelte3" }],
    settings: {
        "svelte3/typescript": () => require("typescript"),
    },
    rules: {
        "no-new-object": true, // 尝试启用特定规则
    },
    parserOptions: {
        project: ["./tsconfig.json"],
    },
    env: {
        browser: true,
        es2017: true,
        node: true,
        jest: true,
    },
}

开发依赖（package.json）：

{
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^5.54.1",
        "@typescript-eslint/parser": "^5.54.1",
        "eslint": "^8.35.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-base": "^15.0.0",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.7.0",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-svelte3": "^4.0.0"
    }
}

编辑补充：后来发现项目中存在.eslintrc.cjs重复配置文件，ESLint优先读取了该文件而非.eslintrc.ts，删除.eslintrc.cjs后问题有进展，但仍需明确如何批量/逐个激活Airbnb规则。

解决方案 #

1. 确保ESLint读取正确的配置文件 #

删除重复的.eslintrc.cjs，确保.eslintrc.ts是项目中唯一的ESLint配置文件。若需指定配置路径，可在package.json的eslintConfig字段中声明。

2. 正确引入Airbnb TypeScript适配规则 #

由于项目使用TypeScript，需搭配eslint-config-airbnb-typescript（Airbnb规则的TypeScript适配版），修改extends数组，注意顺序（适配规则需放在基础规则之后）：

extends: [
  "airbnb-base",
  "airbnb-typescript/base" // 若使用完整airbnb规则则替换为"airbnb-typescript"
],

3. 让Svelte文件继承Airbnb规则 #

Svelte文件的脚本部分需要单独配置规则继承，修改overrides字段：

overrides: [
  {
    files: ["**/*.svelte"],
    processor: "svelte3/svelte3",
    extends: ["airbnb-base", "airbnb-typescript/base"],
    rules: {
      // 可针对Svelte文件单独调整规则
    }
  }
],

4. 验证规则生效 #

运行ESLint命令检查目标文件：

npx eslint src/**/*.ts src/**/*.svelte

若const x = new Object()触发no-new-object错误，说明规则已正常生效。

5. 批量/逐个调整规则 #

• 批量激活：通过extends引入完整的Airbnb规则集（如airbnb-typescript/base）即可批量启用所有规则。
• 逐个调整：在rules字段中单独指定规则级别（"error"/"warn"/"off"），示例：

  rules: {
    "no-new-object": "error", // 强制触发错误
    "import/no-unresolved": "warn", // 降级为警告
    "no-console": "off" // 关闭规则
  }
  

注意事项 #

• 确保tsconfig.json包含所有需要检查的文件，否则@typescript-eslint/parser可能无法解析文件导致规则失效。
• 若同时使用Prettier，eslint-config-prettier需放在extends数组最后，避免覆盖Airbnb的格式化规则。

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