概述

掘金上发了"制定自己团队的前端开发规范"帖子之后，有好多人给我说光写规范可不行，要进行实践，这篇文章就是告诉大家怎么将我们之前写的规范进行实践，光说不练假把式，我们要在项目中强制执行这些规范。

主要使用 husky+lint-staged+eslint 对我们的规范进行实践，首先给大家介绍一下这几个工具都是干什么用的。

eslint：就不多做介绍了，大家应该都知道，我们制定的规范需要用一些配置来实现，这个时候用 eslint 是最好不过的了。
husky：可以用于实各种 Git Hook。这里主要用到 pre-commit 这个 hook，在执行 commit 之前，运行一些自定义操作。
lint-staged：用于对 Git 暂存区中的文件执行代码检测。

知道了这几个包的作用之后，我们开始来给一个项目实现一套在提交代码之前的 eslint 检测。

ESlint

首先开始配置一下自己的 eslint，大家不要着急，接下来我会放一份纯正的 vue 配置，复制粘贴过来就行，如果是纯 JS、TS、React 的项目，可以根据腾讯的 eslint-config-alloy 配置。

开始实践吧：

进入你的项目中，我这里新建一个项目开始配置

# 要遵循文件夹命名规范
mkdir eslint_test
cd eslint_test
# 一路回车就行
npm init
# 安装 eslint 和 babel-eslint
npm i eslint babel-eslint -D
# 配置其他的 eslint-config，需要根据说明安装其他依赖

接着我们在项目的根目录下创建 eslint 的相关文件：

# eslint 要忽略的文件
touch .eslintignore
# eslint 的规则
touch .eslintrc.js

在 .eslintignore 文件中填写 eslint 要过滤的文件

build/*.js
src/assets
public
dist

配置 .eslintrc.js

直接看一下我之前写的制定自己团队的前端开发规范之 eslint，，去 copy 一下我根据制定的 eslint 配置，粘贴到 .eslintrc.js 中即可。

接下来我们要配置一下 package.json 里面的执行脚本：

"scripts": {
  "lint": "eslint --ext .js --fix"
}

主要是检测 js 代码，然后通过 --fix 把 eslint 能解决的问题都在检测的时候解决掉，比如格式，比如变量合并。

OK 了，eslint 的规范我们已经制定完了，接下来就要在 git 提交代码的时候对我们所写的代码进行检测了。

husky+lint-staged

先安装一下我们需要的 npm 包：

npm i lint-staged husky -D

接下来要在 package.json 里面配置一下我们的 git 钩子：

{
  "name": "eslint_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint --ext .js --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": ["npm run lint", "git add"]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^10.0.2",
    "eslint": "^6.1.0",
    "husky": "^3.0.1",
    "lint-staged": "^9.2.1"
  }
}

husky 里面定义了 git 的钩子函数，我们主要在 commit 之前进行检查，所以用到了 pre-commit 这个钩子。

lint-staged 在 pre-commit 的时候执行，定义了对 git 暂存区中的文件执行的任务，我们这里只对 js 文件做 eslint 的格式化校验。

但是这里有个小坑，大家一定要注意一下：

因为 pre-commit 这个钩子是需要配合 git 去用的，它主要对文件夹 .git/hooks/pre-commit 文件做手脚，当我们从 git 上拉下来项目时，如果之前没对 hooks 下的文件做修改，那 hooks 下的文件都是以 sample 结尾的，这个时候钩子函数是不起作用的，当我们安装了 husky 之后，husky 会自动对 hooks 下面的文件做修改，当你安装完 husky 之后，再打开 .git/hooks 文件夹，你会发现所有的钩子文件，都会存在一份带有.sample 的，一份不带.sample 的，不带.sample 的文件就是 husky 创建的，这个才会让 git 钩子起作用。所以我们最好是先拉项目，然后再安装 husky，否则可能会导致 husky 失效。如果你是新开发项目，开发完后才提交到 git，开发完之后，你可以先关联 git 仓库，然后重新安装一下 husky 这个包就可以了。

这一套配置下来就可以把我们之前制定的前端规范强制执行了，怎么样，你会将这一套用到自己的项目中吗？目前我自己就在用，感觉还是很不错的，可以规避很多细节上的问题，如果你还没用上这一套，那你就需要赶快去实践一下了。

开发中代码格式化

上面的主要是在提交代码的时候进行格式化，这样会保证我们远程 git 仓库里面的代码都是统一的，其实本地开发的时候我们可以使用 prettier 进行格式化，也非常好用，支持很多编辑器，可以自行搜索配置。

阅读完后两部曲

非常感谢各位花时间阅读完，衷心希望各位小伙伴可以花少量的时间帮忙做两件事：

动动你的手指，帮忙点个赞吧，你的点赞是对我最大的动力。
希望各位关注一下我的公众号，新的文章第一时间发到公众号，公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点，并且还有非常吸引人的我个人自费抽奖活动哦~