材料/工具
認識視圖界面
方法
和大多編輯器一樣，該有的基本都有。如圖：
文件夾和文件的打開
文件——>打開文件夾/打開文件
新建文件/文件夾
新建文件：
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>
（效果見動圖）
