乐胖代购免代理版

新しいMacBook Airを手に入れたので、Laravelの開発ができるようにVSCodeを整備していきます。前のPCでは、とりあえず何でもかんでも拡張機能を入れてよく分からなくなってしまったので、今回はきちんと理解しながら最小限の布陣にしたいと思っています。

やったこと

PHPの構文エラーを表示できるようにする
PHP(blade含む), JavaScript, HTMLの全てが自動整形されるようにコード整形ツールを入れる

PHPの構文エラーを表示

VSCode上でアプリケーションを開くと、さっそく以下のWarningが出たので、まずはこれを解消していきます。

PHP のインストールが見つからないため、検証できません。PHP 実行可能ファイルを構成するには、設定 'php.validate.executablePath' を使用します。

「設定を開く」をクリックして、settings.jsonを開く。
php.validate.executablePath を設定する必要があるみたいだが、パスがわからないのでターミナルから調べる。
```
which php
/opt/homebrew/bin/php
```

settings.jsonに調べたパスを記載

"php.validate.executablePath": "/opt/homebrew/bin/php",

これによって、PHPで間違った構文を書くとエラーで教えてくれるようになりました👌

コード整形ツールを入れる

PHP(blade含む)もJavaScriptもHTMLも整形したい！もちろん保存時に自動整形で。

いろいろ調べて試して、王道っぽいPrettierとPHP Intelephenseを使うことにしました。

Prettier : JavaScriptとHTMLを整形させるときに使う。PHPは整形できない。
PHP Intelephense：PHPを整形させるときに使う。JavaScriptとHTMLは整形できない。

という感じなので両方インストールする必要があるんですね。

参考にさせていただきました：【VS Code】PHPとHTMLを保存と同時に自動整形する方法こちらのサイトが丁寧で分かりやすいので細かい説明は省きます。

やっていく

「拡張機能」からPrettierを検索してインストール
「拡張機能」からPHP Intelephenseを検索してインストール
「設定」で以下の2つを設定
1. Editor: Default Formatter(デフォルトのフォーマッター)でPHP Intelephenseを選択
2. Editor: Format On Save(保存時に自動整形) にチェックを入れる

PHPは整形されるけど、JavaScriptとHTMLは整形されない…

Editor: Default Formatter で PHP Intelephenseを選択したため、どうやらPrettierが機能していない。いろいろ触ってたら以下の手順で解決できました。

JavaScript, HTML（と検知されている）ファイル上で右クリックして「ドキュメントをフォーマット」を選択
規定のフォーマッタを選択するように言われるので、Prettierを選ぶ

これで無事、JavaScriptとHTMLも整形されるようになりました！ちなみに、規定のフォーマッタは、ワークスペースの設定(.vscode/settings.json)に以下のように追加されていました。

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

だいたいの開発でこの設定を使いそうなので、私はユーザーの設定(~/Library/Application Support/Code/User/settings.json)の方にこの行をコピーしておきました。