git commit 怎么触发eslint校验，husky+lint-staged完美解决！

• 安装相关依赖

npm i eslint prettier lint-staged eslint-plugin-prettier eslint-config-prettier

• 配置.eslintrc.js

module.exports = {
    root: true,
    parserOptions: {
        parser: "babel-eslint",
        sourceType: "module",
    },
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-unused-vars": "off",
        indent: "off",
        "prettier/prettier": "off",
        "vue/multi-word-component-names": [
            "error",
            {
                ignores: ["index"], //需要忽略的组件名
            },
        ],
    },
    globals: {
        uni: true,
    },
};

• 配置. prettierrc.js

//配置 prettier 
module.exports = {
  // 单行最大长度
  printWidth: 100,
  // 设置编辑器每一个水平缩进的空格数
  tabWidth: 2,
  // 在句尾添加分号
  semi: true,
  // 使用单引号
  singleQuote: false,
  jsxSingleQuote: true,
  // 在任何可能的多行中输入尾逗号。
  trailingComma: 'all',
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  bracketSpacing: true,
  // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
  jsxBracketSameLinte: false,
  // 为单行箭头函数的参数添加圆括号。
  alwaysParens: 'always',
  // 行结束
  endOfLine: "auto",
  vueIndentScriptAndStyle: true, //是否缩进Vue 文件中的代码<script>和<style>标签
  htmlWhitespaceSensitivity: 'ignore',//HTML 空白敏感度
};

• 配置husky

npm install husky--save-dev
npx husky-init install

此时会在项目中生成一个.husky文件夹，其中的pre-commit文件会有生成一个git commit提交时执行的命令，默认值是 npm test ,这里我做了修改

• 在package.json中配置lint-staged脚本

此时在代码提交时就会触发.husky->pre-commit对应的命令