プログラムをコーディングする際に、便利なツールがテキストエディターです。Windowsだと「メモ帳」、Unix/Linuxだと「Vi」、Macだと「テキストエディット」が標準でインストールされています。単純にテキストを編集するだけであれば、標準のメモ帳等でも十分です。が、コードの入力補助やハイライト表示・行番号の表示・画面分割などの機能があると非常に効率的にプログラミングができます。Visual Studio Code(ビジュアルスタジオコード)は、Microsoft社が開発したオープンソースの高機能コードエディタです。Windows、Mac、Linuxをサポートし、強力なコーディングサポート機能を搭載し、拡張性にも優れています。VSCodeはテキストエディターとしての機能はもちろん、複数のファイルをタブで開いたり、プロジェクト全体を全文検索したり、ファイル間の差分を見たりする機能も持っています。さらに言語ごとの開発支援機能を拡張機能として簡単にインストールできます。
VisualStudioCodeのインストール
VisualStudioCodeのダウンロード
マイクロソフトの開発したテキストエディターで、無償で利用でき、phpに限らずHTMLやJavascriptの開発に適しています。
![VSCのダウンロード](https://gungii.com/wp/wp-content/uploads/2020/03/vsc01a.jpg)
VisualStudioCodeのインストール
使用許諾の同意
exeをダブルクリックすると、ウィザードが開始されます。
![使用許諾の同意(VSC)](https://gungii.com/wp/wp-content/uploads/2020/03/vsc02a.jpg)
インストール先の指定
そのまま、「次へ」をクリックします。
![インストール先の指定(VSC)](https://gungii.com/wp/wp-content/uploads/2020/03/vsc03a.jpg)
プログラムグループの指定
スタートメニューへの登録名は、そのままで良いので、「次へ」をクリックします。
![プログラムグループの指定](https://gungii.com/wp/wp-content/uploads/2020/03/vsc04a.jpg)
追加タスクの選択
次の通りにチェックを入れて、「次へ」をクリックします。
![追加タスクの選択(VSC)](https://gungii.com/wp/wp-content/uploads/2020/03/vsc05a.jpg)
最終確認
「インストール」をクリックします。
![最終確認(VSC)](https://gungii.com/wp/wp-content/uploads/2020/03/vsc06a.jpg)
インストール開始
![インストール開始(VSC)](https://gungii.com/wp/wp-content/uploads/2020/03/vsc07a.jpg)
インストール終了
「完了」をクリックすると、「VisualStudioCodeが起動します。
注意:「VisualStudioCodeを実行する」にチェックを入れています。
![インストール終了(VSC)](https://gungii.com/wp/wp-content/uploads/2020/03/vsc08a.jpg)
VisualStudioCodeの起動
![VisualStudioCodeの起動](https://gungii.com/wp/wp-content/uploads/2020/03/vsc09a.jpg)
言語の設定
Extensionsをクリック
![Extensionsをクリック](https://gungii.com/wp/wp-content/uploads/2020/03/vsc10a.jpg)
インストールをクリック
Searchボックスにjapaneseと入力すると日本語が表示されますので「install」をクリックします。
![インストールをクリック](https://gungii.com/wp/wp-content/uploads/2020/03/vsc11a.jpg)
再起動
画面の右下に以下のようなメッセージが表示されますので、「Restart Now」をクリックします。
![再起動](https://gungii.com/wp/wp-content/uploads/2020/03/vsc12a.jpg)
注意:「ビジアルスタジオを日本語で利用するためには再起動が必要です。」というメッセージです。
言語設定の完了
「Restart Now」をクリックすると、再起動となり、画面が日本語となりました。
![言語設定の完了](https://gungii.com/wp/wp-content/uploads/2020/03/vsc13a.jpg)
VisualStudioCodeの設定
設定の変更
フォントサイズの変更
ファイル→基本設定→設定をクリックします。
![](https://gungii.com/wp/wp-content/uploads/2020/03/vsc21a.jpg)
配色テーマの変更
ファイル→基本設定→配色テーマをクリックします。
![配色テーマの変更](https://gungii.com/wp/wp-content/uploads/2020/03/vsc22a.jpg)
プログラムの作成
作業用フォルダの作成
xamppの選択
「フォルダを開く」をクリックして、Cドライブのxamppフォルダを選択します。
![xamppの選択](https://gungii.com/wp/wp-content/uploads/2020/03/vsc23a.jpg)
フォルダの作成
作業用フォルダとして、htdocsの下に「php」という名前で新しいフォルダを作成します。
![フォルダの作成](https://gungii.com/wp/wp-content/uploads/2020/03/vsc24a.jpg)
phpプログラムの作成
hellow.phpを書き込み、ブラウザからURLを入力すると、phpプログラムが実行されます。
注意:xamppでApacheを起動していないとエラーとなります。
![phpプログラムの作成](https://gungii.com/wp/wp-content/uploads/2020/03/vsc25a.jpg)
表示ディレクトリの制御
XAMPP配下のディレクトリーが全て表示され見にくい為、htdocs配下のphpディレクトリーのみ表示する様にします。
「フォルダを開く」をクリック
![表示ディレクトリーの制御](https://gungii.com/wp/wp-content/uploads/2020/03/vsc26a.jpg)
該当フォルダをダブルクリック
必ずダブルクリックでphpまで選択します。ダブルクリックでなく、「フォルダの選択」をクリックすると、その時点で確定となり、phpフォルダまで選択できなくなります。
![ダブルクリック](https://gungii.com/wp/wp-content/uploads/2020/03/vsc27a.jpg)
表示ディレクトリの制御完了
これで、xamppのhtdocsのphpディレクトリーのみを表示します。
![表示ディレクトリーの制御完了](https://gungii.com/wp/wp-content/uploads/2020/03/vsc28a.jpg)
注意:以下の通り、C:\xampp\htdocs\php配下のディレクトリーが表示されます。
![](https://gungii.com/wp/wp-content/uploads/2020/03/vsc29a.jpg)
VisualStudioCodeのエラー対応
現象
VisualStudioCodeの画面で右下に以下のメッセージが表示されました。
![現象](https://gungii.com/wp/wp-content/uploads/2020/03/vsc31a.jpg)
原因
「’php.validate.executablePath’を使用して、php.exeへのpathを記述して下さい」つまり、php.exeへのpathがわからないという事の様です。
対応
ファイル→基本設定→設定をクリック
![](https://gungii.com/wp/wp-content/uploads/2020/03/vsc32a.jpg)
「settings.jsonで編集」をクリック
画面をスクロールして、「settings.jsonで編集」をクリックします。
![](https://gungii.com/wp/wp-content/uploads/2020/03/vsc33a.jpg)
pathの入力
私は、XAMPPを使っていますので、以下のようなpathとなります。
![](https://gungii.com/wp/wp-content/uploads/2020/03/vsc34a.jpg)