每次新项目都要重新配置一遍，有点麻烦，记录一下。
一、配置 ESLint
1.1 核心配置
执行 npm init @eslint/config 命令进行初始化，根据提示一路下一步即可，完成后会自动生成 eslintrc 文件并安装相关依赖。
1.2 React 编译模式配置
如果 React 使用的是新的编译模式（无需手动导入 React），需要在 extends 中加入 plugin:react/jsx-runtime。
{
"extends": [
"plugin:react/jsx-runtime",
],
}
同时 tsconfig 文件中的 “jsx”: “react-jsx” 也是对应的新模式。
1.3 React 属性自动排序规则配置
安装依赖：
ni -D eslint-plugin-react
确保 eslint 配置文件中 extends 部分存在 plugin:react/recommended。
React 组件的属性可以借助 eslint 的能力来进行自动排序，在配置文件的 rule 中打开即可。
{
"rules": {
"react/jsx-sort-props": [
"error",
{
"callbacksLast": true
}
]
}
}
二、配置 Prettier
2.1 核心配置
# 安装 prettier
ni -D prettier
# 安装 prettier 整合 eslint 的库
ni -D eslint-plugin-prettier eslint-config-prettier
新建 .prettierrc 文件，并写入以下内容：
{
"singleQuote": true,
"tabWidth": 2,
"semi": false,
"trailingComma": "none",
"plugins": []
}
在 eslint 配置文件中加入
{
"extends": ["plugin:prettier/recommended"]
}
2.13 安装扩展插件
# package.json 字段排序插件
ni -D prettier-plugin-packagejson
# import 顺序自动调整插件
ni -D prettier-plugin-organize-imports
在配置文件中指定上述两个插件：
{
"plugins": ["prettier-plugin-packagejson", "prettier-plugin-organize-imports"]
}
三、配置 commitlint
安装依赖：
ni -D @commitlint/{cli,config-conventional}
生成配置文件：
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
验证是否生效：
npx commitlint --from HEAD~1 --to HEAD --verbose
如果遇到报 ES Module 相关错误，将 commitlint.config.js 文件后缀改为 cjs 即可。
四、配置 stylelint
安装依赖：
ni -D stylelint stylelint-config-recess-order stylelint-config-standard-scss stylelint-prettier
新建 .stylelintrc.json 文件并加入以下配置：
{
"plugins": ["stylelint-prettier"],
"rules": {
"prettier/prettier": true
},
"extends": [
"stylelint-prettier/recommended",
"stylelint-config-recess-order",
"stylelint-config-standard-scss"
]
}
五、配置 lint-staged
安装依赖：
ni -D lint-staged
新建配置文件 .lintstagedrc.json 并写入如下内容：
{
"*.{css,scss}": "stylelint --fix",
"*": "prettier --ignore-unknown --write",
"*.{js,jsx,ts,tsx}": "eslint --fix"
}
六、配置 Husky
安装依赖：
ni -D husky
生成相关配置文件：
npm pkg set scripts.prepare="husky install"
npm run prepare
添加钩子：
# git commit 时检查提交信息是否符合规范
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
# git commit 时触发 lint-staged，使用上面的那些 lint 工具检查并格式化一遍有改动的代码文件。
npx husky add .husky/pre-commit "npx lint-staged"
