VSCode + phpcs + phpcbf でワードプレスコーディングルールを楽々自動適用

今回は VSCode で phpcs と phpcbf を利用して、ソースコードにワードプレスのコーディングルールを自動的に適用する方法について解説します。

コーディングルールとはソースコードの書き方のルールで、特に複数メンバーで開発を行う際にメンバー間でソースコードの書き方が統一されるように定めたものです。

メンバー間でソースコードの書き方が統一されるので、他メンバーのソースコードも読みやすくなります。

またバグが起こりやすいソースコードの書き方を禁止することで、安全なプログラムを開発することもできます。

ワードプレスでは下記の公式サイトでコーディングルールが公開されており、そのルールに則ってソースコードを記述することが推奨されています。

WordPress コーディング規約

読んでみていただければ実感していていただけると思いますが、全ルールを覚えてソースコードを記述するのは大変です…。

しかし、今回紹介する phpcs と phpcbf を導入すれば、これが簡単に行えるようになります。

具体的には、 phpcs はワードプレスのコーディングルールを違反しているソースコードをエラーとして表示してくれるようになります。

下の図の赤波線の部分がコーディングルールに違反している箇所になります。

下側の問題画面には、どうコーディングルールを違反しているかのメッセージが表示されます。

さらに phpcbf はワードプレスのコーディングルールに違反しているソースコードを、ワードプレスのコーディングルールに則る形に自動的に修正してくれます（ただし全て完全に修正されるわけではない）。

例えば上の図のソースコードは下のように修正してくれます。

phpcs と phpcbf は、本職がワードプレス開発の方だけでなく、ブログなどでワードプレスのソースコードを公開する方にもオススメです。

今回はこの phpcs と phpcbf を導入し、VSCode で利用する方法について解説します。

MacOSX を用いた方法の解説になりますが、他の OS を利用している方にも参考になると思います。

VSCodeで phpcs と phpcbf を利用するための手順

VSCode には phpcs と phpcbf のプラグインがあるので、それをインストールすれば終わりじゃ無いの？という疑問もあると思います。

実は、それだけではダメなんです。

これらのプラグインには phpcs と phpcbf の本体が含まれていません。単に VSCode 上で phpcs や phpcbf を使用するためのプラグインです。本体が無いと動きません。

ですので、VSCode のプラグインをインストールだけでなく、phpcs と phpcbf の本体もインストールする必要があります。

また phpcs も phpcbf も初期状態ではワードプレスのコーディングルールを知りませんので、別途ワードプレスのコーティングルールをダウンロードし、それを phpcs や phpcbf に参照させてルールを教えてやります。

さらに、プラグインには phpcs 本体や phpcbf 本体が使用できるように、本体がある場所を設定する必要があります。また、どのコーディングルールを適用するか（今回はワードプレスのコーディングルール）の設定も必要です。

ここまでを踏まえて、VSCode で phpcs と phpcbf をインストールし、ワードプレスコーディングルールを適用するためには大きく分けると下記の四つの作業が必要になります。

• phpcs 本体と phpcbf 本体のインストール
• ワードプレスコーディングルールのインストール
• VSCode への phpcs プラグインのインストールと設定
• VSCode へのphpcbf プラグインのインストールと設定

phpcs 本体と phpcbf 本体のインストール

まずは phpcs と phpcbf の本体をインストールします。

phpcs と phpcbf は composer というソフトをインストールしておくと、コマンド一つでインストール可能です。

また composer は HomeBrew というソフトをインストールしておくと、コマンド一つでインストール可能です。

なので、手順的にはまず HomeBrew と composer をインストールし、その後に目当ての phpcs 本体と phpcbf 本体のインストールを行っていきたいと思います。

スポンサーリンク

HomeBrew のインストール

HomeBrew はパッケージ管理システムで、いろんなソフトをインストールするのに便利なソフトウェアです。

まずは下記リンク先の HomeBrew のウェブサイトに行きます。

https://brew.sh/index_ja

すると、下図のようにスクリプトが記載されているので、このスクリプトをコピーします。

