代码提交git时自动格式化并经过ESlint检测

前言

在同一个项目中，通常都是几我的合做开发，每一个人的代码风格不一样，所以提交到git以前，须要统一下格式，所以才有了这篇文章，分享一下本身的配置过程。但愿每一个小伙伴都能规范本身的代码，若是你认为对你有帮助或者有小伙伴有更好的方法欢迎积极留言！

准备工做

以vue为例，用脚手架生成一个项目，目录结构（这个没有什么影响，已有项目更好）

介绍下咱们须要使用到的npm模块

• prettier  代码格式化模块，和vscode上安装的Vetur扩展工具使用的格式化相同
  
• husky  git的钩子，在git的hook中执行一些命令
  
• lint-staged  对git暂存的文件进行lint检查
• eslint   js代码检测工具

第1步

安装所需依赖

cnpm install --save-dev prettier husky lint-staged eslint复制代码

第2步

2.1 配置prettier的规则

在项目更目录新建一个 .prettierrc 文件，内容为（这里为了方便加了中文注释，实际须要将注释去掉）

{
    // 代码换行长度
    "printWidth": 200,
    // 代码缩进空格数
    "tabWidth": 2,
    // 使用制表符缩进而不是空格缩进
    "useTabs": true,
    // 代码结尾是否加分号
    "semi": false,
    // 是否使用单引号
    "singleQuote": true,
    // 对象大括号内两边是否加空格 { a:0 }
    "bracketSpacing": true,
    // 单个参数的箭头函数不加括号 x => x
    "arrowParens": "avoid"
}复制代码

更多配置能够查看prettier官网配置：prettier.io/docs/en/opt…

 2.2 配置eslint规则

由于没有全局安装eslint，因此在项目中执行(初始化eslint文件)

./node_modules/.bin/eslint --init复制代码

这是个人根据eslint的提示选项，具体根据项目不一样选择不一样

在项目自动在根目录新增长了一个.eslintrc.json文件，在rules选项中校验规则：

"rules":{
    // 禁止对象字面量中出现重复的 key
    "no-dupe-keys": "error",
    // 禁止出现重复的 case 标签
    "no-duplicate-case": "error",
    // 禁止出现空语句块,容许catch出现空语句
    "no-empty": ["error", {"allowEmptyCatch": true}],
    // 禁止对 catch 子句的参数从新赋值
    "no-ex-assign":"error",
    // 禁止没必要要的布尔转换
    "no-extra-boolean-cast": "error",
    // 禁止没必要要的分号
    "no-extra-semi": "error",
    // 强制全部控制语句使用一致的括号风格
    "curly": "error"
    
}复制代码

更多校验规则能够查看eslint官网配置： cn.eslint.org/docs/rules/

第3步

在package.json中增长husky和lint-staged的配置

"husky":{
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**": [
        "prettier --config .prettierrc --write",
        "eslint --fix",
        "git add"
    ]
}复制代码

效果图：

具体检查路径在lint-staged 配置项能够配置，具体查看官网

注：lint-staged配置项中必定要加"git add"，不然格式化修改后的文件，没有被commit到本地仓库中

第4步

检验是否成功，修改一些文件后，执行

git add .复制代码

git commit -m '测试'复制代码

此时就会自动格式化后进行eslint校验，若是有错误的话，commit会失败，并给出eslint提示的错误，修改后再次提交就能够了，下面是成功的例子

注：若是还有不明白的能够将demo克隆下来看一下，githua地址 github.com/foreverhot/…

需将检查图片忽略，不然检查不经过（建立如下文件并分别加入/src/img）

.eslintignore文件 忽略eslint检查的路径

.prettierignore文件 忽略prettier格式化的路径