WordPressのテーマやプラグインを開発する方のために、「こういうルールでコードを書いてね」という指針を示した「WordPress コーディング規約」があるんですけど、僕が過去に関わったプロジェクトや、現在公開中のWordPressテーマやプラグインなどをこの規約に準拠した書き方にしようと思って、ただいま対応中です。
「結構な作業ボリュームだなぁ・・・」と感じていたのですが、PhpStormを使って自動で一括変換してくれる方法があることを知りました。
以下に手順を書きましたので、似たようなことで情報をお探しの方はご参考ください。使用する端末はMac(macOS Sierra)で、PhpStormのバージョンは2017.2です。
PHPコーディング規約(PHP_CodeSniffer:phpcs)をインストールする方法
Homebrewを使ってPHPコーディング規約(PHP_CodeSniffer:phpcs)をインストールします。
$ brew install php-code-sniffer
インストールが完了したら、以下のコマンドでバージョンを確認します(パスが通っていない場合は通してください)。
$ phpcs --version
以下のようにバージョン情報が表示されればOKです。
PHP_CodeSniffer version 3.1.1 (stable) by Squiz (http://www.squiz.net)
次に、WordPressのコーディング規約(WordPress Coding Standards for PHP_CodeSniffer:wpcs)をインストールします。
WordPressのコーディング規約(WordPress Coding Standards for PHP_CodeSniffer:wpcs)をインストールする方法
wpcsを動かすためには要件がありますので、要件に満たしているかどうかは、Githubのドキュメントを読んでください。
僕は開発環境としてVagrantを使っているんですけど、後々のことを考えて複数のプロジェクトをまとめてあるフォルダの一階層上にwpcsをインストールしました。(この辺は、ご使用の環境に合わせてインストールする場所を指定してください。)
というわけで、Composerを使ってWordPressのコーディング規約(WordPress Coding Standards for PHP_CodeSniffer:wpcs)をインストールします。
$ composer create-project wp-coding-standards/wpcs --no-dev
次に、インストールが完了したら、以下のコマンドを実行してWordPressのコーディング規約(wpcs)をphpcsに設定します。コマンド内の「/User/imamura/centos/wpcs」は例なので、ご自身の環境に合わせて、wpcsをインストールした場所のパスを指定してください。
& phpcs --config-set installed_paths /User/imamura/centos/wpcs
設定が完了したら、以下のコマンドを実行して利用できるコーディング規約を確認しましょう。
$ phpcs -i
コマンドを実行すると、以下のような結果が表示されればOKです。
The installed coding standards are MySource, PEAR, PSR1, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and WordPress-VIP
WordPress関連のコーディング規約が利用できるようになっていますね。次はPhpStormの設定を行います。
PhpStormでCode Snifferの設定
PhpStormを開いて、メニューの「Preference」から「Language & Frameworks」→「PHP」→「Code Sniffer」を選択します。
上の画像のように「Configuration」のリストの中から、今回はローカル環境のPHPを利用するので「Local」を選択して「OK」ボタンを押します。
続いて、メニューの「Preference」から「Editor」→「Inspections」を選択します。
上の画像のように「PHP Code Sniffer validation」にチェックを入れて、Coding standardのリストの中から「WordPress」を選択して「OK」ボタンを押します。
ここまでの設定がうまく行った状態で、プロジェクト内のファイルをPhpStormで開くとphpcsのwarningなどが表示されるようになります。
例えば、あるファイルに下のようなコードがあったとします。
1行目の薄く波線が引かれた箇所にマウスカーソルをあてると・・・「phpcs:Misshing file doc comment」と表示されました。
同じ要領で、2行目の波線が引かれた箇所にマウスカーソルをあてると・・・いくつかメセージが表示されていますね。「ifの後に1つ半角スペース入れてね」など「WordPressのコーディング規約はこうだよ」と教えてくれます。
上記のようにマウスカーソルをあてなくても、メニューの「Code」→「Inspect Code」を選択すれば、プロジェクト全体や特定のフォルダ内など検出する範囲を指定して、一覧でババっと表示もできます。
わりと易しい英文で変更内容が書かれているので、どう変更すればいいのかあまり迷うことはないとは思います。ただ、全てのファイルをいちいち開いて、該当する箇所を一つずつ変更するってのは手間がかかりますね。
なので、一括で変更してくれるように設定しましょう。
PhpStormの「External Tool」を使って一括変換しよう
PhpStormの「External Tool」を利用すると、特定の条件に該当するファイルやフォルダを対象にして一括で指定したプログラムを実行してくれます。この仕組みを利用して、WordPressのコーディング規約に準拠したコードに自動で一括変換します。
メニューの「Preference」から「Tools」→「External Tool」を選択します。初めて利用する方は何も作成されていないと思うので「+」を選択して新しく作成しましょう。
下の画像のようにいろいろと設定項目が表示されますが、今回は最低限の設定としてツール名と3つの箇所のみ例をご紹介します(そのほかの設定については省略します)
ツールの作成例
Name(ツール名) | Program(実行するプログラムのパス) | Parameters(コマンドに指定するパラメーター) | Working directory(適用フォルダ) |
---|---|---|---|
wpcs-single-folder | /usr/local/bin/phpcbf | –standard=WordPress –extensions=php -l $FileDir$ | $ProjectFileDir$ |
wpcs-selected-file | /usr/local/bin/phpcbf | –standard=WordPress –extensions=php -l $FilePath$ | $ProjectFileDir$ |
マクロもあらかじめ用意されています。上の例以外にも、お好みで条件を作ってツールを作成できますね。
「External Tool」の設定方法については「Run PHP CodeSniffer code beautifier and fixer from PhpStorm」を参考にしました。ありがとうございます。
ツールの作成ができたら、下の画像のように「External Tool」の一覧に表示されます。
これで準備ができました。実際に一括変換してみましょう。
一括変換してみよう
メニューの「Tools」→「External Tools」を選択すると、先ほど作成した2つのツールが使用可能になっています。
ツールを使ってみましょう。
特定のフォルダと同じ階層にある全てのファイルを一括変換(サブフォルダは除く)
例えば下の画像のような構成で「test」フォルダ内と同じ階層にある全てのファイルを変換します。「test」フォルダを選択して、メニューの「Tools」→「External Tools」から「wpcs-single-folder」を実行します。
すると「test」フォルダ内の3つのファイルが全て一括変換できました。
特定のファイルのみ一括変換
次は「test」フォルダ内から特定のファイル「home.php」を選択して、メニューの「Tools」→「External Tools」から「wpcs-selected-file」を実行します。
すると、下のように自動で変換されました。
というわけで、作成したツールを使って一括変換できました。
まとめ
PHP_CodeSniffer(phpcs)とWordPress Coding Standards for PHP_CodeSniffer(wpcs)のインストールとPhpStormの設定が必要ではありますが、少しの操作で一括でWordPressのコーディング規約に準拠したコードに変更してくれるのはかなり便利だなぁと思います。
ただ「External Tools」については注意点がありまして、全ての箇所を変換してくれるわけではなく、例えば「phpcs:Misshing file doc comment」などはテキストを自動で入力してくれるわけではないので、完璧に対応するにはやっぱり一つずつファイルを確認した方が確実だとは思いました。
もしかしたら「External Tools」でツールを作成する時に指定するプログラムなどを駆使すれば、テキストも自動で入れる方法があるかもしれないですね。phpcsもwpcsも深く理解しているわけではないので、もしご存知の方がいらっしゃいましたら、是非ともご教示いただけますと嬉しいです。
とは言え、自動で一括変換できるとかなり手間が減るので、別のところにリソースを費やすこともできます。効率化っていいですね!!
このページを共有する