[WordPress]PHPCodeSniffer(phpcs)でWPコーディング規約をチェック＆自動整形できるようにする

ちゃんとしようと思い、WordPressコーディング規約をちゃんと学び始めました。
でも自分で間違いを探し出すのはとっても大変だとうなだれてたら、構文エラーをチェックでき、自動整形もしてくれる方法を知ったので忘れないうちにまとめておきます。
野性味のあるまなちゃんも貼っておきます。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/0047fee9-6617-0726-cb8e-d0c7bed77c65.jpeg">
かわいい。
#WordPressコーディング規約（WordPress Coding Standard）とは
WordPressには、コーディング規約がある。
コーディング規約はCSS、HTML、JavaScript、PHPと言語ごとに存在する。

- [CSS コーディング規約 \- WordPress Codex 日本語版](https://wpdocs.osdn.jp/CSS_%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84)
- [HTML コーディング規約 \- WordPress Codex 日本語版](https://wpdocs.osdn.jp/HTML_%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84)
- [JavaScript コーディング規約 \- WordPress Codex 日本語版](https://wpdocs.osdn.jp/JavaScript_%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84)
- [PHP コーディング規約 \- WordPress Codex 日本語版](https://wpdocs.osdn.jp/PHP_%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84)

コーディング規約を理解するのに、よく参考にさせていただいてるサイト
[WordPress コーディングスタンダードの正式な書き方をまとめてみる – ミルログ](https://www.mirucon.com/2017/07/15/wpcs/)

#はじめに
`VScode`を使用している場合は設定を確認する必要がある。
設定でなおせる規約違反もあるため。

- Editor: Detect Indentation　→**チェックを外す**
- Editor: Insert Spaces　→**チェックを外す**
- Editor: Tab Size　→**`4`に設定**

`command`+`;`+`,`で設定を開き、`Editor: Detect Indentation`と検索

<img width="900" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/bf0a053c-c5cf-5219-314e-fdb5aa7a07be.png">



``
#準備
コマンドからもろもろインストールして、チェック＆自動整形の準備をしていく。
##★`PHP CodeSniffer(phpcs)`をインストール

###１． まずは`composer`をインストール
`Homebrew`を使って`composer`をインストールする。（`Homebrew`が入ってて良かった:relaxed:）
`php`のインストールも必要なので入ってなかったら、`brew install php70`でインストール。

```
$ brew install composer
```

###２．`composer`で`PHP CodeSniffer(phpcs)`をインストール

```
$ composer global require "squizlabs/php_codesniffer=*"
```

####インストールされたことを確認する
```
$ .composer/vendor/bin/phpcs --version
```
下記が表示されればインストールOK!:ok_hand_tone2:

```
$ .composer/vendor/bin/phpcs --version
PHP_CodeSniffer version 3.5.3 (stable) by Squiz (http://www.squiz.net)
```

###3．`phpcs`のみでコマンド実行出来るように、パスを登録

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

####※パスが登録されたかバージョンを表示させるコマンドで確認

```
$ phpcs --version
```
下記が表示されればパスの登録OK!:ok_hand_tone2:

```
$ phpcs --version
PHP_CodeSniffer version 3.5.3 (stable) by Squiz (http://www.squiz.net)
```


##★WordPressコーディング規約をインストールし、設定
`PHP CodeSniffer`がインストールできたら、使用する規約である`WordPressコーディング規約（WordPress Coding Standard）`をインストール。
デフォルトでは PEAR, PHPCS, PSR1, PSR2, Squiz, Zend がインストールされてる。

###１．`Composer`のディレクトリにコーディング規約を配置する。
```
$  git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress
```

###２．`PHP CodeSniffer(phpcs)`にコーディング規約を設定
```
$ phpcs --config-set installed_paths ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress
```

####インストールされたことを確認
```
$ phpcs -i
```
#####下記が表示されたら、インストールOK！:ok_hand_tone2:

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

##★普段PHPはWordPressでしか使わないのならデフォルトのコーディング規約として設定しておく

```
$ phpcs --config-set default_standard WordPress
```

#実行
準備が整ったので、コマンドラインで実行する。:punch_tone2:

##★エラーチェックの実行(phpcs)
```:(例)
$ phpcs wp-content/themes/theme-name/page.php
```

※↑パスとファイル名を指定
###エラーがあるとこんな感じで表示される

```:(例)
$ phpcs wp-content/themes/theme-name/page.php

FILE: ~{省略}~/wp-content/themes/theme-name/page.php
------------------------------------------------------------------------------------------------------
FOUND 1 ERROR AND 1 WARNING AFFECTING 2 LINES
------------------------------------------------------------------------------------------------------
 11 | WARNING | [ ] Found precision alignment of 3 spaces.
 14 | ERROR   | [x] Tabs must be used to indent lines; spaces are not allowed
------------------------------------------------------------------------------------------------------
PHPCBF CAN FIX THE 1 MARKED SNIFF VIOLATIONS AUTOMATICALLY
------------------------------------------------------------------------------------------------------

Time: 120ms; Memory: 8MB
```
※~{省略}~には絶対パスが出力される
WARNINGとERRORが一つずつでてることが確認できる。

例のエラーは２つのエラーだが、たくさんエラーが出てしまっては一つずつ読んで治すのは骨が折れる。:thermometer_face:
`PHP Code Beautifier and Fixer(phpcbf)`も同時にインストールされてるので、これを実行すれば自動整形ができる。
##★自動整形の実行(phpcbf)
```:(例)
$ phpcｂｆ wp-content/themes/theme-name/page.php
```

※↑パスとファイル名を指定
###自動整形され、こんな感じで表示される

```:(例)
$ phpcbf wp-content/themes/theme-name/page.php

PHPCBF RESULT SUMMARY
---------------------------------------------------------------------------------------------------------------------
FILE                                                                                                 FIXED  REMAINING
---------------------------------------------------------------------------------------------------------------------
~{省略}~/wp-content/themes/theme-name/page.php     1      1
---------------------------------------------------------------------------------------------------------------------
A TOTAL OF 1 ERROR WERE FIXED IN 1 FILE
---------------------------------------------------------------------------------------------------------------------

Time: 239ms; Memory: 8MB
```
※~{省略}~には絶対パスが出力される
WARNINGで出てた部分は整形されてない、、、。:rage:

###自動整形だけでは修正されない部分もあるので、エラーを見ながら修正していく。

##`.`を指定すると、ディレクトリ内すべてにチェック（または自動整形）される
```:(例)
$ phpcs wp-content/themes/theme-name/.
```

```:(例)
$ phpcbf wp-content/themes/theme-name/.
```


#まとめ
実は、PHPの`PSR2`と`WordPressコーディング規約`のルール同士が喧嘩しててうまく行かずはまりました。:cry:
でもデフォルトに`WordPressコーディング規約`を設定することでうまく行ったので、大事であります。

```
$ phpcs --config-set default_standard WordPress
```

#参考サイト
[PHP CodeSniffer を使ってWPコーディングスタンダードのエラーをチェック&自動修正しよう \[3\.x 対応\] – ミルログ](https://www.mirucon.com/2017/08/05/php-codesniffer/)
[macOSのVisual Studio CodeでPHP CodeSniffer & WordPressコーディング規約によるコードチェック環境を構築 \| taxaboxo\.com](https://taxaboxo.com/blog/mac-visulstudiocode-phpcs-wordpress/)