そして、このコピーしたスクリプトをターミナルアプリにペーストして Enter キーを押せば HomeBrew のインストールが始まります。

Composer のインストール

Composer もパッケージ管理システムで、こちらは PHP に特化したものとなっています。

HomeBrew を使えば、ターミナルアプリで下記コマンドを実行するだけで Composer をインストールすることができます。

brew install composer

phpcs と phpcbf インストール

phpcs と phpcbf は下記の composer コマンドによりターミナルアプリで実行すればインストールできます。

composer global require "squizlabs/php_codesniffer=*"

特に設定を変更していない場合、下記のパスに phpcs 本体が、

/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs

下記のパスに phpcbf 本体がインストールされます。

/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcbf

これらの phpcs 本体と phpcbf 本体のパスはプラグイン設定時に使用しますので覚えておきましょう！

下記コマンドを実行し、実行結果に phpcs と phpcbf が表示されればインストールは成功です。

ls ~/.composer/vendor/squizlabs/php_codesniffer/bin/

スポンサーリンク

ワードプレスコーディングルールのインストール

次に、phpcs や phpcbf が利用するワードプレスのコーディングルールをインストールします。

これは下記コマンドにより、ワードプレスのコーディングルールのダウンロードを実行することができます。

composer global require wp-coding-standards/wpcs

さらに、下記コマンドを実行することで、ワードプレスのコーディングルールを phpcs と phpcbf に認識させる（教える）ことができます。

~/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs --config-set installed_paths ~/.composer/vendor/wp-coding-standards/wpcs

下記の２つのコマンドを実行し、それぞれの結果に「WordPress」「WordPress-Extra」「WordPress-Docs」「WordPress-Core」が表示されれば成功です。

~/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs -i

~/.composer/vendor/squizlabs/php_codesniffer/bin/phpcbf -i

VSCode への phpcs プラグインのインストールと設定

次は VSCode にプラグインを追加し、VSCode から phpcs が利用できるようにしていきます。

phpcs プラグインのインストール

まずは phpcs プラグインのインストールを行います。

プラグイン検索画面で「phpcs」と検索すれば、phpcs プラグインが見つかりますのでインストールを行いましょう。

これだけでインストール自体は完了です。

スポンサーリンク

使用する phpcs 本体の設定

次に phpcs プラグインが使用する phpcs 本体の設定を行います。

phpcs プラグインの歯車マークをクリックし、メニューから「Extension Setting」を選択します。

いくつか設定項目がありますが、その中に下の図のような Executable Path 設定箇所があります。

ここに phpcs 本体へのパスを設定します。

前述の通り、特に設定を変更していない場合は phpcs 本体は下記のパスにインストールされているはずなので、このパスを入力して設定してください（ユーザー名はご自身のものに置き換えてください）。

/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs

これで phpcs プラグインが phpcs 本体を使用できるようになります。

スポンサーリンク

適用するコーディングルールの設定

次は phpcs プラグインが参照するコーディングルールの設定を行います。この参照するルールに違反している箇所を phpcs がエラー表示してくれるようになります。

「Extension Setting」の画面中に下の図のような phpcs:Standard を設定する箇所があります。

ここで「setting.json で編集」をクリックします。

すると setting.json の編集画面に遷移しますので、そこに「”phpcs.standard”: “WordPress”,」を追記します。

追記後はおそらく下記のようになるはずです。

{
    "phpcs.executablePath": "/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs",
    "phpcs.standard": "WordPress",
}

これにより phpcs がワードプレスのコーディングルールに基づいて、ルール違反をエラー表示してくれるようになります。

動作確認

最後に動作確認をしてみましょう。何か適当な PHP ファイルを開いてみてください。

コーディングルール違反部分に赤波線が付くようになり、さらに問題画面に「phpcs」が含まれるエラー分が表示されていたら動作確認 OK だと思います。

スポンサーリンク

VSCode へのphpcbf プラグインのインストールと設定

次は phpcbf プラグインを VSCode にインストールし、プラグインの設定を行っていきます。

