配置prettier, commitlint规范工程安装prettier 详细参考prettier官网 Prettier

安装prettier

详细参考prettier官网

注意事项：如本身项目配置有eslint，防止eslint与prettier冲突，安装eslint-config-prettier，并在eslint规则后配置”prettier“

npm install --save-dev eslint-config-prettier

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

使用prettier的两种方式及优缺点

保存文件时执行prettier

使用vscode，安装prettier插件，在项目根目录添加.vscode文件夹，添加settings.json。
```
{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
优点：保存时实时看到效果

缺点：协同开发时，组员可能出现未开启prettier的情况，导致commit的代码没有进行格式更正。
commit时执行prettier

安装lint-staged
```
npx mrm@2 lint-staged
```
可在package.json配置需要执行prettier的文件类型
```
"lint-staged": {
"*.{js,css,md,ts,tsx}": "prettier --write"
}
```
优点：最大程度保证commit代码的统一性

缺点：无法实时查看效果

注意事项：文件的编码方式为UTF-8，否则可能会在commit代码时报错。

安装commitlint

# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

并在.husky文件夹下添加commit-msg文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- commitlint --edit "${1}

commitlint/config-conventional详细规则参见文档

commitlint/@commitlint/config-conventional at master · conventional-changelog/commitlint