【Laravel】Visual Studio CodeでPHP開発環境を整える手順

以前の記事で、Windowsローカル環境にXAMPPを使ってPHP（8.0）の開発環境を整え、PHPのフレームワークであるLaravel（6.0）のプロジェクトを作る所まで行いました。

さっそくLaravelでWEBアプリケーションを作っていこうと思いますが、PHP Stormのような有償IDEや、動作が重いEclipseなどは使う予定がありません。

これまでわたしはSublime TextやSakuraエディタなどを使ってきましたが、MicrosoftのVisual Studio CodeがPHPの機能まわりが改善され使いやすくなっているようなので、もろもろ初期設定をして使ってみようと思います。

～目次～

1 環境
2 Visual Studio Codeのインストール
3 初期設定
4 便利な拡張機能を導入
5 まとめ

環境

わたしの環境は以下です。

・Windows10 Pro
・XAMPP8.0.0（PHP8.0）
・（Laravel 6.0）

インストールしたVisual Studio Codeのバージョンは1.52.1となります。

Visual Studio Codeのインストール

以下リンクに遷移し、ページ下部の「今すぐダウンロード」をクリックします。

→https://azure.microsoft.com/ja-jp/products/visual-studio-code/

遷移先のページで、Windows版のインストーラーをダウンロードしてください。

ダウンロードが完了したら、インストーラーを実行してインストールしてください。

幾つかチェックボックスで選択する項目はありますが、基本的にデフォルトのチェックのまま「次へ」で進めばインストールは完了します。

2021年1月現在、Visual Studio Codeのバージョンは1.52.1となります。

初期設定

他のエディタを使った場合でもあるように、スペースやタブの表示の仕方など、デフォルトの設定ではやや見づらい部分があります。

Visual Studio Codeでは、プロジェクトごとではない、共通の設定を「ユーザ設定」という項目で設定できますので、とりあえず最低限必要な以下の共通設定をしておくと良いと思います。

設定方法

まずユーザ設定を変える場合の手順ですが、メニューバーから「ファイル」→「ユーザ設定」→「設定」をクリックすると、以下のような画面になります。

ここで、必要な設定項目の値を書き換えればOKです。

様々な設定項目があるので、上部の「設定の検索」ボックスにキーワードを入力すれば、絞り込むことが出来ます。
例えばタブ関係の設定項目を変えたい場合は、以下のように「tab」と打てばそれらしい設定項目が出てきます。

Editor:Render Whitespace

スペースが何文字分入っているのか、また、そもそもスペースが入っているのかを分かりやすくするために、「Editor:Render Whitespace」は「all」にしておきましょう。

ただし、この設定だと半角文字は点（・）で示してくれますが、全角スペースは空白表示のままです。

たまにタイプミスで末尾などに混在してしまった全角スペースがあったりしますが、気づきづらくなってしまうので、こちらは後程紹介する拡張機能で対応します。

Editor: Tab Size

１つのタブに相当するスペースの数の設定です。

スペース2つ派、4つ派、タブはそのまま派、といると思います。

わたしは業務の場合は現場のコーディング規約に合わせますし、大抵4スペースな事が多いですが、個人でコーディングする場合、viewファイルは2スペースを使ったりもしますので、Visual Studio Codeでももう少し細かく設定が変えられると嬉しかったりします。。

便利な拡張機能を導入

拡張機能の導入方法

Visual Studio Codeを起動し、拡張機能を導入します。

メニューバーの「表示」→「拡張機能」と押す（またはCtrl+Shift+X）と、以下のような画面になります。

日本語化用の拡張機能導入前の場合は「View」→「Extensions」と押してください。

左上の検索ボックス内（赤枠部分）に、導入したい拡張機能名を入力すれば、候補となる拡張機能一覧がずらずらっと出てきます。

あとは、該当の拡張機能の「インストール（install）」ボタンを押せばオッケーです。

最低限、以下の拡張機能を導入しておくと良いと思います。

・Japanese Language Pack for Visual Studio Code
・PHP Debug
・PHP Intelephense
・PHP IntelliSense
・ZenKaku

Japanese Language Pack for Visual Studio Code

メニューなどのデフォルト言語設定は英語です。
そのままで問題ない方は良いですが、日本語メニューの方が良い方はこの拡張機能を導入しましょう。

PHP Debug

変数のウォッチやステップ実行をする為に必要な拡張機能です。

別途、PHP側の設定が必要になるので、この拡張機能のみで動作はしませんが、いずれにしても必要になるので、とりあえず機能自体はついでに導入しておくといいでしょう。

Visual Studio CodeとPHPのXDebugを使った具体的になデバッグ機能の設定については、最初設定に少々躓いた部分があったので、別途記事にしようと思います。

PHP Intelephense

強力なコード補完機能を実現してくれている拡張機能です。

PHP標準の関数の他、特になにも設定していないのにvendor配下のClass（例えばLaravelで使うクラスなど）も補完してくれます。

また、パラメータの間違いに対して警告を出してくれたりもします。

クリック一つで無効に出来るので、切り替えて試してみるとよいと思いますが、あると無いのとではコーディング速度が段違いになると思います。

PHP IntelliSense

こちらもPHP Intelephense同様、コード補完の拡張機能です。

利用ユーザ数はこちらの方が多いので、わたしは両方入れてますが、どうもPHP Intelephenseの方が最近は評判がよさそうなので無くても良いかも知れません。

※少なくとも、こちらはLaravelのクラス補完はしてくれないようです。

ZenKaku

初期設定の項で少し触れましたが、全角スペースを可視化する為のプラグインです。

赤枠で示したように、全角スペースをグレー背景で示してくれます。

拡張機能をインストールしたら、「表示」→「コマンドパレット」と押して「Enable Zenkaku」とコマンド実行すれば設定完了です。

その他

他にも、PHPの各種フレームワーク用の拡張機能が色々と揃っています。

とりあえずPHPの開発をする上で共通で使うであろう上記の拡張機能を導入しておいて、あとは必要に応じて自分の開発環境や利用しているフレームワークに応じた拡張機能を導入すると良いでしょう。

まとめ

Visual Studio CodeでPHPの開発を行う際の最低限の設定をしました。

他のエディタと比べて表示関係でやや見づらいなと思う部分はあるのですが、この辺は慣れかもしれません。

今回は最低限の設定という事で省略しましたが、やはりデバッグ機能と、Laravel関係のコード補完やartisanコマンドの実行がエディタ上から出来る機能が強力だなと思いました。

まずは使ってみて、徐々に自分の環境に必要な設定や拡張機能を探していくとよいでしょう。