代码检查

我们使用 TypeScript & ESLint 来检查代码中可能存在的问题。

一些约定

对于支持 ESLint flat config 的项目，应当优先使用 eslint.config.js 作为配置文件。
- 目前已知的例外是 Next.js ESLint，它需要使用 next lint 来运行代码检查，但其不支持 flat config。
- 可以使用 pnpm patch 来处理，参见 Support eslint flat config。
默认将项目代码置于 src 目录下，检查 src 目录下的所有 ts，tsx 文件。
不推荐开启自动修复，因为它可能会导致一些意外的行为。

TIP

我们可以使用三个工具来组合处理 Type-Only Imports and Export：

在 TS config 中开启 verbatimModuleSyntax，如果我们没有正确使用 import type 来导入类型就会报错。
在 ESLint 中开启 @typescript-eslint/no-import-type-side-effects 规则来检查转译后可能出现的 side effect import。
- "@typescript-eslint/consistent-type-imports": "error",
- "@typescript-eslint/consistent-type-exports": "error",
- "@typescript-eslint/no-import-type-side-effects": "error",
在 Prettier 中设置 import type 语句为排序的末尾

大部分依赖都是可选的，根据项目需要安装：

ni -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier

ni -D eslint-plugin-unicorn

ni -D @eslint-react/eslint-plugin eslint-plugin-react-hooks

ni -D eslint-plugin-react-refresh @next/eslint-plugin-next eslint-plugin-validate-jsx-nesting eslint-plugin-tailwindcss eslint-plugin-jsx-a11y

ni -D eslint-config-flat-gitignore eslint-flat-config-viewer eslint-define-config @eslint-types/typescript-eslint @eslint-types/unicorn

TIP

package.json.vscode/settings.json

json

{
  "scripts": {
    "lint": "eslint --max-warnings 0 ."
  }
}

json

{
  "eslint.experimental.useFlatConfig": true
}