Mac laravel Docker composerでインストールしたphp-cs-fixerを使ってVScodeでファイル保存時に整形を行う

# 概要

- composerでインストールしたphp-cs-fixerを使ってPHPのファイルをVScodeで保存時に整形を行う方法をまとめる。

# やりたいこと

- php-cs-fixerを用いてPHPをPSR12でフォーマットしたい。
- 下記の2方向からの整形に対応したい。
    - CI用のコマンド起点での整形
    - 開発者用のファイル保存時の整形
- PSR12や、整形を行うファイルの設定は上記2方向からの整形どちらにも反映させたい。
- ローカル開発環境はDockerコンテナ内にあり、ファイルの永続化を行ってlaravelのアプリケーション名フォルダをローカルのMacから編集できる様にしている。（難しく書いてあるが、ようは一般的はDockerを使ったlaravelのローカル開発環境）

# 前提

- コマンド実行ディレクトリは特筆しない限り一つ前のコマンドを実行したディレクトリで実行するものとする。

# 方法

## php-cs-fixerの導入

- 下記の方法を参考にcomposerを使ってphp-cs-fixerを導入する。

https://qiita.com/miriwo/items/5a7cf3b7858ab1ab146c

- PHPのコンテナに入り、laravelの`app`や`tests`などのディレクトリが入っているディレクトリ（以後アプリケーション名ディレクトリ）に移動する。
- 下記コマンドを実行して`app`や`tests`や`routes`などと同じ階層に`tools`ディレクトリを作成する。

    ```shell
    mkdir -p tools/php-cs-fixer
    ```

- 下記コマンドを実行してcomposerを用いてphp-cs-fixerをインストールする。

    ```shell
    composer require --working-dir=tools/php-cs-fixer friendsofphp/php-cs-fixer
    ```

- 下記コマンドを実行してphp-cs-fixer本体の設定ファイルを作成して開く。

    ```shell
    vi .php-cs-fixer.dist.php
    ```

- 開いたファイルに下記の内容を記載する。

    ```アプリ名ディレクトリ/.php-cs-fixer.dist.php
    <?php 
    
    declare(strict_types=1);
    
    $finder = PhpCsFixer\Finder::create()
        // チェックするディレクトリの指定
        ->in([
            __DIR__ . '/app',
            __DIR__ . '/config',
            __DIR__ . '/database/seeders',
            __DIR__ . '/routes',
            __DIR__ . '/tests',
        ]);
    
    $config = new PhpCsFixer\Config();
        
    return $config
        ->setRiskyAllowed(true)
        ->setRules([
            '@PSR12' => true,
        ])
        ->setFinder($finder);
    ```

- ここまでの作業を実施するとアプリ名ディレクトリは下記のようになるはず。

    ![__php_•_Untitled-1_—_api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d0065a58-b5e3-b384-eb7b-9e75c286cf9d.png)


## VScode拡張機能

- 下記にアクセスしてphp-cs-fixerの拡張機能をインストールする。

https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer&ssr=false#qna

- MacのVScodeでアプリ名ディレクトリをワークディレクトリとしてエディタを開く。
- アプリ名ディレクトリに.vscode隠しディレクトリが作成されているはず。

    ![__php_•_Untitled-1_—_api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/665a2c30-8c42-baf9-75a2-6df1bc4cf6ba.png)

- `アプリ名ディレクトリ/.vscode/setting.json`を開き下記の様に記載する。（下記はphp-cs-fixerのみの設定なので、他に設定がある場合は消す必要はなく、追記する。）

    ```アプリ名ディレクトリ/.vscode/setting.json
    {
        // php-cs-fixer
        "php-cs-fixer.executablePath": "${workspaceFolder}/tools/php-cs-fixer/vendor/bin/php-cs-fixer",
        "php-cs-fixer.onsave": true,
        "php-cs-fixer.config": ".php-cs-fixer.dist.php;",
        "php-cs-fixer.allowRisky": false,
        "php-cs-fixer.pathMode": "override",
        "php-cs-fixer.exclude": [],
        "php-cs-fixer.autoFixByBracket": true,
        "php-cs-fixer.autoFixBySemicolon": false,
        "php-cs-fixer.formatHtml": false,
        "php-cs-fixer.documentFormattingProvider": true
    }
    ```

- 上記の設定で非常に重要なのは`php-cs-fixer.executablePath`と`php-cs-fixer.onsave`と`php-cs-fixer.config`である。それぞれを簡単に解説する。
    - `php-cs-fixer.executablePath`
        - php-cs-fixerの実行コマンド部分をフルパスで指定する。コマンドを使ってphp-cs-fixerを整形したい場合アプリ名ディレクトリで`$ ./tools/php-cs-fixer/vendor/bin/php-cs-fixer`を実行する。本設定項目は前述のコマンドが指し示しているbin直下のphp-cs-fixerをフルパスで指定する必要がある。時分一人だけの開発なら単純にフルパスをベタ書きすればいい。ただ、今回この`.vscode`フォルダも含めてGit管理し他の開発者も使えるようにしたいので、`${workspaceFolder}`を使ってVScodeのワークスペースまでのパスを指定している。
    - `php-cs-fixer.onsave`
        - trueにしないと保存時に自動整形されない。
    - `php-cs-fixer.config`
        - php-cs-fixer本体の設定ファイルを指定する。先に用意した`.php-cs-fixer.dist.php`をワークスペースのディレクトリからのパスで指定する。今回追加した`.php-cs-fixer.dist.php`はワークスペースのディレクトリ直下にあるためファイル名だけ設定した。仮に`.php-cs-fixer.dist.php`がtools直下にあった場合おそらく本設定は`"php-cs-fixer.config": "./tools/.php-cs-fixer.dist.php;",`となるはず、、！（←すみません未検証です。）

# 確認

- ワークスペース直下で`.php-cs-fixer.dist.php`で指定した整形対象ディレクトリの任意のPHPのファイルを開き、「ファイルの保存」もしくは、「ファイルをエディタで開いて、右クリック → ドキュメントのフォーマット」をクリックし整形が行われれば導入は完了となる。

参考文献

https://qiita.com/yujiroarai/items/e3e41785f5037e825414

https://qiita.com/ShortArrow/items/dc0c8cacd696154510f1

https://qiita.com/miriwo/items/5a7cf3b7858ab1ab146c

https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer&ssr=false#overview