Help us understand the problem. What is going on with this article?

Visual Studio CodeでXAMPPのPHPコーディング環境を作る

More than 1 year has passed since last update.

この記事は、「【連載】初めてのWindows用Laravel 5.7開発環境構築入門」の孫記事です。環境などの条件は、親記事をご覧ください。
この記事は、「XAMPPでPHP+MariaDB(MySQL互換)環境を構築する 2018年12月版」の子記事です。


 前回はPHPが動作するところまでいきましたので、今回はVisual Studio CodeでXAMPPのPHPコーディングが気持ちよく行えるようになる状態まで環境を構築していきます。

Visual Studio Codeのインストール

 まず、以下のリンクからVisual Studio Codeをダウンロードします。
 https://code.visualstudio.com/
image.png
 右上のDownloadボタンを押し、Windowsを選択すると、ダウンロードが開始されます。
image.png
image.png

 ダウンロードが終わったら、インストーラーを実行します。
image.png
image.png
image.png
ライセンスに同意して、次へ。
image.png
image.png
image.png
image.png
image.png

 特に理由がなければ選択肢はデフォルトのままでどんどんすすめて、インストーラーを完了します。

image.png
 Visual Studio Codeが起動します。Welcomeタブと、Release Notesタブは不要なのでとじましょう。

PHPをコーディングしやすくするExtentionのインストール

 Extensionは、Visual Studio Codeの機能を拡張するための部品です。一般的にアドオンとか、追加機能とか、拡張機能と呼ばれるようなものと同じです。
 今回は、エディタで数文字入力したらPHPのコマンドや変数名を予測してリストアップし、入力を高速化してくれるインテリセンス機能と、PHPの関数スコープなどを検知して自動的に字下げをしてくれるオートインデント機能を追加してくれるExtention2つを入れます。

 Visual Studio Codeの左にあるExtensionボタンを押し、検索文字列として「php」と入力します。
image.png
 PHP IntelliSenseが見つかるので、緑の「Install」ボタンをクリックします。インストールが完了すると以下のようにボタンが変更されます。
image.png
 同様に、phpfmt - PHP formatter をインストールします。
image.png
phpfmtでは、Ctrl + Shift + I でインデント(字下げ)を行ってくれるほか、保存などの場面で自動的にインデントを行ってくれます。

 なお、今回インストールしたExtension以外にも同様の機能を提供するExtensionはたくさん存在するので、好みでいろいろ探してみるのもよいでしょう。

PHPへのPATHを通す

 PHP IntelliSenseをインストールした後、以下のような警告がVisual Studio Codeの右下に出ます。
image.png
 これは、「PHPの実行ファイルが見つからないので困る。PATHにPHPを登録して。」という意味です。PATHは、Windows内で実行ファイルを探すときに、どのフォルダを探せばいいかをあらかじめ登録しておく場所です。XAMPPのインストールでは自動的にPHPのPATHが登録されないので、これを登録します。この登録作業を、「PATHを通す」とも言います。

 PATHの登録は、以下の手順に従います。
 まず、エクスプローラーでPCを右クリックして、プロパティを開きます。
image.png
 システムダイアログが出るので、「システムの詳細設定」を開きます。
image.png
 システムのプロパティが出るので、「環境変数」を開きます。
image.png
 環境変数ダイアログで、「システム環境変数」側の「Path」をクリックして選択状態にし、「編集」で開きます。
image.png
 新規をクリックして、
image.png
 C:\xampp\php を追加します。
image.png
 OKを2回押して修正を確定し、Visual Studio Codeを再起動すれば、警告が消えます。

Visual Studio CodeでXAMPPに作ったinfo.phpを編集する

 PHPを編集する環境が整ったので、前回作ったinfo.phpをVisual Studio Codeで編集してみましょう。
 前回作ったinfo.phpは、XAMPPのApacheでホストされるhttp://localhost/に、 http://localhost/info.php でアクセスできるように設置しました。Visutal Studio CodeでPHPアプリ(PHPプロジェクト、PHP Webサイト)を編集するときは、PHPアプリのフォルダを開けます。

  • PHPアプリの開け方 その1
     Explorerボタンを押して、Open Folderボタンを押す。
    image.png

  • PHPアプリの開け方 その2
     [File]-[Open Folder]
    image.png

 今回は http://localhost/ がPHPアプリであるとして、XAMPPのApacheのドキュメントルートを開けましょう。ドキュメントルートは、C:\xampp\htdocsです。htdocsフォルダを選択した状態で、「フォルダーの選択」ボタンでフォルダを開きます。
image.png

 以下の図のように、info.phpがリストに見えれば成功です。このinfo.phpは、http://localhost/info.php のソースコードです。
image.png

 info.phpファイルをダブルクリックして、右の編集ペインに表示し、以下のように書き換えます。

info.php
<?php 
echo "Hello world";
phpinfo();

 Ctrl + S で変更を保存します。

info.phpの動作確認をする

 最後に、書き換えたinfo.phpが正しく動作するか確認しましょう。

 もしXAMPP Control Panelが起動していなかったら起動させます。
 XAMPP Control Panelで、Apacheが動作している(=背景が緑になっている)ことを確認します。
image.png

 OKであれば、ブラウザを起動して、http://localhost/info.php にアクセスします。
image.png
 「Hello world」と表示されれば、成功です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away