Cara Develop CLI Tools dengan Claude Code

CLItoolspengembangan dengan Claude Code: 加速

自分専用 CLItools 作りたい dan き、Claude Code 最高 パートナー.argumen パース、サブcommand設計、インタラクティブな入outputま 、「こんなCLI 作りたい」 dan 伝えるだけ implementasi bisa dilakukan.

Konfigurasi Awal Proyek

> TypeScript dengan CLItools proyek buatkan.
> commander dengan argumen パースして、eslint dan prettier konfigurasi juga.
> npx ts-node src/index.ts dengan 実行 dengan きるよう.

argumenパースとサブcommand

Commander 使ったCLI dasarstruktur.

#!/usr/bin/env node
import { Command } from "commander";
import { version } from "../package.json";

const program = new Command();

program
  .name("mytool")
  .description("proyekmanajemenCLItools")
  .version(version);

program
  .command("init")
  .description("proyek inisialisasi")
  .option("-t, --template <name>", "template名", "default")
  .option("-d, --dir <path>", "pembuatan先direktori", ".")
  .action(async (options) => {
    console.log(`template「${options.template}」 inisialisasi中...`);
    await initProject(options.template, options.dir);
    console.log("selesaiしま！");
  });

program
  .command("generate <type> <name>")
  .alias("g")
  .description("file generate（component, hook, page）")
  .option("--dry-run", "実際 file pembuatanせずpreview")
  .action(async (type, name, options) => {
    if (options.dryRun) {
      console.log(`[dry-run] ${type}「${name}」 generateします`);
      return;
    }
    await generateFile(type, name);
  });

program
  .command("check")
  .description("proyek 状態 konfirmasi")
  .action(async () => {
    await runHealthCheck();
  });

program.parse();

インタラクティブなinput

Inquirerlibrary 使った対話型input implementasi.

import inquirer from "inquirer";
import chalk from "chalk";

interface ProjectConfig {
  name: string;
  framework: string;
  features: string[];
  packageManager: string;
}

async function interactiveInit(): Promise<ProjectConfig> {
  const answers = await inquirer.prompt([
    {
      type: "input",
      name: "name",
      message: "proyek名:",
      validate: (input: string) =>
        /^[a-z0-9-]+$/.test(input) || "小文字英数字とハイフン みpenggunaan きます",
    },
    {
      type: "list",
      name: "framework",
      message: "framework:",
      choices: ["React", "Next.js", "Astro", "Vue"],
    },
    {
      type: "checkbox",
      name: "features",
      message: "penambahan機能:",
      choices: [
        { name: "TypeScript", checked: true },
        { name: "ESLint", checked: true },
        { name: "Prettier", checked: true },
        { name: "Testing (Vitest)" },
        { name: "CI/CD (GitHub Actions)" },
      ],
    },
    {
      type: "list",
      name: "packageManager",
      message: "packagemanager:",
      choices: ["npm", "pnpm", "yarn"],
    },
  ]);

  console.log(chalk.green("\npengaturan内容:"));
  console.log(chalk.cyan(`proyek名: ${answers.name}`));
  console.log(chalk.cyan(`framework: ${answers.framework}`));
  console.log(chalk.cyan(`  機能: ${answers.features.join(", ")}`));

  return answers;
}

progress barとspinner

pemrosesan 進捗 視覚的 tampilan.

import ora from "ora";
import cliProgress from "cli-progress";

async function processFiles(files: string[]) {
  const bar = new cliProgress.SingleBar({
    format: "pemrosesan中 |{bar}| {percentage}% | {value}/{total} file",
    barCompleteChar: "█",
    barIncompleteChar: "░",
  });

  bar.start(files.length, 0);

  for (const file of files) {
    await processFile(file);
    bar.increment();
  }

  bar.stop();
  console.log(chalk.green("すべて file pemrosesan selesaiしま！"));
}

async function installDependencies(packages: string[]) {
  const spinner = ora("依存package インストール中...").start();

  try {
    await execAsync(`npm install ${packages.join(" ")}`);
    spinner.succeed("依存package インストールselesai");
  } catch (error) {
    spinner.fail("インストール gagalしま");
    throw error;
  }
}

Implementasi Testing

CLItools test juga Claude Code 依頼 bisa dilakukan.

import { describe, it, expect } from "vitest";
import { execSync } from "child_process";

describe("mytool CLI", () => {
  it("versi tampilan きる", () => {
    const output = execSync("npx ts-node src/index.ts --version").toString();
    expect(output.trim()).toMatch(/^\d+\.\d+\.\d+$/);
  });

  it("ヘルプ tampilan きる", () => {
    const output = execSync("npx ts-node src/index.ts --help").toString();
    expect(output).toContain("proyekmanajemenCLItools");
    expect(output).toContain("init");
    expect(output).toContain("generate");
  });

  it("存在し tidakcommand error なる", () => {
    expect(() => {
      execSync("npx ts-node src/index.ts unknown 2>&1");
    }).toThrow();
  });
});

Untuk npmpackageとしてpublikasiするmetodeはnpmpackagepublikasiをご覧ください。Claude Codeのdasar的な使い方は入門panduanを、生産性向上のコツ, lihat 生産性を3倍にする10のTips.

Summary

Dengan Claude Code, argumenパース、対話型input、プログレスtampilan、testま 含めたCLItools waktu singkat pengembangan bisa dilakukan.「こんなcommand 欲しい」 dan 自然言語 伝えるだけ 、すぐ 動くtools 完成.

Untuk detail lebih lanjut, lihat Dokumentasi Resmi Claude Code.