在 Monorepo 中使用 @antfu/eslint-config | Day 5

@antfu/eslint-config 是一个不错的 ESLint 预设工具，它十分简易而不失灵活。

但它对 Monorepo 的支持似乎不是特别理想，无法在根目录里完成所有类型的包检查配置。

主要的原因是，对于 client 项目来说，需要对 UnoCSS 和 Vue 进行检查和适配，也需要对 unplugin-auto-import 导出的全局变量进行配置；但对于 server 来说这是不需要的，它更倾向于全局默认的检查。

因此，我们对 client 单独进行配置。

这主要体现在：

第一，我们在 client 目录下单独创建 eslint.config.js 。让 ESLint 对 client 进行单独的检查，这需要改动如下部分：

.vscode/settings.json:

{
  // ...
  "eslint.workingDirectories": [
    {
      "directory": "./packages/client",
      "changeProcessCwd": true
    }
  ],
}

第二，在 client 中安装必要的依赖和 lint-staged 等：

packages/client/package.json:

{
  // ...
  "scripts": {
    // ...
    "postinstall": "npx simple-git-hooks",
  },
  "devDependencies": {
    // ...
    "@eslint/eslintrc": "^3.1.0",           # eslint 的 FlatCompat，用以加载 unplugin-auto-import 的全局配置
    "@unocss/eslint-plugin": "^0.63.4",     # UnoCSS 的 ESLint 插件
    "unocss": "^0.63.4",
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}

第三，配置 ESLint

client/eslint.config.js:

import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat()

export default antfu(
  {
    vue: true,
    unocss: true,                   # 如果不在有 uno.config.js 的目录下，这一项会报错
    rules: {
      'no-console': 'warn',
    },
  },
  ...compat.config(
    {
      extends: [
        './.eslintrc-auto-import.json',  # unplugin-auto-import 生成的全局变量文件，防止未引入时的报错
      ],
    },
  ),
)

第四，如果希望在根目录也能进行 client 的检查，也可以将 pnpm -F @fss/client lint 注册到根目录的 packge.json 中。

这样，当使用 Monorepo 时，对于每个分包，也能用不同的 ESLint 规则去检查代码。

源码

本文未尽之处，请查阅源代码