概述
掘金上发了"制定自己团队的前端开发规范"帖子之后，有好多人给我说光写规范可不行，要进行实践，这篇文章就是告诉大家怎么将我们之前写的规范进行实践，光说不练假把式，我们要在项目中强制执行这些规范。
主要使用 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 进行格式化，也非常好用，支持很多编辑器，可以自行搜索配置。
阅读完后两部曲
非常感谢各位花时间阅读完，衷心希望各位小伙伴可以花少量的时间帮忙做两件事：
-
动动你的手指，帮忙点个赞吧，你的点赞是对我最大的动力。
-
希望各位关注一下我的公众号，新的文章第一时间发到公众号，公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点，并且还有非常吸引人的我个人自费抽奖活动哦~
