【Mac】VSCodeでPHPをWordPressのコーディング規約準拠に自動フォーマットさせる方法

Takashi Fujisaki Takashi Fujisaki
edit 公開日
schedule 約 5,780文字
Web制作
PHP

PHPの設定（ローカル）

Composerのインストール

Composerがインストールされていない場合はインストールします。Homebrewでのインストールが簡単です。

brew install composer

ちなみにComposerとはPHPのパッケージマネージャーです。

composerで必要なツールをインストール

さて、composerで必要なツールをインストールしていきます。

PHP Code Snifferと WP Coding Standard、phpcodesniffer-composer-installerの3つをインストールします。

# プロジェクトディレクトリで実行
composer init --no-interaction
composer require --dev squizlabs/php_codesniffer
composer require --dev wp-coding-standards/wpcs
composer require --dev dealerdirect/phpcodesniffer-composer-installer
composer config allow-plugins.dealerdirect/phpcodesniffer-composer-installer true
  • squizlabs/php_codesniffer: PHP のコーディング規約チェックツール（PHPCS）。
  • wp-coding-standards/wpcs: WordPress 向けの PHPCS ルールセット。
  • “dealerdirect/phpcodesniffer-composer-installer“: PHPCS のルールセット（WPCSなど）を自動的に登録してくれるプラグイン。installed_pathsの手動設定が不要になる。

最後の行は “dealerdirect/phpcodesniffer-composer-installer” プラグインの仕様を許可しています。Composer2では明示的な許可が必要です。

composer.json がこうなっていればOK。

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

インストールしましょう。

composer install

ローカルのvendorフォルダにいろいろインストールされたことを確認します。

.phpcs.xmlを作成

.phpcs.xmlをローカルに作成します。ここでは主に除外パターンカスタムルールを設定します。
vendor、node_modulesをルールセットの適用から除外する場合はこんな感じ。
逆にsrcフォルダに限定するなら<file>./src</file>とします。

