Background

Lately, I must build a common Eslint module for my job project and then upgrade our code to be standardized. It can get some advantages for us:

Uniform code style.
Avoid low-level syntax wrong.
Avoid the developer using plain text instead of i18n keys in the project.

预期

将多个项目的 eslint 规则统一抽象到一个 package 中进行维护，然后子项目只需要通过对这个 package 安装后进行使用即可。同时支持 prettier + commit hook 前置校验检查。选型：

pnpm 多包管理，便于抽象公共模块
eslint 本期重点
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint
- eslint-plugin-react-hooks
- eslint-plugin-react-refresh
prettier 代码格式统一
husky 代码提交前强制校验 eslint & prettier & typescript 等

代码结构

- packages
	- Other projects...
		- eslintrc.cjs
	- eslint
		- lib
			- index.js
		- package.json

实现

1. 创建 eslint package

pnpm create @your-name/eslint

2. 安装 eslint 相关依赖

pnpm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react-hooks eslint-plugin-react-refresh

3. 配置 eslint

pnpm i -D eslint-config-prettier eslint-plugin-prettier

.eslintrc.cjs

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:react-refresh/recommended",
    "prettier",
  ],
  rules: {
    "prettier/prettier": "error",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
  plugins: [
    "@typescript-eslint",
    "react",
    "react-hooks",
    "react-refresh",
    "prettier",
  ],
};

4. 配置 prettier

pnpm i -D prettier

.prettierrc.cjs

module.exports = {
  singleQuote: true,
  semi: false,
  trailingComma: "all",
  arrowParens: "always",
};

5. 配置 husky

pnpm i -D husky lint-staged

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

6. 发布

pnpm publish

7. 子项目使用

pnpm i @your-name/eslint