给老vue项目（vue-cli 2.x）增加eslint校验

husky相关配置参考自以下文章，解决了新版本husky配置不生效问题，感谢大佬分享

www.jianshu.com/p/5727b7415…

zhuanlan.zhihu.com/p/366786798

第一步 安装 eslint 和 eslint-plugin-vue

npm install -D eslint
npm install -D eslint-plugin-vue

第二步 创建eslint配置文件：.eslintrc.js 和 eslint忽略文件： .eslintignore

/* .eslintrc.js内容 可配置更多自定义规则或引用别人配置好的规则包 */

module.exports = {
    root: true,
    parserOptions: {
        sourceType: 'module'
    },
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
    "rules": {
        //自定义规则，例如结尾强制分号
        "semi": [2, "always"]
    }
};

/* .eslintignore内容，根据实际情况修改 */

# 忽略build目录下类型为js的文件的语法检查
build/*.js
# 忽略src/assets目录下文件的语法检查
src/assets
# 忽略public目录下文件的语法检查
public

第三步 vscode扩展商店搜索eslint，安装

第四步 打开vscode的settings.json文件，添加如下配置，使编辑器能在保存时自动修复错误

{
     ...其他设置略
    "eslint.codeActionsOnSave.mode": "problems",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

第五步 安装husky和lint-staged，用于触发commit钩子，在提交代码前进行eslint校验，lint-staged可以只校验当前提交的代码

npm install -D husky
npm install -D lint-staged

第六步 配置husy

1. 修改package.json

"scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "prepare": "husky install",
        "precommit": "lint-staged"
    },
    "lint-staged": {
        "*.{js,vue}": [
            "eslint --fix",
            "git add"
        ]
    },

说明 ：prepare脚本会在npm install（不带参数）之后自动执行，该命令会创建.husky/目录并指定该目录为git hooks所在的目录

2. 运行以下命令

npx husky add .husky/pre-commit "npm run precommit"

我们会看到.husky/目录下新增了一个名为pre-commit的shell脚本。也就是说在在执行git commit命令时会先执行pre-commit这个脚本。pre-commit脚本内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
   
npm run  precommit

可以看到该脚本的功能就是执行npm run precommit这个命令，而precommit已在scripts中配置了执行lint-staged （注意：Node版本在16.x以下的如果没有生成pre-commit文件，就先执行npx husky add .husky/pre-commit，再手动打开文件输入"npm run precommit"）

3.修改代码试试效果