vue老项目增加提交格式化功能[eslint+prettier+husky+lint-staged]

一、当前项目情况说明

当前项目是已经开发迭代很久的项目，之前因为需求紧急，所以没有对代码格式话进行规范要求，导致每个开发人员提交的代码格式千差万别，增加了阅读难度及后期的维护成本，如果直接run lint，可能导致功能出现问题，所以现在使用以下技术实现，只对git提交的代码进行eslint格式检查，尽量规范以后提交的代码格式。

ps：当前项目已配置好.esllintrc及.prettierrc文件，已安装eslint相关包，以下步骤只针对preettier及git-hooks的配置

二、配置prettier

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

使用命令安装prettier及相关包

prettiier是用于格式化代码的包，其配置文件是.prettierrc，需要新增.prettierignore文件来控制格式化的范围。

eslint-plugin-prettier是用于将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。

eslint-config-prettier是用于禁用掉一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

需要在.esllintrc文件中，extend 一下 plugin:prettier/recommended

{
  "extends": ["plugin:prettier/recommended"]
}

现在即整合了eslint+prettier

三、配置git-hooks

期望：如果没有在vscode配置保存自动格式化+修复格式错误，在git提交代码时，可以先执行代码格式化和eslint检查修复，如果出现错误阻止提交，无错误时再提交git

1、安装husky+lint-staged依赖

npm install husky@4.3.8 --save-dev
npm install lint-staged --save-dev

2、package.json文件中添加相关代码

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{css,scss,less}": [
      "prettier --write",
      "vue-cli-service lint",
      "git add"
    ],
    "src/**/*.{js,vue}": [
      "prettier --write",
      "vue-cli-service lint",
      "git add"
    ]
  }
}

在提交代码时，会在commit命令执行前先执行lint-staged中的命令，先进行格式化，再进行eslint格式修复，如果是可以自动修复的则修复完后会提交，后续执行git push即可；如果存在无法自动修复的错误，则当前提交命令会暂停，并显示错误日志

 返回修改，再提交即可

参考文章：eslint+prettier+husky的配置说明

参考文章：ESLint 和 Prettier 配合使用