[開發環境]開發環境測試

4.測試開發環境及工具是否正常運作

4.1 VS Code的開啟方式

開發者工具畫面
VS Code有多種的開啟方式來配合不同的使用情境：

1.拖放式

先開啟VS Code後，將要編輯的專案目錄或單一檔案以滑鼠拖拉進VS Code的視窗，即可開啟該專案目錄或檔案：

2.右鍵選單

在專案目錄或檔案上按下滑鼠右鍵，即可在選單中看到以Code開啟的選項，選擇後即可開啟該專案目錄或檔案：

在專案目錄中的空白處理，沒有選擇任何檔案的狀況下，按下滑鼠右鍵選擇以Code開啟的話則效果等同於開啟整個專案目錄：

4.2 建立第一個PHP網頁檔

點選VS Code左側功能圖示的第一個圖示，會開出一個側邊欄，這裏可以用來瀏灠我們專案目錄中的所有檔案，在目錄名稱的右邊有四個小icon分別代表不同的能，先點選第一個icon來新增檔案：

網站中的第一個檔案都是預設為index做為檔名，因為我們使php來開發，所以請先建立一個index.php檔案：

完成新增檔案後，游標會自動定位到右側的編輯區，請先鍵入以下的程式碼：

<?php

echo "hello world";

?>

然後存檔，接著開啟xampp，並啟用Apache：

點選Apache項目中的Admin按鈕，或是在瀏灠器的網址列中輸入 http://localhost ，如果設定都正確，則會看到剛才輸入的 hello world 字樣，至此表示網頁程式設計的開發環境已建置完成