Organizing a Large Number of Scripts in Package.json

When it comes to managing a large number of scripts in your project's package.json file, it can quickly become challenging to navigate. However, there are simple steps you can take to make your scripts more organized and easier to read. In this short tutorial, we'll explore how adding separators can improve the readability of your package.json.

View post on Instagram

Using separators in your scripts object helps create clear sections and group related scripts together. Let’s do it in a few simple steps:

“Scripts” object with no separators:

"scripts": {
    "help": "scripts-help -w 40",
    "tsc": "tsc",
    "tscwatch": "tsc --watch",
    "serve": "serve ./site/"
  },

Prints the available commands with npm run as:

Scripts available in dev-tips@1.0.0 via npm run-script:

  help
    scripts-help -w 40
  tsc
    tsc
  tscwatch
    tsc --watch
  serve
    serve ./site/

Looking for software development experts?

case studies

But when separators are used like so:

"scripts": {
    "help": "scripts-help -w 40",
    "\n========== Building ==========": "",
    "tsc": "tsc",
    "tscwatch": "tsc --watch",
    "\n========== Serving ==========": "",
    "serve": "serve ./site/"
  },

The available commands are printed in a much more readable form: