应用 eslint 和 githooks 对立前端格调

前端团队开发时，是必须要有一个对立的前端标准的，用一套对立的标准来标准开发者，能够无效的防止在提交和拉取代码时造成的代码错乱问题，这边文章次要讲下咱们团队的代码标准应用，eslint 联合 vscode 保留时主动修复不标准代码，githooks 提交代码时的 eslint 校验和信息标准。

增加 eslint

vue-cli3 构建一个新我的项目 (蕴含 eslint 模块), 实现后增加.eslintrc.js 配置如下:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {browser: true},
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: ['plugin:vue/base'],
  // required to lint *.vue files
  plugins: ['vue'],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'indent': [2, 2], // 两个空格的缩进
    'quotes': [2, 'single'], // js 必须应用单引号
    'linebreak-style': [2, 'unix'], // 换行格调 unix/windows
    'semi': [2, 'never'], // 语句强制分号结尾
    // 'no-console': [1], // 不容许 console 语句
    'no-unused-vars': [1], // 申明了变量然而没有应用检测
    'space-unary-ops': [1, { 'words': true, 'nonwords': false}], // 一元运算符的前 / 后要不要加空格
    'brace-style': [2, '1tbs', { 'allowSingleLine': false}], // 大括号格调
    'comma-spacing': [2, { 'before': false, 'after': true}],   // 逗号后有空格，前没有空格
    'comma-style': [2, 'last'],  // 逗号跟在结尾
    'key-spacing': [2, { 'beforeColon': false, 'afterColon': true}], // 对象字面量中冒号的前后空格
    'lines-around-comment': [ // 行前 / 行后备注
      2, {
        'beforeBlockComment': false, // 段正文的前后
        'beforeLineComment': false, // 行正文的后面
        'afterBlockComment': false, // 块正文的前面
        'afterLineComment': false, // 行正文的前面
        'allowBlockStart': true,
        'allowObjectStart': true,
        'allowArrayStart': true
      }],
    'max-depth': [2, 4], // 代码最多容许 4 层嵌套
    'max-len': [1, 1000, 2],
    'max-nested-callbacks': [2, 3], // 回调嵌套深度
    'max-params': [2, 5], // 函数最多只能有 5 个参数
    'max-statements': [1, 80],  // 单个函数最多 80 条语句
    'no-array-constructor': [2], // 禁止应用数组结构器
    'no-lonely-if': 2, // // 禁止 else 语句内只有 if 语句
    'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1}], // 空行最多不能超过 2 行
    'no-nested-ternary': 2,  // 不应用嵌套的三元表达式
    'no-spaced-func': 2, // 函数调用时 函数名与 () 之间不能有空格
    'no-trailing-spaces': 2, // 一行完结前面不要有空格
    'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false; 简略的判断用三元表达式代替
    'object-curly-spacing': [2, 'always', { // 大括号内是否容许不必要的空格 always 始终容许；never 始终不容许
      'objectsInObjects': false,
      'arraysInObjects': false
    }],
    'arrow-spacing': 2, // => 的前 / 后括号
    'block-scoped-var': 2, // 块语句中应用 var
    'no-dupe-class-members': 2,
    // 'no-var': 1, // 禁用 var，用 let 和 const 代替
    'object-shorthand': [1, 'always'], // 强制对象字面量缩写语法
    'array-bracket-spacing': [2, 'never'], // 是否容许非空数组外面有多余的空格
    'operator-linebreak': [2, 'after'], // 换行时运算符在行尾还是行首
    // 'semi-spacing': [2, { 'before': false, 'after': false}], // 分号前后空格
    'keyword-spacing': ['error'],
    'space-before-blocks': 2, // 不以新行开始的块{后面要不要有空格
    'block-spacing': [2, 'always'],
    'space-before-function-paren': [2, 'never'], // 函数定义时括号后面要不要有空格
    'space-in-parens': [2, 'never'], // 小括号外面要不要有空格
    'spaced-comment': [1, 'always',
      {'exceptions': ['-', '*', '+']
      }], // 正文格调要不要有空格什么的
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  },
  globals: {
    '$': false,
    'jquery': false,
    'ActiveXObject': false,
    'arbor': true,
    'layer': false
  }
}

运行 npm run lint 会给出报错，运行 npm run serve 也会对我的项目进行 eslint 校验，无奈通过校验就会报错

能够联合 vscode 的 eslint 插件疾速修复无奈通过验证的代码，首先下载插件，而后更改 setting.json 配置文件，具体如下:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html"
],
"eslint.run": "onSave",
"editor.codeActionsOnSave": {"source.fixAll.eslint": true}

配置实现之后重启 vscode，在编辑代码的时候如果未合乎 eslint 的校验，保留时会主动修复代码。

增加 git hooks

前端团队开发中如果没有做正确的校验就提交了代码，拉取代码时会导致很多中央爆红不合乎定制的开发标准，因而能够在提交代码时做些限度. 在 git 提交代码时，会触发一些列的钩子函数，能够通过 husky 这个 git hooks 的工具来进行代码提交校验, 须要先装置依赖包cnpm i -D husky lint-staged @commitlint/config-conventional @commitlint/cli. 而后在 package.json 中增加如下代码:

// package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged",// 在 pre-commit 阶段运行上面配置的校验性能
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" // 这个是标准提交的信息的，联合 commitlint.config.js 应用
  }
},
"lint-staged": {"src/**/*.{js,vue}": [
    "npm run lint",
    "git add ."
  ]
}

// commitlint.config.js
// 参考的官网配置，提交的信息必须依照上面标准书写，相似 `git commit -m 'feat: 增加 eslint'`
module.exports = {
  parserPreset: 'conventional-changelog-conventionalcommits',
  rules: {'body-leading-blank': [1, 'always'],
    'body-max-line-length': [2, 'always', 100],
    'footer-leading-blank': [1, 'always'],
    'footer-max-line-length': [2, 'always', 100],
    'header-max-length': [2, 'always', 100],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [
      2,
      'never',
      ['sentence-case', 'start-case', 'pascal-case', 'upper-case']
    ],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never', '.'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test'
      ]
    ]
  }
}

接下来批改文件提交代码，最初 commit 的时候就会对已批改文件进行校验，如果 eslint 校验不通过，或者 commit 信息不符合规范都是不能提交代码的，以上步骤曾经能够很好的改善代码和提交信息标准，这对于团队我的项目开发可能很大对进步代码品质。