Prettier コードフォーマッタ
現在、Prettier は Aura コンポーネントと Lightning Web コンポーネント (LWC) のほか、.json、.md、.html、.js などの標準ファイル形式もサポートしています。Prettier は、Dang Mai により開発されている、Prettier Apex プラグイン をインストールすると、Apex もサポートします。
前提条件#
このプラグインを利用するには、NodeJS および npm が必要です。設定の詳細については、Node.js および npm のダウンロードとインストールを参照してください。
インストール#
Prettier Apex プラグインをインストールするには、以下の手順に従います。
-
プロジェクトディレクトリのトップレベルに移動します。
-
プロジェクトに
package.jsonファイルが含まれているか確認してください。もし含まれていなければ、npm initを実行し、デフォルトのオプションをすべて受け入れます。 -
以下を実行します。
npm install -save-dev -save-exact prettier prettier-plugin-apex
プロジェクトのルートに設定ファイル .prettierrc を作成する必要があります。Prettier のフォーマットオプションについて詳しく知りたい場合は、他の設定オプションを参照してください。
{
"trailingComma": "none",
"overrides": [
{
"files": "**/lwc/**/*.html",
"options": { "parser": "lwc" }
},
{
"files": "*.{cmp,page,component}",
"options": { "parser": "html" }
}
]
}
注意: Aura の場合
"trailingComma": "none"設定は必須です。
ローカルの設定ファイルを作成した後、VS Code の Prettier 拡張機能をインストールします。ファイルを保存するたびにすべてのファイルがフォーマットされるようにしたい場合は、ユーザーとワークスペースの設定で editor.formatOnSave の設定を有効化してください。Prettier をプレコミットツールと一緒に使用して、ファイルをコミットする前にファイルを再フォーマットすることができます。詳しくは、Git hook の設定を参照してください。
Prettier Apex プラグインは、他のほとんどのフォーマッタよりも遅く実行されます。保存は重要な操作なので、ファイルを保存する前にプラグインがフォーマットを完了するまで待つかどうかを決めることができます。VS Code がどのように遅い保存操作を処理するかを参照してください。