初次使用vscode時各種不適應，所有需要用到的功能貌似都需要單獨安裝外掛才能用。這讓很多初次使用vscode的朋友有點無所適從。

下面本人就帶各位朋友學習下如何使用vscode來進行最基本的工作——頁面啟動與程式碼除錯

一、安裝vscode（已經安裝的朋友忽略，直接進行第二步）

官網下載地址：https://code.visualstudio.com/docs/?dv=win

稍等幾秒鐘，會自動彈出下載框

二、安裝中文外掛

vscode預設是英文選單，想以中文形式來顯示的朋友可以搜尋外掛【Chinese (Simplified) Language Pack for Visual Studio Code】，如圖：

安裝之後，點選重新載入，或者重啟vscode，既可以中文形式顯示選單。

三、頁面除錯

1. 配置launch.json

配置完此處的朋友先不要著急進行嘗試，因為此時點選綠色的開始按鈕除錯啟動後，發現頁面並打不開，只是個瀏覽器連結失敗的提示。

此時，我們需要安裝類似apache、iis之類的伺服器外掛來支援頁面在模擬伺服器中執行並顯示。

2. 安裝外掛【Live Server】

這就是上面提到的支援頁面在模擬伺服器中執行的外掛了，如圖：

安裝完成如果左側有【重新載入】的提示，則點選該按鈕以重新載入。

3. 開啟html頁面，進行除錯測試

基礎工作都準備好了，此時除錯模式有兩種：

使用本地靜態頁面除錯：

選擇自己配置的測試選項，開啟需要除錯的頁面，按F5啟動除錯，如圖

使用伺服器形式進行除錯：

此時我們安裝的live server就派上用場了，同樣開啟要除錯的頁面，滑鼠在頁面任意地方右鍵單機，選擇“Open with live server”，如圖：

此時我們想使用vscode進行程式碼除錯的需求到這裡就已經大功告成了！！！

最後，為大家推薦一個好看的vscode檔案圖示主題外掛：【Material Icon Theme】

效果如圖：