初始化前端项目配置 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 属性自动排序规则配置

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"