$ cd big-lint
$ ./bin/run
hello world from ./src/index.js!
$ ./bin/run --help
Describe the command here
describe the command here
USAGE
$ big-lint [FILE]
OPTIONS
-f, --force
-h, --help show CLI help
-n, --name=name name to print
-v, --version show CLI version
import {Command, flags} from '@oclif/command'
class HappyLint extends Command {
static description = 'describe the command here'
static flags = {
// add --version flag to show CLI version
version: flags.version({char: 'v'}),
help: flags.help({char: 'h'}),
// flag with a value (-n, --name=VALUE)
name: flags.string({char: 'n', description: 'name to print'}),
// flag with no value (-f, --force)
force: flags.boolean({char: 'f'}),
}
static args = [{name: 'file'}]
async run() {
const {args, flags} = this.parse(HappyLint)
const name = flags.name || 'world'
this.log(`hello ${name} from ./src/index.ts`)
if (args.file && flags.force) {
this.log(`you input --force and --file: ${args.file}`)
}
}
}
export = HappyLint
big-lint 是一个集成了 eslint、prettier、lint-staged、husky 等工具实现代码的检测工具。提供一个命令行工具来封装检测工具,帮助我们简化配置步骤。
🚗如何开发一个命令行工具
首先大家要明白什么是命令行工具,命令行工具英文名叫
command-line interface
,缩写,CLI
,(下面都简称CLI)CLI
可以让用户实时的与系统进行交互,获取系统的实时信息,完成用户自定义的功能。比如git
、create-react-app
、vue-cli
等都是大家平时接触的比较多的命令行工具。那么回到标题,如何开发一个命令行工具呢?
oclif
简介
这里我采用了oclif,一款可以帮我们快速构建
CLI
的框架,并且可以支持Javascript
或者Typescript
语言。oclif
提供了两种类型的命令行工具,Single-command
和Multi-command
。Single-command
比如ls
或者curl
命令,Multi-command
比如git
, 可以提供多个命令,类似于git add
、git commit
等。这里根据需要,选择了Single-command
。快速创建
运行如下命令行可以快速创建一个
Single-command
命令行:然后根据命令行的提示,输入一些基本信息,就可以直接帮我们创建好一个
CLI
工程。执行如下命令输入如下信息,表示一个
CLI
就创建成功了。这里我选择了使用Typescript
来创建CLI
,毕竟都2020年了,再不会Typescript
有点说不过去了😅。tips:这里需要注意的是,在给你的
CLI
起名字的时候,可以执行npm view packageName
来查看名字是否已经被别人占用,因为我们开发好的CLI
工具最终是会发布到npm
上的,如果名字被占用了是无法发布的,到时候再改起来比较麻烦。此时打开
package.json
文件,可以看到其中的main
字段:main
字段指定的是一个入口文件,就是我们执行$ ./bin/run
命令的时候执行的文件。src/index.js
如果想用
$ big-lint
代替$ ./bin/run
命令,可以在工程目录下执行$ npm link
命令,接下来你就可以愉快的使用$ big-lint --help
查看效果了。到这里,一个简单的
CLI
工具就完成了,接下来开始我们的正题,如何实现代码检测。🚀如何实现代码检测和代码美化
检测工具
为了保证每次提交到
git
仓库代码的规范性,前端的解决方案一般会使用eslint
、prettier
、lint-staged
配合git hook
和husky
, 在git commit
的时候就对代码进行eslint
规范校验。接着需要安装上述依赖包,然后在package.json
文件中进行配置:big-lint
存在的意义就是要简化这样一个过程,省略繁杂的配置。构建自己的CLI
安装依赖
现在
cd
到我们之前创建的big-lint
工程中,在根目录下执行如下命令,安装相应的包:$ yarn add husky eslint prettier lint-staged eslint-config-airbnb eslint-config-airbnb-base eslint-config-airbnb-typescript eslint-config-prettier eslint-formatter-pretty eslint-plugin-babel eslint-plugin-compat eslint-plugin-eslint-comments eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-unicorn -S
大致思路
big-lint
将提供两种检测模式:参数说明:
对提交的代码进行检测
通过
--staged
参数,来判断当前是否只对提交的代码进行检测,实现方式就是借助于lint-staged
、husky
、eslint
。下面用代码来实现:定义
OPTIONS
src/utils/options.ts
控制台行执行:
可以看到如下信息,说明我们设置的
flags
生效了:修改
src/index.js
下的run
方法,根据staged
参数来判断是走哪段逻辑。先看下
lintStaged
的代码:getEslintConfig
方法会先判断在工程根路径下是否存在默认.eslintrc.js
、.prettierrc
、.editorconfig
配置文件,如果没有的话默认会自动生成一份配置文件置于工程根目录下。这里使用了
cross-spawn
来调用工程根路径下的node_modules/.bin/lint-staged
执行命令,spawn
的第二个参数是一个数组,传入执行命令的参数,-c
参数指定了lint-staged
命令的 配置文件路径。spawn
函数的返回一个子进程,当子进程的stdio
流已被关闭时会触发close
事件,我们需要监听下这个事件,因为lint-staged
检验不通过活,我们需要执行process.exite(code)
方法将进程杀掉。到这里,
lintStaged
的逻辑就走完了,现在可以测试下效果了。找一个测试工程,在
package.json
文件中进行如下配置:在该工程下加入
.eslintrc.js
配置文件,执行$ git add
,$ git commit -m 'test'
,如果存在eslint
报错,可以看到以下错误信息。接下来再看下
lint
的代码:通过
getFiles
方法获取指定路径下除去node_modules
下的所有 js文件,对其进行代码校验。src/utils/utils.ts
在测试工程里面的
pacakge.json
文件里进行如下配置:执行
$ npm run lint
命令,可以对src
目录下代码进行eslint
规则校验,执行npm run prettier
可以对src
目录下的代码进行prettier
代码美化, 执行$ npm run fix
可以对src
目录下的代码进行自动代码修复。发布自己的CLI工具
要发布自己的
npm
包,首先要去npm
官网上注册一个npm
的账号,进入到CLI
目录中,执行$ npm login
, 填写好登录信息。修改
package.json
文件中的keywords
字段,这里需要填写你要发布的npm
包关键字信息,如果你想让你的npm
包被更多人搜索使用的话,keywords
字段需要尽量描述精确。name
字段和version
字段是必填字段,name
要唯一,不能是别人已经使用过的,homepage
字段是你的npm
包的主页,因为我的npm
包是开源的,所以这里就填写了github
地址。以上信息确认无误后,执行
$ npm run prepack
命令, 再执行npm publish
命令就可以完成npm
包的发布了。github地址