WordPressのコーディング規約をPHP CodeSnifferでチェックしてPhpStormでもチェックと自動整形する

# 2019年10月22日 プロジェクトへの導入まとめ
久しぶりにPHP CS(WordPressCS)を導入したところ、`composer`で完結することができました。

```console

$ composer require "squizlabs/php_codesniffer=*"
$ composer require wp-coding-standards/wpcs
$ ./vendor/bin/phpcs --config-set installed_paths "`pwd`/vendor/wp-coding-standards/wpcs"
```


# はじめに
先日あったWordCamp Kansai 2016でCIのお話しを聞いて来ました。
WordPressテーマのCIや自動化についてについてのお話しがあり、とてもよい発表でした。WordCamp行って良かった、と思いました。

> http://sssslide.com/speakerdeck.com/featherplain/github-to-travis-ci-de-wordpress-temawotesuto-birudo-sositezi-dong-hua
> GitHub と Travis CI で WordPress テーマをテスト、ビルド、そして自動化
> Megumi Hano

お話しを聞いて是非やってみたいと思ったのでやってみましたが、簡単に動くかなと思っていましたが色々と躓いてしまったためやり方のメモです。

<img width="572" alt="Screen Shot 2016-11-24 at 14.40.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/a6b084a3-a7eb-3717-c48f-dc09d26b4134.png">


# WordPressのコーディング規約
WordPressにはコーディング規約があります。
主にスペースをどうするか、中括弧の位置をどうするか、横幅などなど、PHPやHTML、CSS、JavaScriptと言語によって別れて決められています。
詳しくは公式サイトに載っています。

> WordPress コーディング規約
> https://wpdocs.osdn.jp/WordPress_コーディング規約

コーディング規約に従って記述することで読みやすいコードになります。



# PHP Code Sniffer
コーディング規約をチェックするツールとしてPHP Code Snifferを利用します。
macOSへのインストール方法としてはhomebrewを使う方法、PEARを使う方法もあるのですが、今回はcomposerのグローバルインストールで行いました。

```bash
$ composer global require "squizlabs/php_codesniffer=*"
```
`phpcs --version`が通ればインストール成功です。

<img width="501" alt="Screen Shot 2016-11-24 at 14.50.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/be22b0ef-4866-4783-dfbc-40ba0c1537f2.png">

<img width="577" alt="Screen Shot 2016-11-24 at 14.54.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/53d8003e-5975-cbe6-5d04-8fbe3c92a410.png">

もし実行出来ない場合には`~/.composer/vendor/bin`にパスが通っているか確認してください。

続いてWordPress用のコーディング規約をインストールします。

```bash
$ git clone git@github.com:WordPress-Coding-Standards/WordPress-Coding-Standards.git \
~/.composer/vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/WordPress
```

インストールが終わったらphpcsへ登録します。

```bash
$ phpcs --config-set installed_paths ~/.composer/vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/WordPress
Config value "installed_paths" added successfully
```

`phpcs -i`で追加されたことが確認出来ます。

```bash
$ phpcs -i
The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and WordPress-VIP
```

<img width="577" alt="Screen Shot 2016-11-24 at 14.54.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/33f742ae-7521-b65f-df5b-8cd1af5e99d6.png">

WordPress用のコーディング規約を指定しての呼び出しの際のオプションが長いため、エイリアスを登録しておくと良いようです。

```bash
$ alias wpcs="phpcs -p -s -v --standard=WordPress"
```

> [PHP] PHP_CodeSniffer + WordPress-Coding-Standards をインストールする
> http://www.d-wood.com/blog/2014/09/12_6884.html

# 動かしてみる
```bash
$ wpcs *.php
```

<img width="555" alt="Screen Shot 2016-11-24 at 14.57.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/25539ef4-7a72-a5fb-cb50-309e0fa0726d.png">

エラー一杯出ましたね！
これを見ながら直していきたいと思います。

以上です。


# PhpStorm
## 自動フォーマッティング
普段はPhpStormを使っているのですが、WordPress用のコーディング規約を適用出来るため、普段はそちらにお任せ状態です。


<img width="505" alt="Screen Shot 2016-11-24 at 15.03.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/0a5fba28-a557-b671-e6c4-8428c9f63f7c.png">
「Enable WordPress」を有効にした際にコード規約も自動で設定されていることが多いようです。

手動で設定する場合には環境設定から設定します。
「Editor > Code Style > PHP」を選択し、右側の「Set from」でフォーマットのプリセットを選択できます。
（これが意外に見つけにくいんですよね。[@ToroUnit](https://torounit.com)さんに教えてもらいました、ありがとうございました。）
<img width="1002" alt="Screen Shot 2016-11-24 at 15.05.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/5b9a79dc-f348-d556-bed5-5a285c3d6534.png">

> WordPress coding standards configuration for PhpStorm
> https://gist.github.com/Rarst/1370155

## Code Sniffer
PhpStormでもPHP Code Snifferを動かせます。（@kimama1997 さんありがとうございます）
環境設定の「Editor＞Inspections」からPHP Code Sniffer validationにチェックを入れます。
右側ペインの下にある「Coding Standard」からWordPressを選択します。
<img width="1002" alt="hoge" src="https://qiita-image-store.s3.amazonaws.com/0/23997/bc27809a-2885-6dc3-b5ac-52ab781106eb.png">

「Languages & Frameworks＞PHP＞Code Sniffer」を開き、Configurationの「…」から、PHP Code Sniffer (phpcs)pathを選択します。
上記composerインストールした場合には`~/.composer/vendor/bin/phpcs`を設定しておきます。
<img width="1122" alt="Screen Shot 2016-11-24 at 19.04.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/93663aaa-e8a0-9688-5c8c-b7903ea3c199.png">


これでコード画面の方で怒られることができます👼
<img width="728" alt="Screen Shot 2016-11-24 at 18.52.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/92cd29fc-0da3-0601-4ff3-69ccccb0ec0a.png">

## PhpStormにカスタムのrulese.xmlを読み込ませる
上記の章でPHP CS自体の指定はできました。併せてPhpStormで`ruleset.xml`を読み込ませるようにします。

PhpStormのオプション画面から「Editor > Inspections > PHP > PHP Code Sniffer validation」を選びます。
右側にある「Coding standard」から「Custom」を選び、「…」を押してファイルを参照させます。
ここでプロジェクトごとの`ruleset.xml`を読み込ませます。

<img width="1029" alt="Screen Shot 2018-08-27 at 21.51.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/47327/3e6e645c-f833-82f0-fed5-7ca776b3031a.png">


[Configuring PHP Code Sniffer as a PhpStorm inspection](https://www.jetbrains.com/help/phpstorm/using-php-code-sniffer-tool.html)


# 参考サイト
> PHP_CodeSnifferを使ってWordPressのプラグインやテーマがコーディングスタンダードに準拠しているかチェックする
> https://firegoby.jp/archives/5532


> PHP CodeSnifferでコーディング規約を守れているかチェックしてみる。
> http://qiita.com/karumado/items/3ff84343d03866586021


> [PHP] PHP_CodeSniffer + WordPress-Coding-Standards をインストールする
> http://www.d-wood.com/blog/2014/09/12_6884.html