Local (Beta) v5.0.x で PhpStom (Visual Studio Code) で Xdebugを有効にする方法(PHP Snifferも)

概要

ものすごくハマったのでメモします（macOS High Sierra環境)

普段はプログラミングをしないのに、開発環境作りに時間がかかるなんて・・・。そんな思いをしないためのメモです。

結論は、

• xdebug の設定で、xdebug.remote_connect_back=Off とする

以下、WordPressの開発環境構築も含め、ざっと説明します。

Local by Flywheel

2019.11.26現在、macOS high Sierra でWebサイトにアクセスすると、「ver5.0.x」がダウンロードされる。インストールしたら、思いっきり「Beta」と書いてある。

利点は「2倍以上の高速化」。起動も、再起動も、動作も早い。

（Virtualboxではなく、macのDockerを使っているのかしら。詳しく知るほどの知識はありません）

欠点は、便利なAddonと、カスタマイズが一切なくなったこと。そのうち、実装されるらしい。Betaだからないとのこと。

重要: WordPressの準備と、PHPの設定変更

• Query Monitor プラグインをインストール（何かと便利）
• PHPの設定を変更する（VMを再起動すること）

[xdebug]

(もともと何か書いてある)

xdebug.remote_enable=1
xdebug.remote_autostart = 1
xdebug.remote_port="9000"
xdebug.profiler_enable=0
xdebug.show_local_vars = 1

xdebug.remote_connect_back=On はしない。PhpStormは、高機能が故に、この設定があるとうまくいかない。vscodeは平気だった。

補足: Local by Flywheel (3.x) から 5.0.xへ

v3系で、仮想環境(WordPress）を export します。zipファイルができます。これを、新しいLocal (by Flywheelをなくして、Localと呼ぶらしい。あるいは、Local lightning?）に、importする。

PHP Code Sniffer

蛇足ですが、情報が古かったりするので本家で調べて、その方法を使いました。本家（WordPressのCode Snifferの説明）では、プロジェクトの中に、Code Snifferを入れることを推奨しているが、とりあえず、無視。

以下のような手順で、Code Sniffer をインストール

• homebrew をインストール
• homebrew で composer をインストール
• composer で以下のようなコマンドでインストール

composer global require "squizlabs/php_codesniffer=*"
composer global require phpcompatibility/php-compatibility
composer global require wp-coding-standards/wpcs
composer global require dealerdirect/phpcodesniffer-composer-installer

dealerdirect/phpcodesniffer-composer-installer を入れると、code snifferの設定が省ける（自動でやってくれる）。WordPressのgithubにて推奨されてました（for youとか書いてました）。

.bash_profile に追記。ターミナルを再起動（sourceコマンドがかっこいい）。

export PATH=$HOME/.composer/vendor/bin:$PATH
source ~/.bashrc

Visual Studio Code + Xdebug

参照 : https://gist.github.com/ahmadawais/d6e809d45b8103b2b3a79fa8845f9995

準備

• visual studio code をインストールする
• 以下の拡張を入れる
  • Wordpress Development
  • phpcs
  • php sniffer
  • php intellisense
  • php extension pack
  • php debug

Workspaceの作り方

Localの ドメイン/app/public/ をVSCodeで開く（ホームのLocal sites です）。

次にサイドバーのDebugアイコンをクリックし、歯車アイコンをクリックし、PHPを選ぶ。 .vscode/launch.json が作られるので、それを編集する。

上記のように、以下を追加。コンマを直前に忘れずに（jsonとして正しく書くために）。

"pathMappings": {
    "/app/public": "${workspaceRoot}"
}

あとは、デバッグテストする。他の有用なサイトをご覧ください。

Code Sniffer 設定

サイドバーのギアアイコンをクリックし、設定を呼び出す。

PHPCS と検索する。

• PHP Sniffer: RUN で onTypeにした（せっかちなんで）
• PHP Sniffer: で WordPress を記述

スペースではなく、タブを使う必要があるので

• insert space で検索し、スペースを入れるのではなく、tab を使うように設定

PhpStorm の設定

プロジェクト作成

• WordPressプラグインを選ぶ
• Location、WordPress Installation path 共に、 app/public を指定する
• OKする

すると、WordPressサポート関連をするか？と聞かれるので、OKをしていく。

Code Sniffer

• Language & Frameworks -> PHP -> Quality Tools を開く
• Code Sniffer の configuration の ... をクリックする
• PHP Code Sniffer のパスを設定する
  • フォルダアイコンをクリック
  • Cmd + Shift + . で隠しファイル・フォルダを表示状態にする
  • ホームの .composer/vendor/bin/phpcs を選択する
  • 同様に、phpcbf も設定する
• validate でOKが出たら良し

次に、inspections の設定をする。色々やることがあってややこしいが、案内が丁寧に出る。ただし、以下の注意が必要（2019.2.4時点のバグかもしれない）

• Editor > Inspections > PHP > Quality tools > PHP Code Sniffer validation にチェックを入れたら、 一旦、OKでダイアログを閉じる

それから、Preferenceを開き直す。そして、Coding Standard に WordPress を選ぶ。選択できるようになっているはず。

Xdebug

右上のデバッグ用のボタンの「add configuration」をクリックする。ダイアローグ画面の左上の + を押す（テンプレートは触らない。ややこしい）。PHP Web Page を選ぶ。

わかりやすいように、PHP Web Pageの設定を Local by Flywheel と名付ける。

Configurationの Server: の ... をクリックする。サーバーを追加する必要があるので、+を押して追加。Name:はまたしてもLocal by Flywheelとする（何でもいい）。Hostは、localhost ではなく、Localでつけた xxx.local とする。OKする。

一応、validation しての良いだろう。

次に、デバッグのための「リッスン状態」にする。先のボタンの横ら辺にある。

初めて、デバッグするときに、

• incoming connection from xdebug

と出る。ここで、WordPressがインストールされている index.php を設定することで、デバッグができるようになる。

わかれば、作業は難しくない・・・。

蛇足

Local by Flywheel (v3) は、phpstorm用のボタンがあったりして、便利だった。でも、軽量なLocal v5は、すごくいい。苦労はしたが、Local v5を使っていけるので、気分が良い。