初始化前端项目配置 eslint、prettier、husky 等等

每次新项目都要重新配置一遍，有点麻烦，记录一下。

一、配置 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"