团队代码风格不一致怎么解决?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执行检查,看是否符合规范,不符合就会在控制台报错并且终止本次提交。
优点:这对一个多人协作的项目统一编码规范是有很大帮助的。
缺点:每次提交都来检查,当你一次提交很多代码时,会有大量报错让你修改,烦!
改进点:可以实时报错而不是commit时再报错,看团队、个人喜好吧。不过那样子也有人嫌烦。