推薦了幾個(gè)自認(rèn)為比較好的要求配置項(xiàng)目比較低的VS code擴(kuò)展插件：

Html Snippets——html代碼提示

easyless——css編程/生成

VS color Picker——顏色選擇器

live HTML Previewer——html文件運(yùn)行預(yù)覽

SVG Viewer———SVG運(yùn)行預(yù)覽

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

***提示***

經(jīng)驗(yàn)里的圖片都是GIF動(dòng)圖，大家要多次點(diǎn)擊圖片才能看到具體操作。

1.1 認(rèn)識(shí)視圖界面

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

1.2 文件夾和文件的打開

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

1.3 新建文件/文件夾

新建文件：

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

b. 按Ctrl+n;

c. 點(diǎn)文件夾名后面的+號(hào)圖標(biāo)。

新建文件夾：

點(diǎn)文件夾名后面的+號(hào)圖標(biāo)。

1.4 拆分編輯器（分列）

快加鍵：Ctrl+/

點(diǎn)擊拆分編輯器圖標(biāo)（右上角）進(jìn)行拆分編輯器。拆分完畢之后，可以通過(guò)鼠標(biāo)點(diǎn)擊拖動(dòng)文件到相應(yīng)的列。多列同時(shí)瀏覽免去多文件來(lái)回切換。

1.5 集成終端

終端對(duì)開發(fā)者來(lái)說(shuō)不可或缺，Visual Studio code 自然也自帶終端視窗。

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

需要注意的是：如果當(dāng)前的文件夾的路徑名稱包含中文，會(huì)出現(xiàn)終端打開失敗（待驗(yàn)證）。

1.6 安裝/卸載擴(kuò)展（插件）

a. 進(jìn)入擴(kuò)展視圖界面安裝/卸載

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

    a2.查看——>擴(kuò)展；

    a3.點(diǎn)左側(cè)邊框的擴(kuò)展圖標(biāo)按鈕進(jìn)入。

在頂部搜索框輸入你需要的擴(kuò)展插件，找到之后在擴(kuò)展插件后面的選項(xiàng)中點(diǎn)擊【安裝】即可，需要卸載擴(kuò)展只需要點(diǎn)【卸載】即可。

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

b. 如何選擇擴(kuò)展（插件）呢？

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

1.帶snippets 一般是代碼提示類擴(kuò)展；

2.帶viewer 一般是代碼運(yùn)行預(yù)覽類擴(kuò)展；

3.帶support 一般是代碼語(yǔ)言支持；

4.帶document 一般是參考文檔類擴(kuò)展；

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

當(dāng)然有的snippets 也自帶support功能，并不是以上面的關(guān)鍵詞作為唯一標(biāo)準(zhǔn)。