不知不觉,脚本命令已经写了十来条,而且会越多(人的贪婪是无止境的),如果有自动补全机制该有多好啊,既然你我都能想到这个场景需要,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
复制代码