基于husky + eslint做代码提交校验为了项目代码风格的统一性，特别是成员之间代码风格相差比较大的时候，使用es

为了项目代码风格的统一性，特别是成员之间代码风格相差比较大的时候，使用eslint做代码检查是很有必要的。下面是我基于项目中做的配置给大家分享一下，文笔欠佳，轻喷！

配置流程

安装husky

yarn add husky -D

husky初始化

husky install

添加husky命令 (注意: npm run pre-commit需要在package.json 中的script配置脚本)

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

执行以上后项目中会出现.husky文件, 文件下会有刚才生成的pre-commit脚本，安装husky以后, git的每次commit都会触发pre-commit脚本钩子

在package.json script中配置pre-commit执行校验脚本

"scripts": {
    "dev": "vue-cli-service serve --mode development",
    "lint-fix": "vue-cli-service lint --fix",
    "pre-commit": "vue-cli-service lint"
}

项目中添加.eslintrc.js(最好不使用json后缀, js可以写注释)文件, 校验示例

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-var-requires': 0, // 允许使用commonJS require方式
    '@typescript-eslint/no-explicit-any': 2, // ts中不允许使用any类型
    'no-var': 2
  }
};

6.附加prettier配置

{
  printWidth: 80, // 超过最大值换行
  tabWidth: 2, // 缩进字节数
  useTabs: false, // 缩进不使用tab，使用空格
  semi: true, // 句尾添加分号
  singleQuote: false, // 使用单引号代替双引号
  quoteProps: 'as-needed', // 对象的key是否用引号括起来,有三种选项 "as-needed"|"consistent"|"preserve"
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  trailingComma: 'es5', // 选项：none|es5|all， 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  bracketSpacing: true, // 是否在对象的{}内部两侧加空格 true - { foo: bar } false - {foo: bar}.
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  arrowParens: 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 'bracketSpacing': true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  rangeStart: 0, // 仅格式化选中文本 选中文本格式化的起始位置
  rangeEnd: Infinity, // 选中文本格式化的结束位置
  parser: 'babylon', // 格式化的解析器，默认是babylon,会自动根据输入文件推断，不用更改设置
  requirePragma: false, // 若为true，文件顶部加了 /*** @prettier */或/*** @format */的文件才会被格式化
  insertPragma: false, // 当requirePragma参数为true时,此参数为true将向@format标记后面添加一个换行符
  proseWrap: 'preserve', // 有效选项[always|never|preserve]。当Markdown文本超过printWidth时,是否换行,always-换行 never-不换行 preserve保持原样
  endOfLine: 'lf', // 结尾是 lf-\n cr-\r lfcr-\n\r  auto-保持现有的行尾设置
  htmlWhitespaceSensitivity: 'css', // 是否显示HTML文件中的空格。 有效选项： 'css' - 尊重CSS display属性的设置。 'strict' - 空格被认为是敏感的。 'ignore' - 空格被认为是不敏感的
  vueIndentScriptAndStyle: false, // 是否给vue中的 <script> and <style>标签加缩进
  embeddedLanguageFormatting: 'auto', // 是否格式化嵌入到JS中的html标记的代码段或者Markdown语法 auto-格式化 off-不格式化
}

另外大家可以结合自己的IDE做代码自动保存代码格式化，效率更高。配置完以上，就可以愉快搬砖啦