Prettier Config を TypeScript に移行する

はじめに

Prettier の設定ファイルを JavaScript から TypeScript に移行することで、型安全性と IntelliSense のサポートを得ることができます。この記事では ts-node を使用して Prettier の設定ファイルを TypeScript に移行する手順を紹介します。

TypeScript に移行することのメリット

TypeScript は基本的にそのままでは Node.js を実行することはできず、JavaScript へのトランスパイルが必要です。ここで ts-node を使うと、トランスパイルと実行の作業を同時に行ってくれるため、node の代わりに ts-node コマンドで TypeScript を直接走らせることが可能になります。

Prettier の設定ファイルを TypeScript に移行することで次のようなメリットがあります。

• 型安全性：無効な設定オプションを事前に検出
• IntelliSense：エディタでの自動補完とドキュメント表示
• リファクタリング支援：設定の変更時に影響範囲を把握
• 一貫性：プロジェクト全体で TypeScript を使用している場合の統一感

移行手順

1. 現在の設定を確認

まず、既存の prettier.config.js の内容を確認します。

module.exports = {
  semi: true,
  singleQuote: false,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  trailingComma: "es5",
  bracketSpacing: true,
};

2. 必要な依存関係をインストール

$ npm install --save-dev ts-node

3. TypeScript 設定ファイルを作成

prettier.config.ts ファイルを作成する。

$ touch prettier.config.ts

import type { Config } from "prettier";

const config: Config = {
  semi: false,
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  trailingComma: "es5",
  bracketSpacing: true,
};

export default config;

4. 古い JavaScript ファイルを削除

$ rm prettier.config.js

5. 動作確認

設定が正しく読み込まれているか確認する。

# 設定ファイル自体をフォーマット
$ npx prettier --write prettier.config.ts

# 特定のファイルの書式チェック
$ npx prettier --check "**/*.{ts,tsx}"

注意点

ts-node の確認

TypeScript 設定ファイルを使用する場合、ts-node が正しくインストールされていることを確認します。

$ npm list ts-node

型エラーの対処

Config 型が見つからない場合は、Prettier のバージョンを確認します。

$ npm install --save-dev prettier@latest

実際の移行例

移行前：JavaScript

module.exports = {
  semi: false,
  singleQuote: true,
  printWidth: 100,
};

移行後：TypeScript

import type { Config } from "prettier";

const config: Config = {
  semi: false,
  singleQuote: true,
  printWidth: 100,
  // 型安全性により、無効なオプションはエラーになる
  // invalidOption: true, // ← これはコンパイルエラー
};

export default config;

まとめ

ts-node を使用することで、Prettier 設定ファイルを簡単に TypeScript 化できます。型安全性とエディタサポートの向上により、設定の管理がより効率的になります。