{"id":1505,"date":"2024-04-01T16:37:50","date_gmt":"2024-04-01T22:37:50","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1505"},"modified":"2024-04-01T16:37:51","modified_gmt":"2024-04-01T22:37:51","slug":"a-quick-command-to-see-the-available-scripts","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/a-quick-command-to-see-the-available-scripts\/","title":{"rendered":"A Quick Command To See the Available Scripts"},"content":{"rendered":"\n

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

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<\/code> and it gave them nice output of all the scripts from the package.json<\/code> file that could be run. I was like whaaaat. <\/em>Is scripts<\/code> just some command I never heard about? No, no. It was just a custom alias they had set up. <\/p>\n\n\n\n

It’s just this command, they told me:<\/p>\n\n\n

cat package.json | jq --color-output '.scripts'<\/span><\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n
  1. Grab the contents of the package.json<\/code> file in the current directory<\/li>\n\n\n\n
  2. Send the contents of it to the next command<\/li>\n\n\n\n
  3. Invoke jq<\/code><\/li>\n\n\n\n
  4. Tell it to colorize the output<\/li>\n\n\n\n
  5. Output only the content of the \"scripts\"<\/code> part of the JSON.<\/li>\n<\/ol>\n\n\n\n
    Then to make that command easier to reach for, he set up (and I followed suit) with an alias<\/code>. I use ZSH, so updated my .zshrc<\/code> file (I always open this with code ~\/.zshrc<\/code>), but it should work in Bash and the .bashrc<\/code> file as well. <\/p>\n\n\n
    alias<\/span> scripts=\"cat package.json | jq --color-output '.scripts'\"<\/span><\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
    So yes, I could<\/em> just manually open the package.json<\/code> file and find the \"scripts\"<\/code> area and have a look. But now I can just type scripts<\/code> into the command line and it will output a perfectly nice bit of scoped JSON to peak at: <\/p>\n\n\n\n
    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
    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 […]<\/p>\n","protected":false},"author":1,"featured_media":1507,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[142],"class_list":["post-1505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-cli"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/scripts-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1505"}],"version-history":[{"count":3,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1505\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1505\/revisions\/1510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1507"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Notably, that requires usage of the jq<\/code> package<\/a>, 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<\/code> sorta like querySelectorAll<\/code> for JSON. Since package.json<\/code> is obviously JSON, it can grab out parts of it easily. So that command above reads like:<\/p>\n\n\n\n