webpack+vue+Eslint+husky+lint-staged 统一项目编码规范

一. Eslint：

为何咱们要在项目中使用ESLint

ESLint能够校验咱们写的代码，给代码定义一个规范，项目里的代码必须按照这个规范写。

加入ESLint有很是多的好处，好比说能够帮助咱们避免一些很是低级的错误，一些格式上的问题致使咱们在运行生产环境的时候出现一些不明因此的报错。还有就是在跟团队协做的时候，每一个人都保持同一个风格进行代码书写，这样团队内部相互去看别人的代码的时候，就能够更容易的看懂。

ESLint实战小技巧全揭秘

1. 局部安装eslint

$ npm install eslint -D

2. 初始化配置文件：

$ eslint --init

3. webpack中配置eslint：

须要先安装 eslint-loader 解析 .eslint.js 文件

$ npm install eslint-loader -D

在 webpack.base.conf.js 的 rules 中添加如下规则：

{
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        enforce: 'pre',
        options: {
        　　fix: true,
        }
}

4. 配置 Eslint：

咱们这里是 Vuejs 项目，因此须要同时对 .vue 文件中的 js 代码进行检测，就须要利用 eslint-plugin-vue 插件来搭配使用。使用别人写好的规则包（以eslint-config-开头的npm包），如eslint-config-standard，由于本人比较偏向于 Airbnb JavaScript Style，因此从此的代码规范将均使用此规范。

安装依赖：

$ npm install eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue babel-eslint -D

（一）配置 package.json 文件：

在 package.json 中添加 lint 脚本：

// ...
"scripts": {
  // ...
  "lint": "eslint --ext .js,.vue src"
},
// ...

上面的命令中 --ext 参数就是用来指定须要检查的扩展名的文件，src 就是指定检查的目录。

命令行运行 npm run lint，输出以下：

在报这么多的错误以后，若是咱们一条一条地去修复，就会变的很是的麻烦，相信刚接触ESLint的童鞋都深有体会。其实这些错误均可以让ESLint帮助咱们自动地修复。只须要在ESLint后面加上一个参数--fix，它就会自动修复 Lint 出来的问题。当咱们再去terminal里面跑一下：$ npm run lint，就会发现不少问题都被自动修复了。剩余没有被自动修复的问题按照提示进行修复便可。

"lint": "eslint --fix --ext .js,.jsx,.vue src"

（二）配置 .eslintrc.js 文件：

先放总体文件看看

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base",
        "plugin:vue/essential",
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "parser": "babel-eslint",
    },
    "plugins": [
        "vue",
    ],
    "rules": {
        'no-console': 'off'
    }
};

（1）extends： 

一个配置文件能够被基础配置中的已启用的规则继承。可使用如下规则继承，表明继承Eslint中推荐的（打钩的）规则项：

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        
    }
}

使用别人写好的规则包（以eslint-config-开头的npm包），如eslint-config-standard，我项目中使用的是airbnb：

module.exports = {
    "extends": [　　
　　　　"airbnb-base",
　　　　"plugin:vue/essential"
　　 ],

"rules": { } }

（2）plugin属性：

ESLint 支持使用第三方插件（以eslint-plugin-开头的npm包），在使用插件以前，必须使用 npm 安装。如eslint-plugin-react、eslint-plugin-vue等。

module.exports = {
    "plugins": [
        "vue"
    ]
};

（3）rules属性：

当须要根据本身的需求进行配置时，能够在 rules 中添加规则；module.exports = {

"extends": [
        "airbnb-base",
        "plugin:vue/essential",
    ],
    "plugins": [
        "vue",
    ],
    "rules": {
　　　　　'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
　　　　  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'　
    }
};

如在平时开发中常常要用到console，能够将这条规则关掉，这样在开发环境运行 npm run lint 时，命令行就不会输出 no-console/no-debugger 警告了。

 二. husky & lint-staged：

