VScode的下載地址：VScode官網
將VScode設置爲中文語言環境
在拓展程序頁面搜索該名稱的插件：
Chinese (Simplified) Language Pack for Visual Studio Code
即爲上圖所展示的插件，點擊2處的綠色“Install”即可下載（這裏已經下載過了，所以顯示的是設置圖標），然後按照提示重啓軟件後即爲中文。
如果重啓後仍不爲中文，可以使用Ctrl+Shift+P喚起搜索欄，在其中輸入：
Configure Display Language
選擇其對應項，再選擇“zh-cn”選項，再次重啓軟件後，即爲中文。
編寫HTML文件
在項目內新建文件後，VScode並不知道你想要寫什麼，所以默認爲“純文本”格式，右下角顯示爲“純文本”。
點擊“純文本”後選擇HTML語言，在第一行輸入“！”，然後按下Tab即可快速生成標準的HTML代碼。
運行HTML文件
當然了，寫好之後就是要運行了，這裏可以安裝：
View In Browser
拓展插件，安裝方法與安裝中文簡體插件的方式相同，其展示頁如下：
安裝完成後，返回你要運行的文件界面，右擊該文件，選擇“View In Browser”選項，即可在默認瀏覽器中運行該文件。
提示：VScode不會像HBuilder X那樣每次運行前提示保存，所以每次運行前請先手動保存。
調試你的HTML文件
調試文件所需的插件爲：
Debugger for Chrome
其安裝方法與安裝中文簡體插件的方式相同，其展示頁如下：
安裝完成後返回代碼界面，按下F5，選擇“Chrome”，會轉到launch.json文件，如果沒有轉到launch.json的話，可以前往“運行和調試”——“創建launch.json文件”進行創建。
在打開的launch.json頁面中添加如下語句：
,
{
"name": "使用本機 Chrome 調試",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html", //需要調試的代碼頁面的路徑
// "url": "http://mysite.com/index.html", //使用外部服務器時,請註釋掉 file, 改用 url, 並將 useBuildInServer 設置爲 false "http://mysite.com/index.html
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
// "preLaunchTask":"build",
"userDataDir":"${tmpdir}",
"port":5433
}
其中的第一行的“，”不要忘記，谷歌瀏覽器的安裝路徑改爲自己的，需要調試的頁面如果不是“index.html”請更改爲相應的名字。添加後的代碼佈局大致爲：
然後在“運行和調試”中選擇“使用本機Chrome調試”。
在需要添加斷點的地方，點擊某行的最前方空白處即可添加斷點。右鍵需要監視的變量，即可添加到監視，準備工作完畢後按F5即可進行調試。
其中調試控制檯的幾個按鈕分別爲“暫停/繼續”、“單步跳過”、“單步調試”、“單步跳出”、“重啓”和“停止”。
添加用戶代碼片段
每次碼代碼都想偷懶，希望一個縮寫就能完成重複且枯燥的常用語句，VScode可以自定義用戶代碼段，讓自己所輸入的就是自己所想的。
點擊“文件”——“首選項”——“用戶代碼段”，選擇自己要定義哪些語言的自定義片段，HTML選擇“html.json”，JS選擇“javascript.json”，以此類推… …
進入對應的文件後，可以輸入以下片段：
"document.write": {
"prefix": "dw", // 觸發的關鍵字 輸入dw按下tab鍵
"body": [
"document.write(\" \")",
],
"description": "document輸出"
}
即輸入dw後按Tab即可顯示爲document.write(" ")，其中prefix爲用來觸發自定義代碼段的關鍵字，body爲自定義的代碼段，description爲備註。當然可以輸入多條，中間用“，”分隔，如下圖所示：
用戶自定義的代碼段關鍵字（應該）不會與對應語言的保留關鍵字發生衝突，所以不必擔心命名問題。
推薦插件
背景插件——background
在拓展中搜索：
background
其安裝方法與安裝中文簡體插件的方式相同，其展示頁如下：
首次安裝後會提示報錯，選擇不再提示即可。
選擇“文件”——“首選項”——“設置”，在設置搜索欄中輸入“background”，然後選擇"在settings.json中編輯"。
在文件中添加以下代碼段：
"workbench.startupEditor": "newUntitledFile",
//background 的相關配置
"update.enableWindowsBackgroundUpdates": false,
"background.customImages": [
"file:///D:/辦公軟件/show.png" //背景圖片路徑
],
"background.style": {
"content":"''",
"pointer-events":"none",
"position":"absolute", //圖片顯示位置
"width":"100%",
"height":"100%",
"z-index":"99999",
"background.repeat":"no-repeat",
"background-size":"15%,15%", //圖片大小
"opacity":0.3 //圖片透明度
}
"background.useFront": true,
"background.useDefault": false,
其中的關鍵語句都已經打過註釋了，style裏大致就是CSS樣式，根據自己的喜好調整即可。
錯誤提示——HTMLHint
當還總在爲不小心輸入中文卻毫不自知而苦惱時，當運行效果不對卻一眼看不出問題出在哪裏時，或許這款插件可以幫到你，在拓展中搜索：
HTMLHint
其安裝方法與安裝中文簡體插件的方式相同，其展示頁如下：
安裝完插件後，會在屏幕下方的“問題”一欄中顯示提示信息，如下圖的title未給值，以及name和type誤用了中文引號：
路徑補全——Path Intellisense
該插件可以完成自動完成文件名的工作，在拓展中搜索：
Path Intellisense
其安裝方法與安裝中文簡體插件的方式相同，其展示頁如下：
文件圖標——vscode-icons
該插件可以在文件前顯示對應的圖標，在拓展中搜索：
vscode-icons
其安裝方法與安裝中文簡體插件的方式相同，其展示頁如下：
安裝完成後的效果如下圖所示：
結語
本篇都是筆者邊實踐邊記錄的，如果遇到按照方法仍然無法實現的，可以聯繫我。另外推薦插件會不定時更新的，如果遇到好用的，就添加上。好了，別的就沒什麼了，還是那句話，如有錯誤或不足，還望指正。