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