VSCodeでPHPの構文チェックとフォーマットを自動化する

VSCodeで構文チェックの自動化とフォーマット、これまでJavaScript, CSS, HTMLについては解説してきました。今回はその流れでPHPも行っちゃおうということでやっていきます。

あわせて読みたい

構文チェックにはPHP Intelephenseを使おう

PHP Intelephense は、Visual Studio Code（VSCode）で PHP を扱う際に便利な拡張機能です。構文チェックのみならず、コード補完やフォーマット機能などの機能が豊富で、効率的なPHP開発に必要な機能を備えています。

ぶっちゃけPHP周りはこれひとつでも充分。というわけで、インストールして有効化するだけで構文チェックやコード補完機能が使えるようになります。

PHP Intelephenseの構文チェックをWordPressに対応させる

デフォルトのままだとWordPressのテンプレートタグに思いっきりエラー出まくります。たとえば the_content() なんて書こうものなら、そんな関数は定義されてないよ！ってことでゾウさん激おこです。

というわけで、WordPressのテンプレートタグに対応させましょう。

PHP IntelephenseにWordPressのテンプレートタグを認識させる手順

VSCode上で command + , で設定画面を開き、intelephense stubs で検索します。

下にスクロールして「項目の追加」をクリック。

プルダウンでWordPressを選択してOKボタンをクリック。

以上で設定完了。これで the_content() もthe_title() も書き放題！心ゆくまでWordPress地獄にどっぷり浸かっちゃいましょう。

PHP Intelephenseでコードをフォーマットする

VSCodeのSetting.jsonに以下のコードを追加します。このコードの意味は、PHPファイルのデフォルトのフォーマッターとしてPHP Intelephenseを指定するというものです。

{
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }
}

フォーマット形式の細かい設定は、VSCodeの設定で intelephense で出てくる各項目で行えます。

コードフォーマットを自動化する

コードフォーマットの自動化は VSCodeのsetting.jsonに下記のように記述します。これでファイル保存時に自動的にフォーマットが走ります。

{
  // VSCode全体に設定する場合
  "editor.formatOnSave": true,
  // PHPファイルに限定して設定する場合はこの中に書く
  "[php]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

PHPもPrettierでフォーマットしたい！

JS, CSS, HTMLとみんなPrettierでフォーマットしているし、この際PHPもPrettierで行きたいんじゃー！

という画面の向こうで興奮しているあなた、僕も同じ気持ちです！というわけで設定していきましょう。

ちなみに、PrettierでPHPをフォーマットするには別途プラグインが必要です。

Prettierのインストールや設定にについてはこちらの記事内「PrettierでJSの整形をするための設定」もご覧ください。

忙しい人のためのPrettierインストール

プロジェクトへprettierとPHPプラグインをインストール。

yarn add -D prettier @prettier/plugin-php

Prettierの設定ファイル .prettierrc.json に下記を追加します。

{
  "plugins": ["@prettier/plugin-php"]
}

次に、PrettierのVSCodeプラグインをインストールして有効化。

VSCodeの設定ファイルに、Prettierをフォーマッタとして使う設定と、保存時にフォーマットをかける設定を記述します。PHPに限定して設定することもできます。併記した場合はPHPファイルに限定した記述が優先します。

{
  // VSCode全体に設定する場合
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  // HTMLファイルに限定して設定する場合
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

まとめ

というわけで、PrettierはJS, CSS, HTMLに加えPHPでもフォーマッターとして活躍してくれます。設定がめちゃくちゃシンプルになるし、全体的な統一感にも繋がります。以前の僕のようにJSはESLintのフォーマッタ、CSSはStylelintのフォーマッタ、HTMLは…とそれぞれでやっていた方はこの機会に見直してみてはいかがでしょうか。

今回はPHP x PHP Intelephanse x Prettierのお話でしたが、JS, CSS, HTMLについてもご覧ください。それではまた！