推薦了幾個自認為比較好的要求配置項目比較低的VS code擴展插件：

Html Snippets——html代碼提示

easyless——css編程/生成

VS color Picker——顏色選擇器

live HTML Previewer——html文件運行預覽

SVG Viewer———SVG運行預覽

還有就是用戶設置的配置方法和用戶代碼片段的編寫。

***提示***

經驗里的圖片都是GIF動圖，大家要多次點擊圖片才能看到具體操作。

1.1 認識視圖界面

和大多編輯器一樣，該有的基本都有。如圖：

1.2 文件夾和文件的打開

文件——>打開文件夾/打開文件

1.3 新建文件/文件夾

新建文件：

a. 文件——>新建文件；

b. 按Ctrl+n;

c. 點文件夾名后面的+號圖標。

新建文件夾：

點文件夾名后面的+號圖標。

1.4 拆分編輯器（分列）

快加鍵：Ctrl+/

點擊拆分編輯器圖標（右上角）進行拆分編輯器。拆分完畢之后，可以通過鼠標點擊拖動文件到相應的列。多列同時瀏覽免去多文件來回切換。

1.5 集成終端

終端對開發者來說不可或缺，Visual Studio code 自然也自帶終端視窗。

可按快捷鍵Ctrl+`快速調出終端，也可以 查看——>集成終端 調出。

需要注意的是：如果當前的文件夾的路徑名稱包含中文，會出現終端打開失敗（待驗證）。

1.6 安裝/卸載擴展（插件）

a. 進入擴展視圖界面安裝/卸載

    a1.快捷鍵：Ctrl+shift+x；

    a2.查看——>擴展；

    a3.點左側邊框的擴展圖標按鈕進入。

在頂部搜索框輸入你需要的擴展插件，找到之后在擴展插件后面的選項中點擊【安裝】即可，需要卸載擴展只需要點【卸載】即可。

擴展下載安裝完畢之后需要點擊【啟用】才生效，有些擴展需要重啟編輯器才生效。

b. 如何選擇擴展（插件）呢？

其實也不難，擴展的名稱一般都暴露了它的功能，基本如下：

1.帶snippets 一般是代碼提示類擴展；

2.帶viewer 一般是代碼運行預覽類擴展；

3.帶support 一般是代碼語言支持；

4.帶document 一般是參考文檔類擴展；

5.帶Formatt 一般是代碼格式化整理擴展；

當然有的snippets 也自帶support功能，并不是以上面的關鍵詞作為唯一標準。