工程化之 prettier eslint husky commitlint 搭配

1.add prettier(prettier ignore需要添加的话自行上官网查看)

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官网有说明)
   注意：

• 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"
    ]
  }

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 => 执行.husky/pre-commit脚本 => 执行yarn lint-staged => lint-staged会执行eslint和prettier --write =>执行.husky/commit-msg脚本 => git commit