List available npm scripts and support tab completion

Elijah Manor
InstructorElijah Manor

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson we will look at different ways you can list the available npm scripts. Whether we want to pipe npm run through less or install an npm package such as completion or ntl, we have many options to quickly execute scripts with shell tab completion.

[00:01] As your set of npm scripts gets large, it could be easy to forget what scripts you have available. Thankfully, there are several ways to remind us of what's available. One is just running npm run from the command line. It will list out all your available scripts.

[00:16] However, if you have a lot of scripts, the output could be quite daunting. If you run it again and pipe it through last, then you could easily go through the output at your leisure. Another way is to provide tab-completion support by npm. An easy way to set this up is to type npm completion and to append it to either your bashrc or your zshrc file.

[00:40] Now, if we source our rc file, and then we run npm run space tab, it will list out all your scripts and you could tab through the different options. In this case, we'll pick build colon html and press the Enter key.

[01:00] You could also try this by starting with something that you know exist like the build script, and then press Tab. Then, it will show you only the options that match that criteria, so we could tab through and hit build colon html.

[01:14] If you've already run the script recently, you could partially type it out and then press the up arrow to iterate through your history. In this case, we're going to build our CSS file. Another technique is to install a node package called ntl, and we'll install it globally, which stands for npm task list.

[01:32] Once installed, you could just type ntl in your command line, press Enter, and it will prompt you for a list of tasks that you want to run. In this case, we'll go down and hit build html. Having an interactive prompt like this can be handy if you're new to repo, or if you only run scripts in it infrequently.

Daniel
Daniel
~ 3 years ago

Hmm on MacOS, with npm's autocompletion script appended to .bash_profile or /usr/local/etc/bash_completion.d/npm, npm run then pressing tab does not list the scripts out like it does in the video. I can double tab and it will list them all out but I can't tab through them. It's also super slow at around a second.

Maybe this just doesn't function well in MacOS or is there a bash config that enables this behaviour?

Anyway ntl looks like a much better solution for now.