【Tips】package.jsonのscriptsの内容を一覧化するコマンドを作る

はじめに

表題通り、package.jsonの中のscriptsに記載された内容を表示するコマンドを作ります。
意外と毎回確認するのは大変なので、便利コマンドを作っておくと楽できます！！

ソースコード

scripts/list-scripts.js

import { promises as fs } from "node:fs";
import path from "node:path";
import chalk from "chalk";

// package.jsonのパスを取得
const packageJsonPath = path.join(process.cwd(), "package.json");

// package.jsonを読み込み
fs.readFile(packageJsonPath, "utf8")
	.then((data) => {
		const packageJson = JSON.parse(data);
		const scripts = packageJson.scripts;

		if (scripts) {
			console.log(chalk.green("Scripts available in package.json:"));
			for (const [script, command] of Object.entries(scripts)) {
				console.log(chalk.blue(`- ${script}:`), chalk.yellow(command));
			}
		} else {
			console.log(chalk.red("No scripts found in package.json."));
		}
	})
	.catch((err) => {
		console.error(chalk.red("Error reading or parsing package.json:"), err);
		process.exit(1);
	});

~/develop/pokemon_react_ddd (feat/pokemon_ddd_step5)$ yarn command-list

yarn run v1.22.19
$ node scripts/list-scripts.js
Scripts available in package.json:
- dev: vite
- build: tsc -b && vite build
- lint: eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0
- preview: vite preview
- test: jest
- command-list: node scripts/list-scripts.js
✨  Done in 0.51s.

以下のようにコマンドの内容に色がつきます。