eslint prettier commitizen husky集成
初始化 eslint
执行以下命令并根据提示选择仓库类型(会在项目根目录自动生成 .eslintrc.cjs 文件)
npm init @eslint/config
添加 prettier(格式化代码)
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
添加.prettierrc.json 文件在项目根目录(用于写 prettier 的规则)
{
"semi": false,
"singleQuote": true
}
在.eslintrc.cjs 文件中做如下修改
module.exports = {
extends: [
// ... other
'prettier', // 添加prettier风格
],
// ... other
}
安装 husky(用于 git 钩子,在执行 git 命令时促发自定义校验)
npm i husky -D
npm pkg set scripts.prepare="husky install" // 会在package.json文件的script中添加一条命令,用于后续初始化项目时自动执行husky install
npx husky install
eslint 接入 husky(在 git commit 之前执行)
npm i lint-staged -D // eslint与husky接入
npx husky add .husky/pre-commit 'npx lint-staged'
在 package.json 中添加以下配置
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --fix",
"*.{js,jsx,ts,tsx,css,md,html,json}": "prettier --cache --write"
}
添加 git commit 检查
npm i commitizen cz-conventional-changelog @commitlint/cli @commitlint/config-conventional -D
在 package.json 文件中添加如下配置
{
"scripts": {
"commit": "cz"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
// ...other
}
在做 git 提交时将 git commit 命令换成 npm run commit 会有步骤式提示
接入 husky,在提交 git 时检查 commit 信息是否合规则
npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'
在项目根目录添加 commitlint.config.cjs 配置文件
module.exports = {
extends: ['@commitlint/config-conventional'],
}
vscode 按 prettier 自动格式化文件
1、 安装 prettier 插件
2、 vscode =》settings =》Format On Save(开启)+ Default Formatter(选择 Prettier - Code formatter)