1.add prettier(prettier ignore需要添加的話自行上官網(wǎng)查看)

yarn add --dev --exact prettier
echo {}> .prettierrc.json
yarn prettier --write .  (格式化所有文件)

2. 配合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,
      },
    },
  ],
};

3. add husky (prettier官網(wǎng)有說明)
   注意：

• prepare腳本會在執(zhí)行npm install之后自動執(zhí)行。也就是說當我們執(zhí)行npm install安裝完項目依賴后會執(zhí)行 husky install命令
• 最好手動添加prepare，不然會多一個npm對應(yīng)的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腳本會在執(zhí)行npm install之后自動執(zhí)行。也就是說當我們執(zhí)行npm install安裝完項目依賴后會執(zhí)行 husky install命令
npx husky add .husky/pre-commit "yarn lint-staged"

package.json:

"lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint",
      "prettier --write"
    ]
  }

4. 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 => 執(zhí)行.husky/pre-commit腳本 => 執(zhí)行yarn lint-staged => lint-staged會執(zhí)行eslint和prettier --write =>執(zhí)行.husky/commit-msg腳本 => git commit