如何安装husky_eslint配合git hook规范代码

ESLint： 是一个插件化并且可配置的JavaScript语法规则和代码风格的检查工具。

官方配置文档

使用介绍

1、通过eslint, husky规范代码，校验不通过不允许commit配置:

npm i eslint husky -Dpackage.json:

{

"scripts": {

"lint": "eslint src"

},

"husky": {

"hooks": {

"pre-commit": "npm run lint"

}

}

}

注意，用taro初始化项目后，生成了.git-->hook默认文件夹(里面都是.sample后缀的示例文件)，手动安装husky并不会覆盖这个文件夹，导致hook未正常添加，代码提交时没有触发hook钩子。

检查hook是否正常添加：安装husky时hooks会被添加到当前项目目录下的 .git > hooks 文件夹中。查看该目录下是否有类似 pre-commit 的git钩子脚本文件。没有的话可以尝试重新安装husky。如果已经有了git钩子脚本文件在执行git的时候钩子还是没有执行，可以尝试删除该 hooks 文件夹，再重新安装husky。注意如果hooks中有提前设置好的其他钩子，请谨慎删除hooks。

默认hook文件夹

删除hook目录，重新安装husky生成的hook文件夹

2、使用lint-staged工具，提交时只检测stage阶段的文件

Running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.

This project contains a script that will run arbitrary shell tasks with a list of staged files as an argument, filtered by a specified glob pattern.package.json:

"husky": {

"hooks": {

"pre-commit": "lint-staged"

}

},

"lint-staged": {

"*.js": "eslint src --ext .js --fix", // --fix能在提交前自动修复末尾加不加分号这种代码风格错误，但无法修复变量未使用这种语法规则错误

"*.vue": ""eslint src --ext .vue --fix"

},

4、使用eslint检测.vue文件

只需安装eslint-plugin-vue，该插件依赖的vue-eslint-parser会一起被安装。.eslintrc.js:

module.exports = {

"env": {

"browser": true,

"es6": true

},

"extends": [

"eslint:recommended",

"plugin:vue/essential"

],

"globals": {

"Atomics": "readonly",

"SharedArrayBuffer": "readonly"

},

"parserOptions": {

"ecmaVersion": 2018,

"sourceType": "module"

},

"plugins": [

"vue" // 配置eslint的插件

],

"rules": {

}

};

3、使用eslint-config-airbnb替换默认的eslint-config-recommend