husky

husky是用来防止代码不规范提交的插件，可以执行pre-commit和pre-push 等生命周期。husky姑且可以认为是 git 钩子函数的一个代理集合。

安装

npm install husky --save-dev

在安装husky的时候，husky会根据package.json里的配置，在.git/hooks目录生成所有的hook脚本（如果你已经自定义了一个hook脚本，husky不会覆盖它）。

配置

编辑package.json文件

"husky": {
   "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "echo $HUSKY_GIT_PARAMS"
    }
}

lint-staged

lint-staged的目的在于，将代码从暂存区(stage)提交到分支时执行。

安装

npm install lint-staged --save-dev

配置

修改package.json文件

"lint-staged": {
    "test/**/(*.test).js": "npm test",
    "src/**/*.js": [
      "eslint --fix",
      "git add"
    ]
},

可以看到，先执行 eslint 对代码扫描并修改，然后执行 prettier 脚本来对代码格式化。

eslint

安装

npm install eslint --save-dev

初始化项目

npx eslint --init

会在文件中生成 .eslintrc.js 文件，在此文件中配置相关的检查规则

"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"
  // console
  'no-console': 0
}

具体参考：http://eslint.cn/docs/user-guide/configuring

prettier

一个格式化代码工具

安装

npm install prettier --save-dev

配置

在根目录下新建 .prettierrc 文件

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

总结

lint-staged eslint prettier 都是配合husky进行使用，可以根据自己项目实际需要进行安装配置