前端 规则自动化搭建

Eslint + Vue + Vscode

"eslint.validate": [
  {
    "language": "javascript",
    "autoFix": true
  },
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
]
// ps 通过Vscode 自动改变书写错误的代码，或提示书写错误的代码

判断根目录是否有.eslintrc 目录
创建或修改 eslintrc校验规则

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  extends: [
    'standard', 
    'plugin:vue/strongly-recommended',
    'plugin:vue/recommended'
  ],
  plugins: [
    'vue'
  ]
}

git commit 描述校验

依赖 commitizen conventional-changelog-cli git cz 提交，根据select进行选择 在package.json中注入代码

"config" : {
  "commitizen": {
    "path": "./node_modules/@qiaoba/czcl"
  },
  "ghooks": {
    "commit-msg": "validate-commit-msg"
  }
}

Git add 对代码内容进行eslint校验

只有符合 eslint 规则 才能提交

"lint-staged": {
  "*.js": [
    "eslint --fix",
    "git add"
  ],
  "*.vue": [
    "eslint --fix",
    "git add"
  ]
},
"config" : {
  "ghooks": {
    "pre-commit": "lint-staged"
  }
}