【入門編】PrettierのAST(抽象構文木)をハックする:独自のコメント・アノテーションで生成コードを制御する – デバッグ・コード品質・テストツール生産性向上バイブル

こんにちは。開発環境の深淵へようこそ。

多くのエンジニアは、Prettierを「コードを自動で綺麗にしてくれる魔法の杖」だと思っています。しかし、真のプロフェッショナルは、「なぜPrettierがコードをその形に変えるのか」というAST(抽象構文木)の構造を理解し、魔法を意のままに操ります。

今日は、既存のフォーマットルールではどうしても制御できない「現場のわがまま」を、PrettierのプラグインAPIをハックして解決する技術を伝授します。

—

1. なぜ「標準のPrettier」では限界があるのか

Prettierは「意見の押し付け(Opinionated)」を信条としており、柔軟性をあえて排除することで一貫性を保っています。しかし、現場では以下のようなニーズが必ず発生します。

  • 「特定の計算式だけは、可読性のために今の改行スタイルを維持したい」
  • 「特定のデータ構造(JSON風のオブジェクト)だけは、インデントを独特なルールにしたい」

これらを制御するには、Prettierがコードをどのように「理解」しているか、つまりAST(Abstract Syntax Tree)に介入する必要があります。

—

2. ASTハックの仕組み:Prettierの裏側

Prettierは、以下の3ステップで動いています。
1. Parser: ソースコードを解析し、ツリー構造(AST)に変換する。
2. Printer: ASTを走査し、再構築してテキスト出力する。
3. Embed: 特定のノードに対して、独自のロジックを注入する。

我々が狙うのは「Printer」のカスタマイズです。特定のコメント(`// @my-custom-format`など)をAST上のノードとして検出し、それをトリガーにコード生成を分岐させます。

—

3. 実践:特定のコメントで整形を制御するプラグインを作る

まずは、プロジェクト内に `prettier-plugin-hack.js` を作成しましょう。これがあなたの開発体験を劇的に変えるエンジンのコアとなります。

ステップ1: プラグインの骨組み

// prettier-plugin-hack.js
module.exports = {
printers: {
estree: {
print(path, options, print) {
const node = path.getValue();

// ノードに特定のコメントが含まれているかチェック
if (node.leadingComments && node.leadingComments.some(c => c.value.includes(‘@no-format’))) {
// @no-format があれば、オリジナルのソースコードをそのまま返す(整形スキップ)
return options.originalText.slice(node.range[0], node.range[1]);
}

// それ以外は標準の整形を適用
return null;
}
}
}
};

ステップ2: プロジェクトへの統合

`package.json` にこのプラグインを読み込ませます。

{
“devDependencies”: {
“prettier”: “^3.0.0”
},
“prettier”: {
“plugins”: [“./prettier-plugin-hack.js”]
}
}

—

4. 動作確認:HelloWorldならぬ「制御の証明」

以下のコードを用意してください。

// index.js

// @no-format
const complexCalculation = {
a: 1, b: 2,
c: 3, d: 4
};

const normalCode = { a: 1, b: 2 };

ここで `npx prettier –write index.js` を実行すると、魔法が起きます。

  • `complexCalculation` は、あなたが書いた「崩れたインデント」のまま維持されます。
  • `normalCode` は、Prettierによって完璧に整列されます。

これができると何が嬉しいのか?
レガシーな巨大な配列や、どうしても人間が読みたい可読性を優先する計算式を、チームのフォーマット規約から「保護」できるようになります。コードレビューで「ここ、Prettierで崩れるから直して!」という不毛なやり取りが、世界から一つ消えるのです。

—

5. 最後に:アーキテクトからのアドバイス

この手法をマスターすると、コードは単なる文字列ではなく「制御可能な構造物」に見えてくるはずです。

ただし、「やりすぎないこと」が重要です。Prettierの本来の目的は「議論を止めること」にあります。このプラグインは、あくまで「どうしても譲れないロジックの保護」のためにだけ使い、乱用は避けてください。

もし、さらに高度な制御(特定の関数の引数だけ改行させない、など)をしたくなった場合は、`path.call` を使ってASTの深層を探索してみてください。そこには、あなたが今まで見たことのない、美しく整理されたコードの世界が広がっています。

さあ、あなたのプロジェクトにこの小さな「魔法」を組み込んでみてください。毎日のコーディング体験が、驚くほど軽やかになるはずですよ。

タイトルとURLをコピーしました