前言
在项目开发中,有的伙伴不格式化代码,有的伙伴格式化代码后会平白无故多出很多更改,很多都是格式上的变化,但是会给开发带来不必要的负担,所以最好制定一个统一的代码风格。
安装并配置prettier
介绍:Prettier
是一个opinionated的代码格式化程序。
- 安装
prettier
,执行以下命令:
cnpm install prettier -D
- 配置
prettier
代码格式化的规则。 在项目根目录新建.prettierrc.js
文件,内容为以下格式:(具体规则还需参考官方文档)
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
useTabs: true,
};
安装并配置eslint
介绍:Eslint
是代码检测工具。
- 安装
eslint
安装eslint
,执行以下命令:
cnpm install eslint -D
全局安装eslint
,执行以下命令:
cnpm install eslint -g
- 初始化
eslint
如果有全局安装eslint
,执行以下命令:
eslint --init
如果没有全局安装eslint
,执行以下命令:
./node_modules/.bin/eslint --init
具体项目根据实际情况选择不同的选项即可
- 配置
eslint
代码检查的规则。 会在项目根目录自动创建一个.eslintrc.js
文件,可以在rules中配置规则。(具体规则还需参考官方文档)
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
// 禁止对象字面量中出现重复的 key
"no-dupe-keys": "error"
}
};
安装并配置lint-staged
介绍:lint-staged
是一个在git暂存文件上运行linters的工具。
- 安装
lint-staged
,执行以下命令:
cnpm install lint-staged -D
- 配置
lint-staged
在package.json
中增加
"lint-staged": {
"src/*": [
"prettier --config .prettierrc.js --write",
"eslint --fix",
"git add"
]
}
安装并配置husky
介绍:husky
是一个 Git Hook 工具。
- 安装
husky
,执行以下命令:
cnpm install husky -D
- 配置
husky
在package.json
中增加以下代码:
"prepare": "husky install"
并且需要执行一次增加的prepare
,执行以下命令:
npm run prepare
以上操作会在项目根目录自动创建一个.husky
文件夹。
- 添加一个
pre-commit
钩子
npx husky add .husky/pre-commit "npx lint-staged"
以上命令会在.husky
文件夹下创建一个pre-commit
以上命令中的undefined
可根据需要替换,我这边是换成了npx lint-staged
,以后每次commit
时都会被执行。
测试
在src目录中新增一个js文件,随便写点东西,然后执行:
git add .
git commit -m 'test'
这是我要提交的文件
检测到代码有问题,所以commit
失败
修改之后
commit
成功,并且a.js中的代码也被prettier
格式化了。
可以查看示例
参考