VS CodeでWordPress-Coding-Standardsのルールで自動フォーマットする方法

2025年1月3日

はにわまん

前提として「Composer」「Node.js」を自分のパソコンにインストールしておきます。

また、プロジェクトに必要なツールとしては、「PHP_CodeSniffer」「WordPress/WordPress-Coding-Standards」です。

さらに、VS Codeで活用するために、「PHP Sniffer & Beautifier – Visual Studio Marketplace」を入れていきます。

では順番に見ていきましょう。

Composer経由でインストール

squizlabs/php_codesnifferをインストール。

composer require --dev squizlabs/php_codesniffer

wp-coding-standards/wpcsをインストール

composer require --dev wp-coding-standards/wpcs

dealerdirect/phpcodesniffer-composer-installerをインストールしてもいいか？と聞かれるのでyを選択。

dealerdirect/phpcodesniffer-composer-installer contains a Composer plugin which is currently not in your allow-plugins config. See https://getcomposer.org/allow-plugins
Do you trust "dealerdirect/phpcodesniffer-composer-installer" to exit now? (writes "allow-plugins" to composer.json) [y,n,d,?]

インストールできると以下のファイルが出来上がります。

vendor
composer.json
composer.lock

composer.jsonの中身は以下のとおりです（2025年1月時点）

{
    "require-dev": {
        "squizlabs/php_codesniffer": "^3.11",
        "wp-coding-standards/wpcs": "^3.1"
    },
    "config": {
        "allow-plugins": {
            "dealerdirect/phpcodesniffer-composer-installer": true
        }
    }
}

インストールされているルールの確認

様々なコーディングのルールがインストールされているはずです。以下のコマンドで確認しましょう。

./vendor/bin/phpcs -i

WordPressの「WordPress」「WordPress-Core」「WordPress-Docs」「WordPress-Extra」が入っていることが分かります。

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のルールが追加されていない場合は以下のコマンドで追加する。

./vendor/bin/phpcs --config-set installed_paths ./vendor/wp-coding-standards/wpcs

phpcsでエラーチェック

phpcsコマンドを使ってWordPress-Coding-Standardsのルールを使ってコードのエラーチェックが可能になりました。

特定のファイルを対象にする場合は、ファイルへのパスを記載します。

./vendor/bin/phpcs ./functions.php

ディレクトリ配下のファイルを全て対象にする場合は、ディレクトリを指定します。

./vendor/bin/phpcs ./template-parts

ルールを定義してチェックする方法

さらに.phpcs.xmlファイルを追加するとルールを定義することができます。例えば、WordPress-DocsやWordPress-Extraなどを使わずに、WordPress-Coreだけを使う場合は以下のように記載します。また、ルールの中でもexcludeのように細かく指定することも可能です。

<?xml version="1.0"?>
<ruleset name="WordPress Coding Standards">
	<rule ref="WordPress-Core">
		<!-- <exclude name="Generic.Files.EndFileNewline.NotFound"/> -->
		<!-- <exclude name="Generic.Arrays.DisallowShortArraySyntax.Found"/> -->
	</rule>
	<arg name="extensions" value="php"/>
</ruleset>

定義したルールを活用する場合は、以下のように--standardオプションに定義したファイルまでのパスを記載します。

./vendor/bin/phpcs --standard=./.phpcs.xml ./functions.php

VS Codeで自動フォーマットする

続いては、VS Codeで自動フォーマットしていきましょう。「PHP Sniffer & Beautifier – Visual Studio Marketplace」をインストールします。

プロジェクトに.vscode/settings.jsonを追加して設定を追加していきましょう。少し長いですが、以下のような設定になります。

{
	"[php]": {
		"editor.defaultFormatter": "valeryanm.vscode-phpsab",
		"editor.formatOnSave": true
	},
	"phpsab.fixerEnable": true,
	"phpsab.executablePathCS": "./vendor/bin/phpcs",
	"phpsab.executablePathCBF": "./vendor/bin/phpcbf",
	"phpsab.snifferShowSources": true,
	"phpsab.snifferMode": "onSave",
	"phpsab.allowedAutoRulesets": [
		"./.phpcs.xml",
	],
	"phpsab.standard": "./.phpcs.xml",
}

editor.defaultFormatter	フォーマットのルールとしてvaleryanm.vscode-phpsabを活用する
editor.formatOnSave	保存時に自動でフォーマットする
phpsab.fixerEnable	修正も含める
phpsab.executablePathCS	チェック用のパス
phpsab.executablePathCBF	修正用のパス
phpsab.snifferShowSources	問題が起きた時にソースも表示する
phpsab.snifferMode	保存時に実行する
phpsab.allowedAutoRulesets	読み込むルールのパス
phpsab.standard	標準で使うルールへのパス

VS Codeを再起動してください。保存時にルールに沿ってフォーマットされることが確認できます。

この記事が気に入ったら
フォローしてね！

Follow @haniwa008

この記事を書いた人