git commit 钩子 pre-commit做一些代码提交检查工作

团队代码风格不一致怎么解决？eslint? 如果某个人关闭了eslint绕过提交呢，所以需要一些硬手段来强制每个人提交的东西都符合规范，下面以vue项目为例子举例。

package.json配置

"gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.s+(a|c)ss": [
      "sass-lint -v -q"
    ]
  },

项目根目录配置sass-lint.yml 具体配置很多，可以根据团队喜好自定义，点这里。

options:
  formatter: stylish
  merge-default-rules: false
files:
  include: 'src/**/*.s+(a|c)ss'
rules:
  # Extends
  extends-before-declarations: 2
  extends-before-mixins: 2
  placeholder-in-extend: 2

  # Mixins
  mixins-before-declarations: 2

  # Line Spacing
  empty-line-between-blocks:
    - 2
    -
      allow-single-line-rulesets: true
  one-declaration-per-line: 2
  single-line-per-selector: 0

  # Disallows
  no-attribute-selectors: 0
  no-color-hex: 0
  no-color-keywords: 2
  no-color-literals: 0
  no-combinators: 0
  no-css-comments: 0
  no-debug: 2
  no-disallowed-properties: 0
  no-duplicate-properties: 2
  no-empty-rulesets: 2
  no-extends: 0
  no-ids: 2
  no-important: 0
  no-invalid-hex: 2
  no-mergeable-selectors: 2
  no-misspelled-properties:
    - 2
    -
      extra-properties:
        - 'touch-callout'
        - 'overflow-scrolling'
  no-qualifying-elements: 2 # 待定
  no-trailing-whitespace: 2
  no-trailing-zero: 2
  no-transition-all: 1
  no-universal-selectors: 0
  no-url-protocols: 2
  no-vendor-prefixes: 0
  no-warn: 2
  property-units: 0

  # Nesting
  force-attribute-nesting: 0
  force-element-nesting: 2
  force-pseudo-nesting: 0

  # Name Formats
  class-name-format:
    - 2
    -
      allow-leading-underscore: false
      convention: hyphenatedlowercase
  function-name-format:
    - 2
    -
      allow-leading-underscore: false
      convention: hyphenatedlowercase
  id-name-format: 0
  mixin-name-format:
    - 2
    -
      allow-leading-underscore: false
      convention: hyphenatedlowercase
  placeholder-name-format:
    - 2
    -
      allow-leading-underscore: false
      convention: hyphenatedlowercase
  variable-name-format:
    - 2
    -
      allow-leading-underscore: false
      convention: hyphenatedlowercase

  # Style Guide
  attribute-quotes:
    - 2
    - style: double
  bem-depth: 0
  border-zero: 2
  brace-style:
    - 2
    -
      allow-single-line: true
  clean-import-paths: 2
  empty-args: 2
  hex-length: 2
  hex-notation: 2
  indentation:
    - 2
    -
      size: 2
  leading-zero: 2
  nesting-depth:
    - 2
    -
      max-depth: 3
  # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/recess.yml
  property-sort-order:
    - 2
    -
      order: recess
  pseudo-element: 0
  quotes:
    - 2
    - style: double
  shorthand-values: 2
  url-quotes:
    - 2
    - style: double
  variable-for-property: 2
  zero-unit: 2

  # Inner Spacing
  space-after-bang: 2
  space-after-colon: 2
  space-after-comma: 2
  space-around-operator: 2
  space-before-bang: 2
  space-before-brace: 2
  space-before-colon: 2
  space-between-parens: 2

  # Final Items
  final-newline: 2
  trailing-semicolon: 2

如此，当你在提交代码时，执行命令 git commit -m '提交信息' 时；就会执行gitHooks的pre-commit，从而对本次提交的修改的内容， *.js * .vue *.sass *.scss执行检查，看是否符合规范，不符合就会在控制台报错并且终止本次提交。

image.png

优点：这对一个多人协作的项目统一编码规范是有很大帮助的。
缺点：每次提交都来检查，当你一次提交很多代码时，会有大量报错让你修改，烦！

改进点：可以实时报错而不是commit时再报错，看团队、个人喜好吧。不过那样子也有人嫌烦。