VScode で編集

 Visual Studio Code(VScode)は、マイクロソフト社が無料提供しているテキストエディタですが、拡張機能が豊富であるなどの理由から利用者の多い人気ソフトです。
 ここでは、インストールから PHP の編集・ディバッグなどにも便利なので、覚書として書いておきます。参考
  1. VScodeのインストール
    1. VScodeの入手・インストール
      Visual Studio Code ダウンロードページよりダウンロードします。→
      すると、ダウンロードフォルダに VSCodeUserSetup-x64-1.***.*.exe がダウンロードされます。
      インストールした状態では英語表示なので、日本語化などの設定をします。 参考サイト
         【VScode アイコン】

    2. VScodeの起動
      日本語化した VS Code をクリックするとすると、右図の様な初期画面(ウェルカムページ)が表示され、VSCode の使い方等も学習できます。

      *日本語化などの拡張機能は、拡張機能ボタン(Extensions) を押して、「Japanese Language Pack for VS Code」などの拡張機能を「Install」をクリックしてインストールし、再起動して有効にします。

    3. VSCodeの画面構成
      ①. アクティビティバー
       主に使用する機能アイコンを表示
      ②. サイドバー (表示制御可)
       選択したアクティビティバーの内容を表示
      ③. エディター
       ファイルの内容表示、作業する画面
      ④. パネル (表示制御可)
       警告やエラー内容、デバック情報などを表示
      ⑤. ステータスバー
       文字コードなどのファイル情報を表示

    4. VSCodeでの編集
      VSCode エディタとしても多機能なエディタです。詳細は、参考1  参考2などをご参考に。

  2. Live Serverを使う
    1. Live Serverを導入
      ① 拡張機能アイコンから Live Serverを探して、Live Server をインストールし、再起動すると Live Serverを利用できます。→
      ② Live Serverが利用できる状態で、VScode を起動すると右下に「Go Live」が表示され、ライブリロードが利用可能となります。参考
      ③ VScode を起動したら、「フォルダーを開く」でフォルダー開き、「ファイルを開く」などでファイルを開きます。
      ④ ライブリロードが可能となると、「Go Live」の表示は「port : 5500」等のポート表示に変ります。  参考サイト

    2. 「Go Live - on」(ライブリロード可)で編集
      ① HTML ファイルを編集中に「Go Live」をクリックすると、「127.0.0.1:5500/」でページが開き、ライブリロードが可能となります。参考
      ② この状態で HTML を編集・保存すると、自動的にブラウザ表示も新ページを表示します
      ③ 右下の「port : 5500」ボタンを押すと、ライブリロードは終了し、「Go Live」表示に戻り、「127.0.0.1」ページでは、ブラウザ表示出来なくなります。
      ④ また編集ファイル内で右クリックすると制御窓が開くので、そこで「Open with Live Server」や「Stop Live Server」を押すと、それぞれ「Go Live」や「port : 5500」ボタンを押すのと同じ動作をします。

  3. VS CodeでPHPを実行
    1. PHP 設定
      ① 事前に XAMPPをインストールしておきます。
      ② 拡張機能アイコンから 「PHP Server」を探して、PHP Server をインストールします。→
      ③ さらに拡張機能アイコンから 「PHP Intelephense」を探して、インストールしておきます。→
      ④ 再起動すると PHP Server と PHP Intelephense も利用できるようになります。→
      ⑤ path が通っていれば、PHP ファイルを選択すると、右上に青いPHP アイコンが表示され、これをクリックすると、PHP ファイルが表示されます。→

    2. path 設定
      ① さらに、インストール済みの XAMPPを駆動するために、path を設定しておきます。
      ② 左のアクティビティバー下方の設定アイコンをクリックし、→「設定」→「PHP Server configuration」→「PHP Path」で path を指定します。参考
      ③ path が正しく設定されていないと、「PHP not found」と表示されることがあります。

    3. php サーバーの開閉
      ① http://localhost:3000 がローカルサーバーのアドレスとなります。
      ③ ファイル内で右クリックするとPHP Server: Stop server などの制御窓が出て来るので、それによりサーバーの開閉が出来ます。 →
      参考サイト

  4. 関連リンク
    1. VS Code  Visual Studio Code  使い方入門  VSCodeの特徴  設定ファイル  Emmetを使う
    2. Live Server  Live Serverでプレビュー  Live Server の使い方
    3. VS CodeからPHPを実行  PHP実行環境作成  PHPコーディング  デバッグ  PHP実行手順