由于公司前端的开发人员能力太弱，之前的指定规范实行一段时间，由于我手中的项目众多，事情比较多，中间好长一段时间没有去看，之前的项目我。到测试阶段的时候，去看之前的项目，发现之前参与开发的相关人员，各种混乱，各种风格，最可气的是，居然把规范给我注释掉，直接提交到服务器上。造成其他人员开发困难，以及不利于读取。
由于种种原因把！我把公司的项目全部加入lint-staged 半自动提升项目代码质量。尽可能降到最低。依据本篇可以实现在git commit之时，重新格式化代码，同时进行代码检查预防一些低级错误。最终期待项目中的开发人员提交到线上的代码符合代码规范、风格统一，看起来像是一个人写的。
这篇文章，在之前的配置基础上追加lint-staged，如果你想使用，请先阅读之前的我写的一篇文章git 加入钩子和提交信息规范化，还有一篇是一个提交信息的解释Commit message 的格式说明
实现思路或是提交过程
- 待提交的代码
- git add 添加到暂存区
- 执行 npm run commit
- yorkie注册在git pre-commit的钩子调起 lint-staged
- lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 Prettier）
- 如果有错误（没通过ESlint检查）则停止任务，等待下次commit，同时打印错误信息
- 成功提交
本次项目是通过vue-cli3.0脚手架构建的一个项目。git 加入钩子和提交信息规范化也是通过vue-cli3.0搭建，加入的。
安装lint-staged
npm i --D lint-staged
添加 gitHooks函数
// package.json
....
"gitHooks": {
....
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
},
.....
解释： 这里 lint-staged 的配置是：在 git 的待提交的文件中，在 app 目录下的所有 .js .vue 都要执行vue-cli-service lint, git add这个两个命令,将处理过的代码重新 add 到 git 中
格式化代码vue-cli-service lint
vue-cli-service lint是vue-cli3.0在构建项目的时候，自动生成的。如果你在构建项目的过程中选择了js标准，这个就会生成这个指令，如果你没有使用，所以构建完项目，需要你自己手动增加js规范啦！
vue-cli-service lint 验证规则配置
vue-cli3.0在构建项目的时候，会自动生成的js/vue项目的文件 .eslintrc.js，.eslintignore，.editorconfig
.eslintrc.js
这个是js配置各种验证规则
......
rules: {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow switch case through
'no-fallthrough': 0,
// allow async-await
'generator-star-spacing': 0,
// 禁止使用 eval 函数
'no-eval': [2, { allowIndirect: true }],
// 禁止多个空格， 忽略行位注释前的多个空格
'no-multi-spaces': [2, { ignoreEOLComments: true }],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 去除文件末尾需要换行
'eol-last': 0
},
parserOptions: {
// 指定解析器 parser
parser: 'babel-eslint'
}
......
.eslintignore
这里是配置要排除要验证的文件或者目录
.....
build/
config/
....
.editorconfig
这个配置IDE格式化的，为了各种IDE的配置，兼容，覆盖等
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
......
到这里配置已经结束啦！
前面说到ESLint，下面来说下ESLint
什么是ESlint？
ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。
【ESlint 中文官方网站】(http://eslint.cn/)
ESlint规范
你可以通过下面的列表大概了解ESlint的风格
"no-bitwise": 0,//禁止使用按位运算符
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
更全面的了解ESlint规则建议点这里 ：ESlint 官方规则列表
欢迎进入个人公众号 ，一起学习啊！
