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を再起動すること）

```ini
[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 で以下のようなコマンドでインストール

```terminal
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コマンドがかっこいい）。

```bash

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` が作られるので、それを編集する。

<img width="708" alt="_2019-11-26_15.48.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193970/21c2762c-001e-b8af-0fca-cdaa31e803f2.png">

上記のように、以下を追加。コンマを直前に忘れずに（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を使っていけるので、気分が良い。