VS Codeでphpcsを使ってWordPressのコーディング規約に沿った整形をできるように設定する

Visual Studio Code(VSCode)で開発をしていて、WordPressのコーディング規約に沿ったコードを書けるように、チェックや自動整形をするための手順や設定のメモです。

PHP_CodeSnifferをインストール

PHPのコードが規約に沿った書き方をされているかチェックしたり、規約に合った形に自動整形をするツールのPHP_CodeSniffer(phpcs・phpcbf)をまずはインストールします。

※本記事では composer を使ってインストールします。composerの準備については割愛するので必要があれば別途検索してください🙇

まずはPHP_CodeSnifferをインストールします。

composer global require squizlabs/php_codesniffer

まずは動作しそうか確認しましょう。

phpcs -h
phpcs -i

command not found: phpcs とか言われたらちゃんとパスが通ってるか確認しましょう。

.zshrc に下記追加。source ~/.zshrcなりターミナル再起動なりで設定反映させましょう。

export PATH="$HOME/.composer/vendor/bin:$PATH"

WordPress Coding Standardsのインストール

WordPress関連の規約をインストールします。

composer global config allow-plugins.dealerdirect/phpcodesniffer-composer-installer true
composer global require --dev wp-coding-standards/wpcs:"^3.0"

インストールされたか・認識されてるか確認します。

phpcs -i

The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, Modernize, NormalizedArrays, Universal, PHPCSUtils, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra

WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra がリストアップされていればOK。

PHP Sniffer & Beautifierのインストール・設定

ココからはVSCodeでの設定など。

まずは、拡張機能から「PHP Sniffer & Beautifier」を追加します。

設定で「Executable Path CBF」「Executable Path CS」にそれぞれphpcsとphpcbfのパスを設定します。

「settings.jsonをいじったほうが早い！」って場合はこちらから

{
    "phpsab.executablePathCS": "/Users/[ユーザー名]/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs",
    "phpsab.executablePathCBF": "/Users/[ユーザー名]/.composer/vendor/squizlabs/php_codesniffer/bin/phpcbf",
    "phpsab.standard": "WordPress",
    "[php]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "valeryanm.vscode-phpsab"
    },
}

ちなみに phpsab.standard は phpcs.ruleset.xml などのファイルパスを設定することもできます。

ファイルパスを指定しておいても、プロジェクト内にphpcs.ruleset.xml などが作成されていればプロジェクトの方を優先して使うようなのでなかなか便利だなぁと思いました！

これで規約に沿ったキレイなコードが書けるようになるはず！