从零开始，搭配eslint做一个命令行工具

mykurisu 发布于2019-08-21 17:57 / 414人阅读

摘要：项目已经开源在上，名字叫做一开始想起名叫哈士奇后来这个名字被占了无奈脸。

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

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

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

需要让他初始化eslint,stylelint的配置文件
安装好我们需要的依赖
挂载git钩子，在代码提交时进行进行eslint检查
有了目标我们开始实现我们这样的一个工具：

准备工作
这次我们采用commander来开发我们的命令行，

利用chalk来美化我们控制台的输出，

利用shelljs来执行我们文件中的一些脚本

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

2.进入正题

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

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

挂载git钩子，有两种方式，第一种，我们可以自己写一个pre-commit,也可以安装pre-commit npm包，我们这里采用了第一种方式，也是因为shell脚本比较通用，到此为止，我们在本地已经开发完成了一个命令行

3.结尾工作

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

npm login

npm publish

这篇文章中没有涉及过多的技术细节，只说了大体上的一些实现思路，具体的代码有兴趣的朋友可以clone下我的项目,具体一些技术上的实现细节请在我的github中留言。

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

云服务器 GPU云服务器命令行工具 php命令行工具命令行ddos工具linux 服务器命令行管理工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90254.html

《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

qieangel2013 2019-08-23 11:58 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

kel 2019-08-19 11:10 评论0 收藏0
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）

摘要：从零开始搭建一个项目一搭建一个可靠成熟的项目介绍我是去年六月份接触的，当时还是个菜逼，当然现在也是，写了一年，抄代码的时候一直是，在别人的框架基础上开发，然后渐渐发现很多的模板都各有优点，所以慢慢的开始集合到了一起。从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月...

rainyang 2019-08-20 16:51 评论0 收藏0
如何为你的 Vue 项目添加配置 Stylelint

摘要：如何为你的项目添加配置如何为你的项目添加配置现在已经是年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如已经不再维护，以及之后文件只剩下部分等。如有疑问或授权协商请与我联系。如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了，网上许多教程和分享帖都已经过期，照着他们的步骤来会踩一些坑，如 stylelint-processor-html 已经不...

番茄西红柿 2019-04-23 11:56 评论0 收藏0
从零开始搭建一个React项目

摘要：优化代码拆分从入口文件开始，递归地构建了整个应用的模块依赖图表，然后通常会将所有的模块打包成一个。如果你还不知道什么是React，请点击这里github源码安装Node.js 如果你还不知道什么是ECMAScript，请点击这里如果你还不知道什么是Node.js，请点击这里下载Node.js并安装；接着打开windows命令行窗口分别输入node -v及npm -v如下图所示，...

HollisChuang 2019-08-23 12:19 评论0 收藏0