Before you know it, I’ve already written about a dozen script commands, and there will be more and more (greed is endless), it would be great if there was an autocomplete mechanism, since you and I can see the need for this scenario, NPM will certainly help me do this kind of thing.

List all commands

Please remember to list view in front of the dominant variable NPM run env | grep npm_package | sort, here introduces a kind of more specific in display order collection of shell NPM run | less, simple analysis, know that children’s shoes to skip.

  • npm run, listing all commands in scripts;
  • |, the pipe operator, you can understand promise’sthen;
  • less, the file or other output paging display tool, is Linux orthodox view file content tool, extremely powerful.

After performing

If you have a lot of commands, you can use the down arrow button or space to flip through pages to see more. This is the power of less. At the same time, you can enter/perform a keyword search.

Realize automatic completion

NPM has an auto-completion tool, called completion, which integrates into bash or ZSH as follows

npm completion >> ~/.zsh
source ~/.zshrc
Copy the code

Explain the above two commands

  • The first is to putnpm completionOutput add to~/.bashrcFile (can be understood as a declaration function);
  • The second is to make the first one work (execute the function declared above);

Note: ZSH is pre-installed on MAC. If ZSH is not installed, you can install it

zsh --version // Check whether ZSH is installed
sudo apt-get install zsh / / install ZSH
Copy the code

acceptance

Type NPM run with a space after run and use your left hand to point to the TAB key

Something smarter, something more human

1. Start with zsh-better-npm-completion, a plug-in. Before downloading, we first installed oh-my-zsh and then cloned the zsh-better-npm-completion code into the.oh-my-zsh custom plug-in library

// Open the command line installation
curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh 

/ / clone ZSH - better - NPM - completion
git clone https://github.com/lukechilds/zsh-better-npm-completion ~/.oh-my-zsh/custom/plugins/zsh-better-npm-completion
Copy the code

2. Before adding the plug-in, as a good practice, clone.zshrc and set the default shell to ZSH

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

Copy the code

3. Perform. ZSHRC

Vim ~/.zshrc // Add source on the last line ~/.oh-my-zsh/custom/plugins/zsh-better- NPM -completion/zsh-better- NPM -completion.plugin. ZSH / Plugins = (zsh-better-npm-completion); Oh-my-zsh /pluginsCopy the code

Note:

Uninstall_oh_my_zsh;

ZSHRC: DISABLE_UPDATE_PROMPT=true;

Automatic update OH my ZSH runnable upgrade_OH_my_zsh;

Take it one step further and set up a nice theme

Download the iTerm 2

Download it at www.iterm2.com/

Replace the topic

ZSHRC file open ~/.zshrc // modify the theme ZSH_THEME="agnoster" // save and reopen iTerm 2Copy the code

Download Powerline Fonts and install it

// clone
git clone https://github.com/powerline/fonts.git --depth=1
cd fonts
./install.sh
cd ..
rm -rf fonts
Copy the code

Set the background

The final results

Recommend a plug-in

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

More plug-ins are available

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

You can

NPM Script cross-compatible implementation

NPM Script for file listening and automatic refreshing

Directory: NPM Script small book