ホーム > 技術情報 > VSCodeを使おう!-ダウンロード&インストール、PHP設定編-

VSCodeを使おう!-ダウンロード&インストール、PHP設定編-

投稿日 : 2019年05月10日   更新日 : 2019年10月12日
カテゴリー : PHP/javascript/CSS / 開発環境(Pleiades/Eclipse/Xampp他) / 技術情報
VSCodeを使おう!-ダウンロード&インストール、PHP設定編-の画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして6年~の経験があります。WordPressは2年~の経験があります。その他、jQuery、HTML、CSSも使用します。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

PHPの開発環境、たくさんあります。

たくさんある中でも、私はこれまでEclipseを愛用してきました。

しかし、Eclipseはとにかく重く、デバッグ中に落ちてしまうことがあるのが難点です。
機能が豊富なのですが、「ありすぎてよくわからない」状態になっているような印象です。

そんな折、近頃話題にあがっているVisual Studio Code、通称VSCodeを使ってみては?というお話を頂き、それではやりましょうと個人開発環境Pleiades統合開発環境から、XAMPP、最終的にはLAMPP環境(仮想マシン使用)へ移行することにしました。

Visual Studio CodeはMicrosoft製品。

IEの印象が強く、Microsoft製品は警戒してしましますが…?(Excel、Word、PowerPointなど素晴らしい製品もたくさんあるんですが)

※ここではWindows 10 Pro 64bitを使用しています。

※VSCodeでPHP開発環境を設定します。

Visual Studio Codeのダウンロード

まずはVisual Studio Code本家サイトへ行き、VSCodeをダウンロードします。

Visual Studio Code Download Site
Visual Studio Code Download Site

左側にある「Download For Windows」を押下します。押下するとセットアップファイルをダウンロードします。

Visual Studio Codeのインストール

ダウンロードしたセットアップファイルを実行し、インストーラーを起動します。

Visual Studio Code SetUp
Visual Studio Code SetUp

基本言う通りにやっていけば問題ありません。

Visual Studio Code SetUp-Options
Visual Studio Code SetUp-Options

オプションについては、とりあえず全部入れておきました。

エクスプローラーのファイルとディレクトリに「Codeで開く」があったら便利に決まっているので入れました。

Visual Studio Code SetUp-Complete
Visual Studio Code SetUp-Complete

完了画面が表示されたらOKです。それほど時間はかかりません。

早速起動してみます。

Visual Studio Code-VSCode-
Visual Studio Code-VSCode-

初期は英語表記です。

続いて、PHPの開発がやりやすいように設定を加えていきます。

PHP開発環境の設定

必要な拡張機能をインストールしていきます。

インストールするには左側の□のボタンを押下します。

Visual Studio Code-VSCode-Extention
Visual Studio Code-VSCode-Extention

日本語化パックのインストール

Visual Studio Codeは日本語化パックがありますので、インストールして適用しておきます。

Visual Studio Code Ext Install-Japanese Language Pack-
Visual Studio Code Ext Install-Japanese Language Pack-

□ボタンを押して表示される画面の検索ボックスに「Japan」と入力し、出てきた一番上の「Japanese Language Pack For Visual Studio Code」をインストールします。

Visual Studio Code Ext Install-Japanese Language Pack Installed-
Visual Studio Code Ext Install-Japanese Language Pack Installed-

インストールが完了すると再起動を促されるので、再起動します。

PHP拡張機能のインストール

Visual Studio Codeを再起動し、日本語化されていることが確認できたと思います。

次はPHP開発で必要な機能をインストールします。

Visual Studio Code Ext Install-PHP Ext Pack-
Visual Studio Code Ext Install-PHP Ext Pack-

スタート画面の右側、カスタマイズのところに「PHP」のリンクがあるのでこれを押下します。

押下すると必要な拡張パックのインストールが行われます。

Visual Studio Code Ext Install-PHP Ext Pack Installed-
Visual Studio Code Ext Install-PHP Ext Pack Installed-
  • PHP Debug
  • PHP Extention Pack
  • PHP IntelliSense

の3つがインストールされました。

この他にも便利な拡張機能はあると思いますが、ここでは基本パックのみをインストールします。

PHP Pathの設定

PHPの拡張パックをインストールすると、何やらエラーが表示されます。

Visual Studio Code-PHP Path Error-
Visual Studio Code-PHP Path Error-

PHP開発の便利機能を使うには、PHPのPATHが必要だからちゃんと指定してよね

と言っています。

折角拡張機能を入れても便利機能が使えないのでは意味がないので、設定します。

ここではPHP7.2以上を導入します。古いバージョンのPHPパスを指定すると、最低PHP7.2以上を指定してね、と言われてしまいます。ここは最新を入れておけば問題ないでしょう。

PHPの導入

XAMPPなどで既に該当のPHP実行ファイルがある場合はそれを指定しますが、PHPの実行ファイルがない場合はPHPをダウンロード&インストールする必要があります。該当のPHPファイルがある方はこの手順を飛ばしてください。

PHPダウンロードサイトへアクセスします。

PHP Download
PHP Download

ここではWindowsを使用しているため、Windows downloadsにアクセスします。

PHP Download x64
PHP Download x64

ここでは64bitPCを使用しているので、「VC15 x64 Thread Safe」のzipファイルをダウンロードします。

※No Thread SafeはApacheのバージョンによって対応するものが違うようですが、ここでは気にしなくていいと思われます。

ダウンロードが完了したら解凍し、フォルダ名を任意のあまり長くないものに変えておきます。例えば「php7.3」など。

このphpフォルダ一式を任意の場所に設置します。階層が深いところにある理由もないので、Cドライブ直下でもいいでしょう。

Visual Studio CodeのPHP実行パスの設定

Visual Studio Codeに戻ります。

ファイル>基本設定>設定を開きます。

開いたら検索ボックスで「PHP」と入力します。

Visual Studio Code-Setting PHP Excutable Path-
Visual Studio Code-Setting PHP Excutable Path-

PHP Validate Excutable Pathを設定します。「setting.jsonを開く」リンクを押下します。

Visual Studio Code-PHP setting.json-
Visual Studio Code-PHP setting.json-
{
    "php.validate.executablePath":"C:\\pleiades\\xampp\\php\\php.exe", // PHPの実行パスを記述
    "php.suggest.basic": false
}

PHPの実行ファイルのパスを設定します。記述したら保存します。

これでPHP開発の便利な機能が使えるようになりました。

Visual Studio Codeを使ってみる

背景が黒だと個人的に目が辛いので、色を変えてみました。左下の設定からテーマカラーを変更できます。

結構色々な配色が用意されていて驚きました。

Visual Stduio Code-Change Theme Color-
Visual Stduio Code-Change Theme Color-

「ファイル>フォルダーを開く」でフォルダを選択して開くと、フォルダ内のファイルの一覧がエクスプローラーに追加されます。そこからファイルの編集ができます。

軽くエディタを開いて操作してみただけでも、とにかく軽量でサクサク動くのがわかります。

次回はXDebugの設定をして、デバッグできるようにしていきます。

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト