npm script 命令補全的實現

時間 2019-11-07

標籤 npm script 命令補全實現简体版

原文原文鏈接

不知不覺，腳本命令已經寫了十來條，並且會越多（人的貪婪是無止境的），若是有自動補全機制該有多好啊，既然你我都能想到這個場景須要，npm 固然也會幫我作這類事情了。javascript

列出全部命令

請記得前面查看顯性變量列表 npm run env | grep npm_package | sort，這裏在介紹一種更具體的顯示命令集合的 shell npm run | less，簡單剖析下，知道的童鞋自行跳過。java

npm run，列出 scripts 中的全部命令;
|，管道操做符，能夠理解 promise 的 then;
less，對文件或其它輸出進行分頁顯示的工具，是linux正統查看文件內容的工具，功能極其強大。

執行後linux

若是你的命令比較多的話，能夠用鼠標向下方向鍵或空格，翻頁以查看更多，這就是 less 的強大。同時，你能夠輸入 / 進行關鍵字搜索。git

實現自動補全

開頭說了 npm 有自動補全工具，就是 completion，把它集成到 bash 或 zsh，集成方法以下github

npm completion >> ~/.zsh
source ~/.zshrc
複製代碼

解釋下上面兩條命令

第一條是把 npm completion 輸出添加到 ~/.bashrc 文件中（可理解爲聲明函數）；
第二條是讓第一條生效（執行上面聲明的函數）；

注：mac 預裝了 zsh, 若是沒有安裝 zsh , 可安裝下shell

zsh --version // 查看否安裝了zsh命令行
sudo apt-get install zsh // 安裝zsh
複製代碼

驗收

輸入 npm run，run 後面有空格（論空格的重要性），而後用你的左手小指點下 tab 鍵npm

來點更加智能的、更加人性化的

1.先介紹主角（一個插件）zsh-better-npm-completion。在下載以前，咱們先安裝 oh-my-zsh，而後 clone zsh-better-npm-completion 代碼到 .oh-my-zsh 自定義插件庫vim

// 打開命令行安裝
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 爲 zshpromise

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

複製代碼

3.執行 .zshrcbash

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
複製代碼

設置背景

最終成果

你能夠

上一篇：npm script 跨端兼容的實現

下一篇：npm script 的文件監聽和自動刷新

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。