材料/工具
認識視圖介面
方法
和大多編輯器一樣，該有的基本都有。如圖：
檔案夾和檔案的開啟
檔案——>開啟檔案夾/開啟檔案
新建檔案/檔案夾
新建檔案：
a. 檔案——>新建檔案；
b. 按Ctrl+n;
c. 點檔案夾名後面的+號圖標。
新建檔案夾：
點檔案夾名後面的+號圖標。
拆分編輯器（分列）
快加鍵：Ctrl+
點擊拆分編輯器圖標（右上角）進行拆分編輯器。拆分完畢之後，可以透過鼠標點擊拖動檔案到相應的列。多列同時瀏覽免去多檔案來回切換。
集成終端
終端對開發者來說不可或缺，Visual Studio code 自然也自帶終端視窗。
可按快速鍵Ctrl+`快速調出終端，也可以 檢視——>集成終端 調出。
需要注意的是：如果當前的檔案夾的路徑名稱包含中文，會出現終端開啟失敗（待驗證）。
安裝/卸載擴展（插件）
a. 進入擴展視圖介面安裝/卸載
a1.快速鍵：Ctrl+shift+x；
a2.檢視——>擴展；
a3.點左側邊框的擴展圖標按鈕進入。
1.6 安裝/卸載擴展（插件）
a. 進入擴展視圖介面安裝/卸載
a1.快速鍵：Ctrl+shift+x；
a2.檢視——>擴展；
a3.點左側邊框的擴展圖標按鈕進入。
在頂部搜尋方塊輸入你需要的擴展插件，找到之後在擴展插件後面的選項中點擊【安裝】即可，需要卸載擴展只需要點【卸載】即可。
擴展下載安裝完畢之後需要點擊【啓用】才生效，有些擴展需要重啓編輯器才生效。
b. 如何選擇擴展（插件）呢？
其實也不難，擴展的名稱一般都暴露了它的功能，基本如下：
1.帶snippets 一般是代碼提示類擴展；
2.帶viewer 一般是代碼執行預覽類擴展；
3.帶support 一般是代碼語言支援；
4.帶document 一般是參考文檔類擴展；
5.帶Formatt 一般是代碼格式化整理擴展；
當然有的snippets 也自帶support功能，並不是以上面的關鍵詞作爲唯一標準。
在頂部搜尋方塊輸入你需要的擴展插件，找到之後在擴展插件後面的選項中點擊【安裝】即可，需要卸載擴展只需要點【卸載】即可。
VS code用戶設定
用戶設定入口
VS code支援用戶自訂設定編輯器，包括快加鍵修改、代碼高亮、以及擴展插件配置等，點擊檔案——>首選項——>用戶設定。
編輯器會拆分爲兩列，一個檔案是【默認設定】，一個是【settings.json】，用戶設定是空的【settings.json】這個檔案（之前沒有設定的話），需要自訂的設定項就在settings.json檔案裏寫入json代碼即可。
自訂的設定方法爲：
1、在【默認設定】裏找到相關的設定json代碼段，複製該設定完整的json塊，例如：【"editor.fontSize": 14,】。
2、到【settings.json】粘貼。不過記得加上外層（前後）“{}”符號，不然不是完整的json，會出錯或者設定無效。
例如：
{
"editor.fontSize": 20
}
完後按Ctrl+s儲存關掉視窗，編輯器的文字的大小就變成20了。
需要注意的是，【settings.json】的代碼必須符合json格式，且名稱（如上面的editor.fontSize）和值對（如上面的20）是【默認設定】裏有的或者是擴展中支援的，不然不會有任何作用。
插件推薦及使用配置
VS code的擴展還是比較豐富的，具體選擇方法在前面的步驟1.6已經教大家了，下面介紹幾個對基本web前端編輯比較實用的擴展插件（我個人認爲）。
3.1 HTNL Snippets
爲HTML文檔提供代碼提示功能，包含HTML5。
3.2 easyless爲less文檔提供提示，錯誤警告，以及把less文檔編譯爲css檔案。可自訂設定。開發者給出的配置例子：
"less.compile": {"compress":true,"sourceMap": true,"out":false}可以粘貼到用戶設定的【默認設定】裏，也可以粘貼到用戶設定settings.json裏。後面的懂json的同學自動忽略：如果settings.json是空的，應該寫成：{
"less.compile": {
"compress": true,
"sourceMap": true,
"out":false
}
}
如果之前已有寫入json代碼，你應該在前面的名稱/值對塊後面加上“,”（新手容易多加或者少加","符號，個人覺得是這樣的）。
***提示：****
在寫的時候，代碼內最好不要加註釋。"sourceMap": true, 這個地方最好設定成false ，因爲當你實際使用的時候瀏覽器找不到sourceMap 可能會報錯或者瀏覽器一直去找，還沒遇到過（我碰到jQuery.js因爲這個報錯的），入門的同學還是設定成false 比較好。
VS color Picker
爲css文檔和HTML文檔提供顏色選擇，當輸入“#”後會出現顏色選擇器浮窗，點擊相應顏色之後會插入文檔中，默認用16進製表示。若想用其他格式的顏色，如RGB等則推薦擴展：Color Picker (Color Picker缺點是需要配置，安裝nodejs，並且添加node到全局環境變量中。而且在插入時需要使用命令調出提色板，有點麻煩）
live HTML Previewer
爲html文檔提供預覽功能，需要用命令或者快速鍵調出，會在編輯器中新增一列，用於執行html檔案。
a. 按F1在命令框中輸入：Show side preview 新增一列顯示html，能邊寫邊看到效果，實時預覽。
b. 可以在html文檔中右鍵選擇：Open in browser 在系統默認瀏覽器中開啟，該模式下不能提供實時預覽,儲存時不自動重新載入瀏覽器。
SVG Viewer
爲SVG 文檔在編輯器中提供預覽。
a. 按F1在命令框中輸入：SVG
b. 選擇SVG Viewer,新增一列顯示SVG執行結果。
VS code 用戶代碼片段
VS code 用戶代碼片段
4.1 用戶代碼片段 設定入口及示例
用戶代碼片段 是用來提示代碼提示及快捷插入的，那麼怎麼做呢？
1.檔案——>首選項——>用戶代碼片段
2.選擇代碼語言
3.按固定格式寫json代碼示例格式："Print to console":{"prefix": "log","body": ["console.log('$1');","$2"],"description": "Log output to console"}
片段json示例寫法詳解
可變區域（這裏用XXXX表示）如下：A. "Print to XXXX": {
//僅作爲標識和目的用途，區別於其他代碼塊（有多個相同值時會報錯），不會插入。
B."prefix": "XXXX",
//觸發提示的關鍵字元，也就是輸入什麼時彈出提示窗。例如:當希望輸入a的時候就彈出，這裏就寫a。在提示窗顯示。
C. "body": ["XXXX $1 XXXX"],
//在編輯器中插入的代碼塊，例如當在提示窗中選擇a的時候就插入【<a>a</a>】那麼這裏就寫：<a>a</a>
D."description": "XXXX"
// 這裏是相關描述，比如說明插入的代碼塊內容、用途、代碼結構、參數等，僅在提示窗顯示不會插入}
E. 上面示例中的$1和$2是初始定位遊標位置，用於插入後需要修改的值、參數等。還是上面的例子：
"body":["<a>$1</a>"]
那麼在插入<a></a>之後，遊標的位置將處於<a>和</a>的中間。再如：
"body":["<a>$1</a>",
"<span>$2GBK</span>"]
那麼在插入
<a></a>
<span>GBK</span>
之後，遊標首先在a標籤內，輸入完內容之後，遊標跳到<span>和GBK中間。輸入或者移動遊標之後遊標恢復正常
怎麼使插入的代碼塊符合格式化標準？
代碼格式化主要就是縮進和換行了。
1.要縮進的地方按下TAB鍵即可，例如：[" <a>$1</a>"]
2.怎麼在"body":[]中插入帶雙引號的內容?因爲註釋帶有特殊符號尤其是帶有雙引號（"")的內容會導致json報錯，解決方法是用反斜槓“”對特殊符號進行轉義。
例如：
希望插入：<a href="XXXX/">凱玩網</a>
那麼"body":[]那裏應該這樣寫:
["<a href="XXXX/">凱玩網</a>"這裏在"description": "XXXX"那裏同樣適用。總的來說，碰到json報錯的字元或者符號就用反斜槓“”進行轉義。當然你要考慮插入之後會不會影響程序文檔報錯或者出現異常，也就是要先確定插入的代碼塊是正確的完整的，這是自訂代碼塊存在的意義
下面是我寫的一段完整的示例(XXXX都匿了)：自訂的json{
"Print to authorInfo": {
"prefix": "au",
"body": [
"-----By Ray-----",
"mail:XXXXXXX",
"description:$1",
"Step 1:",
"Step 2:",
"<a href="XXXX/">凱玩網</a>"],
"description": "author info"
}
}
插入結果爲：
-----By Ray-----
mail:XXXXXXX
description:
Step 1:
Step 2:
<a href="XXXX/">凱玩網</a>
（效果見動圖）
趣知科普吧
