A Quick Command To See the Available Scripts

Have you ever been like, ughkgh, is it npm run dev or npm run start? Is it yarn testwatch or yarn test:watch? If you do it every time you open a project, I’d suggest setting up tasks. But I mean more for one-off or less frequently used scripts. I’m forever forgetting the exact scripts from the package.json that are set up in the project (or subproject of a monorepo) that I’m in.

I was pair programming with a co-worker earlier, and I noticed they had this little moment where they couldn’t remember the name of a script, and they just typed scripts and it gave them nice output of all the scripts from the package.json file that could be run. I was like whaaaat. Is scripts just some command I never heard about? No, no. It was just a custom alias they had set up.

It’s just this command, they told me:

cat package.json | jq --color-output '.scripts'Code language: Bash (bash)

Notably, that requires usage of the jq package, so you’d need to install that (globally) to use this command. But we use that as part of our dev environment here at work so we both had it anyway. As a front-end guy, I’m understanding jq sorta like querySelectorAll for JSON. Since package.json is obviously JSON, it can grab out parts of it easily. So that command above reads like:

  1. Grab the contents of the package.json file in the current directory
  2. Send the contents of it to the next command
  3. Invoke jq
  4. Tell it to colorize the output
  5. Output only the content of the "scripts" part of the JSON.

Then to make that command easier to reach for, he set up (and I followed suit) with an alias. I use ZSH, so updated my .zshrc file (I always open this with code ~/.zshrc), but it should work in Bash and the .bashrc file as well.

alias scripts="cat package.json | jq --color-output '.scripts'"Code language: Bash (bash)

So yes, I could just manually open the package.json file and find the "scripts" area and have a look. But now I can just type scripts into the command line and it will output a perfectly nice bit of scoped JSON to peak at:

Need front-end development training?

4 responses to “A Quick Command To See the Available Scripts”

  1. You can also just type npm run

  2. Elliot Bentley says:

    Maybe I’m missing something here — doesn’t the command npm run do this already?

    e.g. Running npm run in the repo for my personal website outputs this.

    Lifecycle scripts included in elliotbentley.com@0.0.2:
      start
        astro dev
    
    available via `npm run-script`:
      build
        astro build && cp _redirects dist/
      astro
        astro
    
    • Chris Coyier says:

      Indeed! Didn’t know that. Nice that you don’t need to install anything other than npm which you already have installed if you’re using npm scripts. But I sure do like the more colorful output of jq.

  3. M. Inam says:

    In the VS code, bottom left corner has NPM scripts in the side panel below file explorer I use that 🤗

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $313,806 contributed to date.