[开发工具]规范git提交及代码格式化

提交规范工具:https://github.com/commitizen/cz-cli

git hooks husky:https://github.com/typicode/husky

commitlint 规范提交信息:https://github.com/conventional-changelog/commitlint

prettier格式化代码:?https://prettier.io/docs/en/install.html

一.commitizen

1.安装git提交规范工具(在项目中安装)

npm install --save-dev commitizen

npx commitizen init cz-conventional-changelog --save-dev --save-exact

??安装成功后package.json中自动会添加

"config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

2.在package.json中配置npm脚本

 "scripts": {
    "cm": "cz"
  }

3.使用

git add .
npm run cm //或者 npx cz

4.效果

5.说明

6.手动生成changeLog

安装插件:

npm install conventional-changelog-cli --save-dev

pakage.json中加入scripts

 "scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  },

运行脚本,npm run changelog自动生成CHANGELOG.md

7.commitlint校验提交信息

npm install --save-dev @commitlint/config-conventional @commitlint/cli

项目根目录下新增配置文件:commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

二.git hook : husky

1.安装husky

方式一:

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2

方式二(推荐):

npm install husky --save-dev
# or
yarn add husky --dev

# 激活hooks
npx husky install
# or
yarn husky install

2.添加hook

添加commit-msg

# 添加 提交信息hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
# Sometimes above command doesn't work in some command interpreters
# You can try other commands below to write npx --no -- commitlint --edit $1
# in the commit-msg file.
npx husky add .husky/commit-msg \"npx --no -- commitlint --edit $1\"
# or
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

# or
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

添加pre-commit,并配置eslint检查

# 添加 pre-commit hook(提交之前用eslint进行fix)
npx husky add .husky/pre-commit \"npm run lint --fix\"

三.配置prettier格式化代码

1.安装prettier

npm install --save-dev --save-exact prettier

2.生成prettier配置文件: .prettierrc.json 或者手动创建

echo {}> .prettierrc.json

3.添加prettier规?https://prettier.io/docs/en/options.html

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote":true,
  "bracketSameLine":true,
  "jsxBracketSameLine":true,
  "trailingComma": "none",
  "arrowParens":"avoid"
}

4.创建 prettier 忽略文件: .prettierignore

dist
node_modules
.husky
public

5.添加git hook在提交前自动格式化

安装lint-staged

npm install --save-dev lint-staged

在pre-commit中添加

npx husky add .husky/pre-commit \"npx lint-staged\"

在package.json中添加

{
  "lint-staged": {
    "*.{vue,js,ts,jsx,tsx}": "prettier --write --ignore-unknown"
  }
}

若项目使用eslint,安装:eslint-config-prettier?,并修改eslint配置,解决与prettier的冲突问题

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

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended',
    'prettier'//最后添加prettier,处理与eslint的冲突
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

6.使用vscode,保存代码时自动格式化话

vscode 安装插件: ESlint,Prettier - Code formatter,Prettier Eslint

项目根目录添加vscode配置文件 .vscode/setting.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

可能遇到的2个问题:

1.在保存文件时,vscode提示报错提示:?Couldn't start client ESlint

解决方法:vscode全局配置文件中删除?'eslint.trace.server: null'?

参考:https://stackoverflow.com/questions/61165901/couldnt-start-client-eslint-message-in-vs-code

2.保存文件时只有js,和ts文件会自动格式化

解决: 在文件中点击鼠标右键->格式化文档方式->配置默认格式化程序->Prettier - Code formatter