VScodeにコードチェックツールphpcsを導入する手順

# はじめに
VScodeにはコードをチェックするエクステンションが色々あります。
中にはファイルを保存・更新した時に自動で整形してくれるモノも!

この記事では、`phpcs`というエクステンションを導入する方法を紹介します。

## php-cs-fixerとphp-cs
PHPのコードチェックツールでは`php-cs`以外にも`php-cs-fixer`が有名ですね。

`php-cs`は設定した**コーディング規約のチェックをするツール**なのに対し、

`php-cs-fixer`は保存・更新した時に**規約に則った自動整形**までしてくれます!

### なんでphp-cs-fixerの導入記事じゃないの？

開発現場で独自のコーディング規約があった場合、`php-cs-fixer`それらの規約を無視して勝手に整形してしまいます。

`php-cs-fixer`でもかなり細かくルールをカスタマイズすることはできるのですが、それでも限界はあります。
(例えば、複数行に渡るチェーンメソッドを書く際は、アローのインデントを合わせる、とか。)

また、既存のプロダクトで自動整形が働いてしまうと、実装箇所以外に差分が出てレビューがしにくい!なんてこともあります。

なので、「基本的なコーディング規約の違反だけを減らしたい」「規約違反に気がつけるようにして、直すのは任意のタイミングで行いたい」なんて場合には`php-cs-fixer`が導入コストが低くなります。

ちなみに、エクステンションのDL数もphpcsの方が多かったりします(2020年7月時点)。
[VScodeマケプレ](https://marketplace.visualstudio.com/vscode)より
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420171/754efeb4-d02b-793b-332f-9eacbf3c3369.png)



前置きが長くなりました。
さっそく導入していきましょう!

## php-csの導入
### 1.composerのインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420171/3e23bdc8-aa37-7e18-5dd4-de78ae7f1484.png)

まずはターミナルを開いて、↓のコマンドを打ってみます。

```
 composer --version
```

バージョンが表示されなかったら、PHPのライブラリ管理ツールcomposerがインストールされてないので、導入しましょう。

[公式DLページ](https://getcomposer.org/download/)
↑リンクにあるターミナルコマンドを打って`composer.phar`をダウンロードします。

HPより転載してきた↓のヤツをコピペしてもOKです。

```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e5325b19b381bfd88ce90a5ddb7823406b2a38cff6bb704b0acc289a09c8128d4a8ce2bbafcd1fcbdc38666422fe2806') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
```

ダウンロードしたら、下記のコマンドを打ちます。
sudoを付けないと「permission denied」エラーが出るので忘れずに付けましょう。
パスワードの入力を求められるので、macのロック解除の時に使うパスワードを入力します。

```
sudo mv composer.phar /usr/local/bin/composer
```


これでターミナルに`composer`と打って以下のような表示が出たらOK!

```
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.8 2020-06-24 21:23:30
```


その他、composerについては「[逆引き！Composer コマンド・ライン一覧 と 基礎知識](https://qiita.com/KEINOS/items/86a16b06af6e936a1841#%E6%9B%B4%E6%96%B0%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88)」が詳しいです。

### 2.ライブラリとしてのphpcs導入
[PHPライブラリリポジトリサイトPackagest](https://packagist.org/explore/?)で検索し、phpcsをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420171/4c621053-fdfc-e039-3434-d23a2cb5df2b.png)

似たような名前のがありますが、一番DL数が多いものをDLするのが間違いないです。
[squizlabs/php_codesniffer](https://packagist.org/packages/squizlabs/php_codesniffer)

```
// グローバル
composer global require "squizlabs/php_codesniffer=*"

// ローカル
composer require --dev "squizlabs/php_codesniffer=3.*"
```
上のグローバルインストール、下のローカルインストールコマンドどちらかでインストールしましょう。

### 3.VScodeエクステンションphp-csの導入

今度は、ライブラリとしての`phpcs`をVScodeで適用するために、エクステンションの`phpcs`をインストールします。
ここでもメジャーなヤツをインストールするようにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420171/b19819da-6299-60de-e893-2852b26161ec.png)

### 4.エクステンションの設定
最後に、VScodeの設定ファイル`setting.json`に設定を記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420171/50207f1d-a2bd-8f74-ca14-b634e37cd40a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420171/8188aa18-2568-d679-2213-c989c2cfccbb.png)

json形式で色々なルールを設定できるので、好きなルールを設定しましょう!
設定後に保存したら、自動でphpファイルのコードをチェックしてくれます。

### おまけ
基本設定は以下のような感じ。

```
{
    "phpcs.standard": "PSR2"
}
```
基本のコーディングルール設定
・`PSR-1`/`WordPress`/'Zend'とか色々ありますが、特にこだわりなく、キレイなコードを書きたい場合はスタンダードなPSR-2をオススメします。

```
#### 英語に苦手意識がない人は
[いい感じのyoutube動画](https://www.youtube.com/playlist?list=PLa_Xqm9JWuydw6f1yBSlrkWQZHJA3P9jA)がありましたので、よかったらどうぞ!