我的项目版本如下:
本文将采用图文详解的方式,手把手带你快速完成在React项目中配置husky、prettier、commitLint,实现编码规范的统一,git提交规范的统一。
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
新增命令
"lint": "eslint \"src/**/*.+(js|ts|jsx|tsx)\"",
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
在根目录中创建 .eslintrc.js
文件,写入如下代码
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"settings": {
"react": {
"version": '18.2.0', // 指定你的 React 版本,可以是具体版本号或 "detect" 自动检测
},
},
"rules": {
}
}
Prettier - Code formatter
新增命令:表示扫描文件格式,并将文件中的代码修改为正确的格式
"format": " prettier --write \"src/**/*.+(js|ts|jsx|tsx)\"",
配置成功后,之前讲的通过 npm run format 可以将双引号格式化为 单引号,现在仅需使用 ctrl + s 保存文件,vscode 即可自行格式化
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
根目录下新建 .prettierrc.js
文件,并写入如下代码:
module.exports = {
// 箭头函数只有一个参数的时候可以忽略括号
arrowParens: 'avoid',
// 括号内部不要出现空格
bracketSpacing: true,
// 行结束符
endOfLine: 'auto',
// 行宽
printWidth: 100,
// 换行方式
proseWrap: 'preserve',
// 分号
semi: false,
// 使用单引号
singleQuote: true,
// 缩进
tabWidth: 2,
// 使用tab缩进
useTabs: false,
// 后置逗号,多行对象、数组在最后一行增加逗号
trailingComma: 'es5',
parser: 'typescript',
}
重启 vscode 后,我们在 .prettierrc.js 文件中配置的代码风格才会生效
如何使用 vscode 将代码推送至 git 仓库:http://t.csdnimg.cn/t7YT9
最终实现的是,即使多人协同开发项目,最终提交到远程仓库中的,也是符合规范的、风格统一的代码。
npm install husky -D
npm pkg set scripts.prepare="husky install"
npm run prepare
// 表示 git commit 之前执行 npm run lint
npx husky add .husky/pre-commit "npm run lint"
// 表示 git commit 之前执行 npm run format
npx husky add .husky/pre-commit "npm run format"
// 表示 git commit 之前执行 npm run git add .
npx husky add .husky/pre-commit "git add ."
windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
mac:
npm install --save-dev @commitlint/{config-conventional,cli}
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
注:已安装 husky 的不用重复安装
npm:
npm install husky --save-dev
yarn
yarn add husky --dev
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
前缀 + 冒号 + 一个空格
+ 本次提交描述
或许屏幕前的你,会好奇,为啥我就知道是这些命令,然后这样配置就能成功,其实这些步骤,在 github 上都有写, 而且比你在网上找的博客帖子更加准确。