といっても、やることはほぼ phpcs プラグインの時と同じです。

phpcbf プラグインのインストール

まずは phpcbf プラグインのインストールを行います。

プラグイン検索画面で「phpcbf」と検索すれば、phpbf プラグインが見つかりますのでインストールを行いましょう。

使用する phpcbf 本体の設定

次に phpcbf プラグインが使用する phpcbf 本体の設定を行います。

phpcs の時と同様に「Extension Setting」から Executable Path 設定箇所に、phpcbf の本体のパスを入力します。

特に設定を変更していない場合は phpcbf 本体は下記のパスにインストールされているはずなので、このパスを入力して設定してください（ユーザー名はご自身のものに置き換えてください）。

/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcbf

ファイル名が「phpcs」ではなく「phpcbf」であることに注意しましょう！これで phpcbf プラグインが phpcbf 本体を使用できるようになります。

スポンサーリンク

適用するコーディングルールの設定

これも phpcs と同様です。

「Extension Setting」の phpcbf:Standard 設定から「setting.json の編集」をクリックし、setting.json の編集画面に移ります（この setting.json は phpcs 設定時に編集したファイルと同じものになります）。

そこに「”phpcbf.standard”: “WordPress”,」を追記します。

追記後はおそらく下記のようになるはずです。

{
    "phpcs.executablePath": "/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs",
    "phpcs.standard": "WordPress",
    "phpcbf.standard": "WordPress",
    "phpcbf.executablePath": "/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcbf",
}

記載されている順番は違ってもオーケーです。

これにより phpcbf がワードプレスのコーディングルールに基づいて、ルール違反箇所を修正してくれるようになります。

動作確認

最後に動作確認を行います。

まずはワードプレスのコーディングルールに違反しているソースコードを開きます。

続いてソースコード上で右クリックを行ってコンテキストメニューを開きます。

コンテキストメニューの「ドキュメントのフォーマット」をクリックしてみましょう！

ソースコードが自動修正され、コーディングルール違反として表示されているエラーが無くなる（or 減る）が確認できれば動作確認 OK です。

ソースコード の自動整形を行うプラグインを他にも入れている場合（例えば PHP Intelephense など）、コンテキストメニューに「ドキュメントのフォーマット」と「ドキュメントをフォーマット…」の２つが表示されることになります。

この時は、下側の「ドキュメントをフォーマット…」を選択します。

すると、下のようなフォーマッタ選択ウィンドウが開きますので、ここで phpcbf を選択すれば、phpcbf プラグインに設定されているコーディングルール（つまりワードプレスのコーディングルール）に合わせてソースコードを整形してくれます。

もしくは上のウィンドウで「既定のフォーマッタを構成…」を選択し、さらに遷移したウィンドウで phpcbf を選択してやれば、デフォルトで使用するフォーマッタが phpcbf に設定することができます。

これにより、コンテキストメニューの「ドキュメントのフォーマット」をクリックするだけでワードプレスのコーディングルールに合わせたソースコードの整形ができるようになります。

参考サイト

主に「phpcs 本体と phpcbf 本体のインストール」「ワードプレスコーディングルールのインストール」については下記のページを参考にさせていただきました。

すごく分かりやすくて助かりました。ありがとうございます。

https://taxaboxo.com/blog/mac-visulstudiocode-phpcs-wordpress/

スポンサーリンク

まとめ

このページでは VSCode に phpcs と phpcbf を導入し、さらにワードプレスのコーディングルールに違反するソースコードのエラー表示と自動修正を行う手順について解説しました。

今回紹介した方法を使えばワードプレスのコーディングルールを覚えていなくても、コーディングルールに則ったコーディングができるようになります！

ワードプレス開発者やブログ等でソースコードを公開してるような方は是非活用してみてください！

と、偉そうなことを言ってますが、私もワードプレスのコーディングルールを知らなかったので今公開してるソースコードはルールに違反しまくってます…。

これに気付いたことがこのページを作ろうと思ったきっかけです…。

これからこの方法で VSCode でソースコードを修正していこうと思います！