前言

适用于vue-cli项目未启用代码校验检查并格式；迭代项目中途引入代码校验工具，避免全局校验引发未知问题，不利于项目整体稳定性。
ps:本文仅限安装配置使用部分，各中原理并未涉及太多

主要插件工具信息

• Eslint
• prettier
• lint-staged
• yorkie：yorkie是Vue作者尤雨溪fork了husky并做了一些修改的工具，改善了一些使用体验。vue-cli脚手架生成的项目，本身也会安装该库。若项目未安装，则手动安装即可，使用方式与husky大致相同
• eslint-plugin-prettier：让eslint使用prettier规则进行检查，并使用--fix选项。让格式不对的代码，eslint提示红线
• eslint-plugin-prettier：eslint也会检查代码的格式，这个插件就是关闭所有不必要或可能跟prettier产生冲突的规则

实现流程

1. 待提交的代码git add 添加到暂存区；
2. 执行 git commit；
3. git pre-commit的钩子函数被调用，执行lint-staged；
4. lint-staged 取得所有被提交的文件依次执行写好的任务（Prettier 和 ESLint）；
5. 如果有错误（没通过ESlint检查）则停止任务，同时打印错误信息，等待修复后再执行commit；
6. 成功commit，可push到远程

安装

npm i eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier lint-staged yorkie --save-dev

配置文件

.eslintrc.js

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  extends: [
    'plugin:vue/strongly-recommended',
    'plugin:prettier/recommended'
  ],
  // add your custom rules here
  rules: {
    // ...other codes
    "prettier/prettier": "error"
  }
}

prettier.config.js

//prettier.config.js

module.exports = {
  "printWidth": 80, // 每行代码长度（默认80）
  "tabWidth": 2, // 每个tab相当于多少个空格（默认2）
  "useTabs": false, // 是否使用tab进行缩进（默认false）
  "singleQuote": true, // 使用单引号（默认false）
  "semi": true, // 声明结尾使用分号(默认true)
  "trailingComma": "all", // 多行使用拖尾逗号（默认none）
  "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

package.json

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,json,css,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },
  "devDependencies": {
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0-beta.4",
    "lint-staged": "^10.5.4",
    "prettier": "^2.2.1",
    "yorkie": "^2.0.0"
  }
}

References

记一次gitHook带来的思考
使用 husky、commitlint 和 lint-staged 来构建你的前端工作流（vue、react、dva）
eslint+husky+prettier+lint-staged提升前端应用质量