最終更新日：2021.06.01

【VSCode】WordPressコーディング規約に沿って、自動でPHPをフォーマットする設定方法

WordPressのテーマはPHPと合わせて、WordPressコーディング規約に基づいて作る必要があります。今回はVSCodeで自動でPHPをフォーマットする設定方法を紹介します。

前提条件は以下

PHPを自動でフォーマット
WordPress Coding Standardsに合わせてフォーマット
VSCodeの拡張機能phpcsとphpcbfを使う

説明環境は以下

macOS Catalina v10.15.5
Visual Studio Code v1.46.1

この記事の目次

WordPressコーディング規約に沿って、自動でPHPをフォーマットする設定方法

VSCodeの拡張機能をインストールすれば自動でフォーマットしてくれるわけではなく、PC本体にも以下の３つをインストールする必要があります。

Composer … PHPのパッケージを管理する
CodeSniffer … PHPのエラーを検出・修正してくれる
WordPressコーディング規約 … WordPressのルールに沿ってコーディングできているかチェックしてくれる。

まずはComposerをインストールしますが、macであればHombrewを通してインストールしたほうが管理がしやすくなります。

以下はイメージです。

Homebrewをインストール

Homebrewのインストールはターミナルを開いて以下のコマンドを打ちます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

コマンドはHomebrewのバージョンによって変わることがあるので、念のため公式サイトで確認してください。

参考

Homebrew

Hoebrew公式サイト

以下のコマンドを打ってインストールできているか確認します。

brew -v

インストールできていると以下のようにバージョンが表示されます。

Homebrew 2.6.2
Homebrew/homebrew-core (git revision 014762; last commit 2020-12-20)

Composerをインストール

Homebrewを使ってComposerをPCにインストールします。

brew install composer

以下のコマンドでインストールできたか確認します。

composer

インストールできていると以下のように表示されます。（以下は例です）

 / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.0.8 2020-12-03 17:20:38

CodeSnifferをインストール

Composerを使って、CodeSnifferをインストールします。

composer global require "squizlabs/php_codesniffer=*"

インストールできているか以下のコマンドで確認します。

.composer/vendor/bin/phpcs --version

インストールされていると以下のように表示されます。（以下は例です）

PHP_CodeSniffer version 3.5.8 (stable) by Squiz (http://www.squiz.net)

実際に使うにはパスが長いので、省略してコマンドを打てるようにします。

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

パスが省略できていると、以下のコマンドだけでバージョンが表示されます。

phpcs --version

WordPressコード規約をインストール

次にCodeSnifferで使うWordPressコード規約をインストールします。

composer global require wp-coding-standards/wpcs

インストールしたWordPressコード規約をCodeSnifferにセットします。

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

以下のコマンドでセットできているか確認します。

phpcs -i

インストールできていると以下のように表示されます。（以下は例です）

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

これでPC側の設定は完了です。次にVSCode側でインストールしたパッケージを使えるようにします。

VSCodeで自動でPHPをフォーマットする設定

次はVSCode側でWordPressコーディング規約に基づいてフォーマットさせる設定です。

まずは拡張機能から以下の２つをインストールします。

phpcs
phpcbf

拡張機能phpcsと、phpcbfをインストール

①のアイコンをクリックして、phpcsとphpcbfをそれぞれ検索します。

インストールできたら有効化します。
常に有効化せず、そのプロジェクトだけ有効化したいので、拡張機能の右下にある歯車をクリック。【有効にする（ワークスペース）】を選択しましょう。

VSCodeのsetting.jsonに書くこと

拡張機能phpcsとphpcbfを使って自動でフォーマットする設定をsetting.jsonに書いていきます。

【 commnad + , 】（Windowsはcntrl + ,）で設定画面を開きます。下の歯車アイコンからも開くことができます。

今回のプロジェクトだけ設定したいので、【ワークスペース】を選択している状態で、右上にある②のアイコンをクリックします。

今回のプロジェクト用のsetting.jsonが開くので以下を書き込みます。

{
"phpcs.executablePath": "/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcs",
"phpcbf.executablePath": "/Users/{ユーザー名}/.composer/vendor/squizlabs/php_codesniffer/bin/phpcbf",
"phpcs.standard": "WordPress", //phpcsにWordPressの規約を適用
"editor.detectIndentation": false, //デフォルトのタブ設定を解除
"editor.insertSpaces": false, //インデントをタブ文字にする
"editor.tabSize": 4, // 【wordpress用】タブのサイズを４に変更
"files.eol": "\n", //改行コードを変更
"phpcbf.standard": "WordPress", //phpcdfにWordPressの規約を適用
"phpcbf.onsave": true, //ファイルを保存したときにフォーマット	
}

２行目と３行目ではPC本体にインストールしたphpcsとphpcbfまでのパスを書きます。{ユーザー名}の部分は、ご自身の環境に合わせて変更してください。

VSCodeを再起動させれば、このプロジェクトだけフォーマットしてくれる設定になります。

フォーマット機能が効かない場合は？

今回の設定をしてもフォーマット機能が機能しない原因は以下です。

VSCodeに備わっている機能でPHPをフォーマットしている
別の拡張機能でPHPをフォーマットしている

今回の設定でPHPのフォーマットを有効化させるためには、VSCodeの基本設定で、その他のフォーマット機能を無効にする必要があります。

基本設定でPHPのフォーマットを無効にする

私のVSCodeでは拡張機能Prettierでフォーマット設定をしているので、PHPだけは無効にする必要があります。

【 commnad + , 】（Windowsはcntrl + ,）で設定画面を開きます。次に【ユーザー】を選択して、右上にある②のアイコンをクリックします。

setting.jsonが開かれるので、以下のように書きます。拡張機能PrettierではPHPをフォーマットさせないようにしています。

{
"editor.defaultFormatter": "esbenp.prettier-vscode", //拡張機能Prettierをデフォルトのフォーマッターとして設定

  "[html]": {
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.defaultFormatter": null,
    "editor.formatOnSave": false
  },
  "[scss]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[php]": {
    "editor.defaultFormatter": null, //拡張機能phpcsとphpcbfでフォーマットさせたいので拡張機能Prettierを解除
    "editor.formatOnSave": false //PHPは通常のプロジェクトでは自動フォーマットさせない
  },
}

ちなみにVSCodeの初期設定でsetting.jsonに書く内容は以下の記事に書いているので参考にしてみてください。