• 作成日:

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

【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本体にも以下の3つをインストールする必要があります。

  • 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のバージョンによって変わることがあるので、念のため公式サイトで確認してください。

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

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コーディング規約に基づいてフォーマットさせる設定です。

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

  • 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用】タブのサイズを4に変更
"files.eol": "\n", //改行コードを変更
"phpcbf.standard": "WordPress", //phpcdfにWordPressの規約を適用
"phpcbf.onsave": true, //ファイルを保存したときにフォーマット	
}

2行目と3行目では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に書く内容は以下の記事に書いているので参考にしてみてください。

さいごに - 実際にフォーマットさせてみる

過去に作ったWordPressテーマをフォーマットさせてみました。以下はフォーマットさせる前です。エラーがびっしり表示されています。

phpファイルを保存すると以下のようにフォーマットされました。「問題」に表示されているエラーが675から256まで減っていることがわかります。その中で重要なエラーは40件まで減りました。

注意点としては、自動でフォーマットしてくれると言ってもすべて修正してくれるわけではありません。フォーマットされなかったエラーは、エラー内容を確認して1つずつ修正していく必要があります。

今回はVSCodeで、WordPressコーディング規約に沿ってPHPをフォーマットする設定方法を紹介しました。これからWordPressテーマを作成する方は参考にしてみてください。