如今前端工程化，自动化已经成为了新趋势，如果我们要重新开始做一个项目，你会花费多久的时间在前期环境的搭建上呢？在我们前端的的积累中，我们需要将这些技术沉淀下来，便于我们开始一个新的项目，而不必花费过多的经历在环境搭建中。

这次我做的是一个集成了 eslint、stylelint、git hook 的前端代码检查工具。项目已经开源在github上，名字叫做oishi,一开始想起名叫husky(哈士奇),后来这个名字被占了(无奈脸)。

先来理一下我们这个工具需要做什么事情

1. 需要让他初始化eslint,stylelint的配置文件
2. 安装好我们需要的依赖
3. 挂载git钩子，在代码提交时进行进行eslint检查

有了目标我们开始实现我们这样的一个工具：

1.准备工作

• 这次我们采用commander来开发我们的命令行，
• 利用chalk来美化我们控制台的输出，
• 利用shelljs来执行我们文件中的一些脚本

在本地调试时需要在package.json中配置bin选项，然后开发好后npm link 发布到本地的全局，就可以开始使用自己的命令行了

2.进入正题

对于之前提到的第一点，我们首先要有自己的一个配置，在初始化的时候将它拉下来，我们在这里将自己的配置扔到了github的仓库中，可以参考一下我的项目目录配置文件,从github上拉下来后利用node原生的fs模块读写配置文件。

我们所需要的依赖项目也都会记录在配置文件中，读取文件后与当前目录下的package.json对比一下，利用shell执行安装缺少的依赖即可

挂载git钩子，有两种方式，第一种，我们可以自己写一个pre-commit,也可以安装pre-commit npm包，我们这里采用了第一种方式，也是因为shell脚本比较通用，到此为止，我们在本地已经开发完成了一个命令行,在我们将我们写的pre-commit,移入到git hooks下面的时候，记得要加权限，
chmod +x pre-commit
pre-commit如何编写，相信网上有很多了，这里我给一个大概的实现思路
首先是获取到你要eslint的代码，

JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(\.js?)$")
CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(\.p?css)$")

然后调用自己的eslint命令，
oishi lintjs --exitcode $JS_FILES
最后判断返回值，
有一个小坑的地方在于你的入口文件处，你要声明一下自己的node路径
#!/usr/bin/env node
3.结尾工作

我们在npm上注册一个自己的账号，然后切换到项目目录下，

npm login
npm publish

对于一些具体的技术细节可以参见我项目中的源码，也可以在下方评论留言

觉得有帮助的可以点一下star