如何在Angular-Nest的NX Workspace中配置ESLint Airbnb风格

1. 安装依赖 #

在项目根目录执行命令，安装Airbnb ESLint配置及相关依赖：

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

若项目包含纯JavaScript文件，额外安装完整Airbnb配置：

npm install eslint-config-airbnb --save-dev

2. 修改根目录eslintrc.json #

基于NX默认配置，调整extends数组并补充必要配置项，适配Airbnb风格：

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nrwl/nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nrwl/nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        "plugin:@nrwl/nx/typescript",
        "airbnb-typescript/base"
      ],
      "parserOptions": {
        "project": "./tsconfig.base.json"
      },
      "rules": {
        // 解决NX模块边界与Airbnb导入规则的冲突
        "import/no-cycle": "off",
        // 关闭Airbnb未使用变量规则，改用TypeScript内置规则
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": [
        "plugin:@nrwl/nx/javascript",
        "airbnb-base"
      ],
      "rules": {
        // 适配Nest可能用到的CommonJS导入
        "import/no-commonjs": "off"
      }
    }
  ]
}

3. 子项目个性化配置 #

Angular或Nest子项目需单独适配时，可在子项目目录的.eslintrc.json中覆盖根配置。例如Angular项目需兼容@angular-eslint：

"extends": [
  "plugin:@nrwl/nx/angular",
  "airbnb-typescript/base"
]

同时调整规则适配Angular语法（如允许装饰器使用）。

4. 验证配置 #

执行NX的ESLint检查命令，确认配置生效：

nx lint <你的项目名称>

根据报错提示，按需调整规则或添加忽略项。

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