はじめに
Prettierは、JavaScript、TypeScriptなどのコードの書式を自動的に整形するツールです。開発チーム内でコーディングスタイルを統一したい場合や、既存のコードベースに対して一貫性を持たせたい場合などに非常に有用です。WordPressテーマやプラグインでの利用も可能です。
症状・背景
このテーマが必要になる主な場面:
- チーム内でコーディングスタイルを統一したい
- 既存のコードベースに対して一貫性を持たせたい
- JavaScriptファイルの書式を自動的に整形したい
- コードレビューの効率化を図りたい
手順・設定方法
ステップ1: Prettierのインストール
# WordPressテーマまたはプラグインディレクトリに移動します。
cd /path/to/your/theme-or-plugin
# npmパッケージとしてPrettierをインストールします。
npm install --save-dev prettier
# Prettierの設定ファイル（prettierrc.json）を作成します。
npx prettier --initステップ2: プロジェクト設定ファイルの編集
# Prettierの設定ファイルを編集します。ここでは、JavaScriptの書式設定に関する基本的なルールを定義します。
nano .prettierrc.jsonステップ3: VS Codeとの連携
# VS Code用のPrettier拡張機能をインストールします。
code --install-extension esbenp.prettier-vscode
# VS Codeで開発環境を構築します。
cd /path/to/your/theme-or-plugin
code .
# Prettier設定ファイル（.prettierrc.json）が存在する場合、VS Codeは自動的にそれを読み込みます。必要に応じてカスタマイズを行います。ステップ4: 実践とトラブルシュート
# Prettierを使ってコードを整形します。
npx prettier --write .
# フォーマット後のファイルを確認します。
git diff注意事項
- グローバルなnpmインストールは避けて、プロジェクトごとにPrettierをインストールすることをお勧めします。
- VS Code以外のエディタを使用している場合、適切な拡張機能やプラグインを探して利用しましょう。
- Prettierの設定ファイル（prettierrc.json）を適切にカスタマイズすることで、チーム内のコーディングスタイルを効果的に統一することができます。
まとめ
1. インストール: WordPressテーマまたはプラグインディレクトリでPrettierをnpmパッケージとしてインストールします。
2. 設定ファイル: Prettierの設定ファイル（prettierrc.json）を作成し、JavaScriptの書式設定ルールを定義します。
3. VS Code連携: VS Code用のPrettier拡張機能をインストールし、開発環境を構築します。
4. フォーマット: Prettierを使ってコードを整形し、フォーマット後のファイルを確認します。
関連記事: