Web制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

VSCodeでWordPressコーディング規約を使用したフォーマット(PHP編)

WordPressのコーディング規約は他のPHPコーディング規約よりも個性が強いです。
他のFW開発を経験した方がWordPressの開発に移行する際に壁となる1つだと思います。 人力でコード規約を100%守るのも限界があるので、VS Codeで自動フォーマットしようと思ったのですが
WPの規約で自動フォーマットする記事が無かったので記載します。

phpcs、phpcbfのインストール

PHP CodeSnifferのインストール

composerを使用してインストールします。
composer global require "squizlabs/php_codesniffer=*"
phpcs、phpcbfコマンドがインストールされます。
以下コマンドで確認します。
~/.composer/vendor/bin/phpcs --version 
~/.composer/vendor/bin/phpcbf --version
PHP_CodeSnifferのバージョンが表示されれば成功!

パスの登録

echo 'export PATH=$HOME/.composer/vendor/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
以下コマンドでパスが通っているか確認します。
phpcs --version
phpcbf --version
PHP_CodeSnifferのバージョンが表示されれば成功!

WordPressコーディング規約のインストール

インストールされているコーディング規約を確認します。
phpcs -i
出力結果を見ると、WordPressのコーディング規約らしきものは見当たりません。
PHP_CodeSniffer内には初期状態でWordPressのコーディングルールがインストールされていません。(悲しい) そのため、自分でルールを新たにインストールします。 こちらもcomposerを使用してインストールします。
composer global require wp-coding-standards/wp
WordPressのコーディング規約インストールが完了したら、phpcsで使用できるよう設定を追加します。
phpcs --config-set installed_paths ~/.composer/vendor/wp-coding-standards/wpcs
再度インストールされているコーディング規約を確認すると、「WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core」が追加されます。
phpcs -i

VS Codeにphpcbfをインストール、有効化

VS Codeの拡張機能であるphpcbfをインストールします。 インストールが完了したら、VS Codeの
設定->拡張機能->PHP Code Betutifiler and Fixer Configuration options->Phpcbf: Standardよりsetting.jsonを開くphpcbf.standard を以下のように設定します。
"phpcbf.standard": "WordPress"
設定が完了したら、任意のphpファイルを開いて
command+shift+Pでコマンドを表示し、
「PHP Code Beautifier and Fixer: Fix this file」を選択します。 開いていたphpファイルにフォーマットがかかり、WPのコーディング規約に則った記載にフォーマットしてくれます。 設定->拡張機能->PHP Code Betutifiler and Fixer Configuration options->Phpcbf: OnSave を有効にすれば
保存する度に自動フォーマットしてくれます。

対象はPHPだけ

今回はPHPのフォーマッターを使用した方法なので
自動フォーマットされる対象はPHPファイルのみです。 javascriptもWordPressのコーディング規約でフォーマットをかける方法があるようなので
こちらは次の機会に紹介します。