1.add prettier(prettier ignore需要添加的话自行上官网查看)
yarn add --dev --exact prettier
echo {}> .prettierrc.json
yarn prettier --write . (格式化所有文件)
配合eslint
yarn add eslint-config-prettier -D
在.eslintrc文件中extends添加prettier：
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
overrides: [
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
],
env: {
jest: true,
},
},
],
};
-
add husky (prettier官网有说明)
注意：
prepare脚本会在执行npm install之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令-
最好手动添加prepare，不然会多一个npm对应的package.json.lock:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"prepare": "husky install"
},
yarn add --dev husky lint-staged
npx husky install
npm set-script prepare "husky install" //prepare脚本会在执行npm install之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令
npx husky add .husky/pre-commit "yarn lint-staged"
package.json:
"lint-staged": {
"*.{js,jsx,vue}": [
"eslint",
"prettier --write"
]
}
add commit-lint
yarn add --dev @commitlint/{config-conventional,cli}
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
整体流程就是：
git commit => 执行.husky/pre-commit脚本 => 执行yarn lint-staged => lint-staged会执行eslint和prettier --write =>执行.husky/commit-msg脚本 => git commit