<?xml version="1.0"?>
<ruleset name="WordPress Coding Standards">
	<rule ref="WordPress-Core" />
	<arg name="extensions" value="php"/>
	<file>.</file>
	<exclude-pattern>*/vendor/*</exclude-pattern>
	<exclude-pattern>*/node_modules/*</exclude-pattern>
</ruleset>

ルールを除外する場合はこんな感じでruleタグの中に追加します。（4-5行目）

<?xml version="1.0"?>
<ruleset name="WordPress Coding Standards">
	<rule ref="WordPress-Core">
		<exclude name="WordPress.Files.FileName.InvalidClassFileName" />
		<exclude name="WordPress.Arrays.MultipleStatementAlignment.DoubleArrowNotAligned" />
	</rule>
	<arg name="extensions" value="php"/>
	<file>.</file>
	<exclude-pattern>*/vendor/*</exclude-pattern>
	<exclude-pattern>*/node_modules/*</exclude-pattern>
</ruleset>

VSCodeとの連携

お次はPHP Code SnifferをVSCodeと連携させ、自動化を実現します。

PHP Sniffer & BeautifierというVSCodeプラグインを使います。まずはこれをインストールしましょう。プラグインはこれひとつだけでOK。このプラグインはphpcs（PHP Code Sniffer・検査ツール）と phpcbf（PHP Code Beautifier & Fixer・フォーマット＆違反を自動修正）の2つの機能を併せ持っています。

似たようなプラグインが複数ありますが、これだけでOK。

というわけで、VSCode側の設定をしていきます。

.vscode/settings.json

{
  "[php]": {
    // ===== エディタ設定（PHPファイル限定） =====
    // デフォルトのPHPフォーマッタ拡張
    "editor.defaultFormatter": "valeryanm.vscode-phpsab",
    // 保存時に自動整形
    "editor.formatOnSave": true,
    // 貼り付け時に自動整形
    "editor.formatOnPaste": true,
    //デフォルトのタブ設定を解除
    "editor.detectIndentation": false,
    //インデントをタブ文字にする
    "editor.insertSpaces": false,
    //タブサイズを4に設定
    "editor.tabSize": 4,
    //改行コードを変更
    "files.eol": "\n"
  },
  // ===== phpsab（PHPCS/PHPCBF 連携）設定 =====
  // 自動修正（phpcbf）を有効化
  "phpsab.fixerEnable": true,
  // PHPCS 実行ファイルのパス
  "phpsab.executablePathCS": "./vendor/bin/phpcs",
  // PHPCBF 実行ファイルのパス
  "phpsab.executablePathCBF": "./vendor/bin/phpcbf",
  // 違反の出所（どの規約か）を表示
  "phpsab.snifferShowSources": true,
  // 保存時にsnifferを実行
  "phpsab.snifferMode": "onSave",
  // 自動適用を許可するルールセット
  "phpsab.allowedAutoRulesets": ["WordPress-Core"],
  // 既定のコーディング規約（WordPress/WPCSなどを束ねた自前定義想定）
  "phpsab.standard": "WordPress-Core"
}

VSCodeを再起動します。これでPHPの設定は完了。PHPファイルを保存するとWordPressコーディング規約に準拠したフォーマットに整形されます。やったぜ。

PHPの設定（グローバル）

「オレWordPressプラグインしか作らねーし一人でやってっからローカルでいちいち同じ設定やるのめんどいぜ」という方のために、上記設定をグローバルでやるための設定。

composerのインストールまでは同じ。

# グローバルにインストールしてどこでも実行可能にする
composer global require --dev squizlabs/php_codesniffer
composer global require wp-coding-standards/wpcs
composer global require dealerdirect/phpcodesniffer-composer-installer
composer global config allow-plugins.dealerdirect/phpcodesniffer-composer-installer true
composer global install

ちゃんとcomposer.jsonがグローバルに作成されているか確認します。

~/.composerにcomposer.jsonやvendorフォルダが生成されていることを確認しておきましょう。

パスを通しておきます。下の例は.zshrcに記述する例。

echo 'export PATH="$HOME/.composer/vendor/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

次に、.phpcs.xmlをホームディレクトリに保存しておきます。内容はローカルのものと同じでOK。

最後に、VSCodeのsetting.jsonに下記を記述。ほぼ同じだけど、実行ファイルのパスを絶対パスに変更。
ちなみに、~/から始まるパスは使えないっぽい。

{  
  "[php]": {
    // ===== エディタ設定（PHPファイル限定） =====
    // デフォルトのPHPフォーマッタ拡張
    "editor.defaultFormatter": "valeryanm.vscode-phpsab",
    // 保存時に自動整形
    "editor.formatOnSave": true,
    // 貼り付け時に自動整形
    "editor.formatOnPaste": true,
    //デフォルトのタブ設定を解除
    "editor.detectIndentation": false,
    //インデントをタブ文字にする
    "editor.insertSpaces": false,
    //タブサイズを4に設定
    "editor.tabSize": 4,
    //改行コードを変更
    "files.eol": "\n"
  },
  // ===== phpsab（PHPCS/PHPCBF 連携）設定 =====
  // 自動修正（phpcbf）を有効化
  "phpsab.fixerEnable": true,
  // PHPCS 実行ファイルのパス
  "phpsab.executablePathCS": "/Users/fujisaki/.composer/vendor/bin/phpcs",
  // PHPCBF 実行ファイルのパス
  "phpsab.executablePathCBF": "/Users/fujisaki/.composer/vendor/bin/phpcbf",
  // 違反の出所（どの規約か）を表示
  "phpsab.snifferShowSources": true,
  // 保存時にsnifferを実行
  "phpsab.snifferMode": "onSave",
  // 自動適用を許可するルールセット
  "phpsab.allowedAutoRulesets": ["WordPress-Core"],
  // 既定のコーディング規約（WordPress/WPCSなどを束ねた自前定義想定）
  "phpsab.standard": "WordPress-Core"
}

おわりに

JSやCSSと違い、PHPのこういった設定ってなんかよくわからん…。というわけで、WordPressのコーディング規約準拠にする方法をご紹介しました。

一見訳分からん設定のようだけど、ちゃんと整理して、それぞれの意味を理解しながらひとつずつやっていけばちゃんと腑に落ちるのでは？と思います。

というわけで以上です。よきWordPress生活を！

local_offer
PHP

トラックバック