Microsoft Visual Studio Code

軟體介紹

Visual Studio Code（簡稱“VS Code”）是微軟推出的編寫現代Web和雲應用的跨平臺原始碼編輯器，可執行在Mac OS、Windows和Linux上。

VSCode安裝及配置

Visual Studio Code的安裝過程十分簡單，按安裝提示一步一步操作即可，本文以Windows為例向您介紹Visual Studio Code的詳細安裝步驟：

1. 雙擊安裝包

2. 勾選我同意此協議，單擊下一步。

3. 選擇安裝目錄，單擊下一步。

4. 保持預設，單擊下一步。

5. 勾選以下幾個附加任務，單擊下一步。

6. 單擊安裝

   。

7. 等待安裝完成。

8. 安裝完成後預設是英文的，可以安裝簡體中文擴充套件，請參考。

9. 從資源管理器匯入我們的專案。

   
   

10. 可以看到匯入資料夾的話會將資料夾和其下的html檔案一塊匯入進來。
    

11. 單擊html檔案即可進行編輯

12. 作為一款強大的編輯器，VSCode支援編輯html檔案的同時看到網頁樣式，該功能由擴充套件（外掛）Live Server實現，請參考。

Visual Studio Code配置

推薦外掛安裝

Chinese (Simplified) ：Visual Studio Code簡體中文擴充套件

Visual Studio Code安裝完成預設是英文介面，對於不是很擅長英文的同學可以選擇安裝中文擴充套件：

1. 開啟VS Code左邊欄的擴充套件按鈕，搜尋Chinese，單擊Install。

2. 安裝完成之後，需要重啟VS Code生效，單擊右下角的Restart。

Live Server：實時載入動靜態頁面

功能：VSCode通過安裝Live Server擴充套件，可以實現儲存程式碼後瀏覽器自動同步重新整理，即時檢視網頁效果。

1. 開啟VSCode左側擴充套件欄，搜尋找到Live Server，單擊安裝即可。

2. 安裝完成後，開啟html檔案，在程式碼編輯處單擊滑鼠右鍵，可以看到有一個選項：Open with Live Server，單擊。

3. 可以看到開啟的html頁面是以一個伺服器地址的形式開啟的（區別於從本地磁碟開啟的html頁面）。

4. 測試下VSCode安裝了Live Server擴充套件後的效果。

   輸入一行程式碼，Ctrl+S儲存後，即可實時看到頁面效果：

5. 但這種情況貌似還是有點麻煩，每次修改完程式碼後仍然需要手動儲存，能不能實現編輯完程式碼的同時就能看到HTML頁面效果呢？答案是可以的，需要通過VSCode來進行設定：

   1. 開啟檔案 > 首選項 > 設定。

   2. 將Files:Auto Save設定為afterDelay，表示在一定延遲後自動儲存HTML程式碼。

   3. 此時可以看到，一邊寫程式碼可以同時看到HTML網頁效果。

Microsoft Visual Studio Code（VSCode）安裝程式不能建立目錄？

1. 學習前端的同學，都會用到微軟開發的工具visual studio code，然而在安裝第一步就遇到了麻煩，安裝時提示：安裝程式不能建立目錄"D:\Program Files\vscode\Microsoft VS Code"。錯誤5：拒絕訪問。

2. 出現這個問題的原因是VS安裝程式沒有許可權在指定磁碟建立目錄，需要找到安裝程式，右鍵選擇以管理員身份執行：

3. 單擊確定即可。