　　如今最流行的版本管理工具非  git莫属，而良好的代码规范有助于项目的维护，为了防止一些不规范的代码  commit并 push到远端,咱们能够在 git命令执行前用一些钩子来检测并阻止。如今大前端主要有两种  git钩子插件： husky（jquery与next.js都在用）， pre-commit(antd在用)。我项目中使用的是 husky。

　　用过  git的小伙伴们都知道 git 有不少命令 commit、 push、 rebase等等。那这些命令主要是在执行.git文件夹中的东西， git 钩子文档上介绍很是详细， git init后，在 .git/hooks文件中，有一些 .simple结尾的钩子示例脚本，那么 git 钩子目录就是在.git文件夹的hooks下，以下所示：

 

 

上图中的脚本文件就是 git 的钩子函数。

若是想启用对应的钩子函数，只需手动删除后缀。因此，列出两种配置方法：

 

1. 手动修改钩子文件：

按照文档上，配置钩子脚本，修改hooks中文件名对应的钩子文件，启用钩子。使用shell脚本检查。

!/usr/bin/env bash    
# get files to be linted
FILES=$(git diff --cached --name-only | grep -E '^src|^test/unit/specs|^test/e2e')    
# lint them if any
if [[ $FILES ]]; then
  ./node_modules/.bin/eslint $FILES
fi

文件名是pre-commit, 在commit 以前启用的钩子函数， 利用 git diff查看当前有哪些文件修改过，只对指定文件夹中修改的文件使用eslint进行代码检查，渐进式对整个项目实现代码规范。

脚本写好后，不用每次都手动复制到.git/hooks目录下，只需对当前文件建立软链接，到指定目录，在package.json中配置脚本命令，

"scripts": {   
　　"install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
}

在项目初始化后， 执行npm run install-hook,很方便地配置好了pre-commit 钩子。

2. husky 和 lint-staged 结合构建钩子：

husky可以防止不规范代码被commit、push等，而使用了eslint后，用 lint-staged 能够在 lint 后，更加灵活，执行其余脚本，尝试进行修改错误，好比 eslint --fix 检查后并修复错误等，因此项目中使用了 husky 与 lint-staged 结合使用。

首先，husky 和 lint-staged 安装依赖：

$ npm install -D lint-staged husky

修改 package.json 文件：

{ 
    ...
    "scripts": {
    "lint": "eslint --fix --ext .js,.jsx,.vue src"
    },
    "husky": {
    　　hooks": {
        　　"pre-commit": "lint-staged",
        　　"pre-push": "lint-staged"
    　　}
    },
    "lint-staged": {
    　　"src/**/*.{js,json,vue}": [
        　　"eslint --fix",
        　　"git add"
    　　]
    },
    ...
}

此时，当你 git commit的时候，将会执行 precommit里的脚本，没有问题了才能够提交。

附：在安装和测试过程当中遇到的一些问题的解决办法：

（1）在安装完 Eslint 进行测试时，出现了好几个 parser error 的问题，不是说缺乏；就是说缺乏 >，实际上是由于不兼容致使的报错，只要加上 babel-eslint 便可；

首先安装 babel-eslint ：

$ npm install -D  babel-eslint

其次在 .eslintrc.js 文件中加入：

{

　　　"extends": [

　　　　　　"airbnb-base",

　　　　　　"plugin:vue/essential"

　　　],

"parserOptions": {
        "parser": "babel-eslint"
   }, 
}

（2）安装 husky 后提交代码 husky 不生效：

$ rm -rf .git/hooks
$ npm uninstall husky -D
$ npm install husky -D

（3）npm run lint 始终报 npm 的 error，使用以下命令便可：

$ npm run lint -s

（4）关于prettier 的问题：

prettier 是一个很好的格式化代码的插件，但对已经有必定迭代完成度的代码不推荐使用。使用该插件后，它会将原有的代码也进行格式化，形成不少不可知的问题，我就是前车可鉴，使用 prettier 后，本来已经没有 eslint 问题的代码，又多出了更多的不知道什么缘由的报错，只能将代码回退处理。