npm script 命令补全的实现

不知不觉，脚本命令已经写了十来条，并且会越多（人的贪婪是无止境的），若是有自动补全机制该有多好啊，既然你我都能想到这个场景须要，npm 固然也会帮我作这类事情了。

列出全部命令

请记得前面查看显性变量列表 npm run env | grep npm_package | sort，这里在介绍一种更具体的显示命令集合的 shell npm run | less，简单剖析下，知道的童鞋自行跳过。

• npm run， 列出 scripts 中的全部命令;
• |， 管道操做符，能够理解 promise 的 then;
• less，对文件或其它输出进行分页显示的工具，是linux正统查看文件内容的工具，功能极其强大。

执行后

若是你的命令比较多的话，能够用鼠标向下方向键或空格，翻页以查看更多，这就是 less 的强大。同时，你能够输入 / 进行关键字搜索。

实现自动补全

开头说了 npm 有自动补全工具，就是 completion，把它集成到 bash 或 zsh，集成方法以下

npm completion >> ~/.zsh
source ~/.zshrc
复制代码

解释下上面两条命令

• 第一条是把 npm completion 输出添加到 ~/.bashrc 文件中（可理解为声明函数）；
• 第二条是让第一条生效（执行上面声明的函数）；

注：mac 预装了 zsh, 若是没有安装 zsh , 可安装下

zsh --version // 查看否安装了zsh命令行
sudo apt-get install zsh // 安装zsh
复制代码

验收

输入 npm run，run 后面有空格（论空格的重要性），而后用你的左手小指点下 tab 键

来点更加智能的、更加人性化的

1.先介绍主角（一个插件）zsh-better-npm-completion。在下载以前，咱们先安装 oh-my-zsh，而后 clone zsh-better-npm-completion 代码到 .oh-my-zsh 自定义插件库

// 打开命令行安装
curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh 

// 克隆 zsh-better-npm-completion
git clone https://github.com/lukechilds/zsh-better-npm-completion ~/.oh-my-zsh/custom/plugins/zsh-better-npm-completion
复制代码

2.在添加插件前，本着一个好习惯，先克隆一份 .zshrc，而后设置默认 shell 为 zsh

cp ~/.zshrc ~/.zshrc.back
chsh -s /bin/zsh

复制代码

3.执行 .zshrc

vim ~/.zshrc

// 在最后一行添加
source ~/.oh-my-zsh/custom/plugins/zsh-better-npm-completion/zsh-better-npm-completion.plugin.zsh

// 启用插件，多插件空格分开
plugins = (zsh-better-npm-completion);

// 查看 .oh-my-zsh 插件
ls ~/.oh-my-zsh/plugins
复制代码

注：

卸载 oh my zsh 可运行 uninstall_oh_my_zsh;

自动更新 oh my zsh 可在 .zshrc 中添加 DISABLE_UPDATE_PROMPT=true;

自动更新 oh my zsh 可运行 upgrade_oh_my_zsh;

再进一步，设置好看主题

下载 iTerm 2

下载地址：www.iterm2.com/

更换主题

// 打开.zshrc文件
open ~/.zshrc

// 修改主题
ZSH_THEME="agnoster"

// 保存从新打开 iTerm 2
复制代码

下载 Powerline fonts 字体并安装

// clone
git clone https://github.com/powerline/fonts.git --depth=1
cd fonts
./install.sh
cd ..
rm -rf fonts
复制代码

设置背景

最终成果

推荐插件

• zsh-history-substring-search
• zsh-syntax-highlighting
• zsh-autosuggestions
• zsh-better-npm-completion

更多插件可参考

• github.com/robbyrussel…
• github.com/unixorn/awe…
• github.com/robbyrussel…

你能够

上一篇：npm script 跨端兼容的实现

下一篇：npm script 的文件监听和自动刷新

目录：npm script 小书