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

Html Snippets——html代碼提示

easyless——css編程/生成

VS color Picker——顏色選擇器

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

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

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

***提示***

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

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

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

1.2 文件夾和文件的打開

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

1.3 新建文件/文件夾

新建文件：

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

b. 按Ctrl+n;

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

新建文件夾：

點文件夾名后面的+號圖標(biāo)。

1.4 拆分編輯器（分列）

快加鍵：Ctrl+/

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

1.5 集成終端

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

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

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

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

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

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

    a2.查看——>擴展；

    a3.點左側(cè)邊框的擴展圖標(biāo)按鈕進入。

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

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

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

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

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

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

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

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

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

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

2.VS code用戶設(shè)置

2.1 用戶設(shè)置入口

VS code支持用戶自定義設(shè)置編輯器，包括快加鍵修改、代碼高亮、以及擴展插件配置等，點擊文件——>首選項——>用戶設(shè)置。

編輯器會拆分為兩列，一個文件是【默認(rèn)設(shè)置】，一個是【settings.json】，用戶設(shè)置是空的【settings.json】這個文件（之前沒有設(shè)置的話），需要自定義的設(shè)置項就在settings.json文件里寫入json代碼即可。

2.2 自定義的設(shè)置方法為：

1、在【默認(rèn)設(shè)置】里找到相關(guān)的設(shè)置json代碼段，復(fù)制該設(shè)置完整的json塊，例如：【"editor.fontSize": 14,】。

2、到【settings.json】粘貼。不過記得加上外層（前后）“{}”符號，不然不是完整的json，會出錯或者設(shè)置無效。

        例如：

        {

            "editor.fontSize": 20

        }

完后按Ctrl+s保存關(guān)掉窗口，編輯器的文字的大小就變成20了。

需要注意的是，【settings.json】的代碼必須符合json格式，且名稱（如上面的editor.fontSize）和值對（如上面的20）是【默認(rèn)設(shè)置】里有的或者是擴展中支持的，不然不會有任何作用。

3.插件推薦及使用配置

VS code的擴展還是比較豐富的，具體選擇方法在前面的步驟1.6已經(jīng)教大家了，下面介紹幾個對基本web前端編輯比較實用的擴展插件（我個人認(rèn)為）。

3.1 HTNL Snippets

為HTML文檔提供代碼提示功能，包含HTML5。

3.2 easyless為less文檔提供提示，錯誤警告，以及把less文檔編譯為css文件。可自定義設(shè)置。開發(fā)者給出的配置例子：

"less.compile": {

"compress":  true,

"sourceMap": true,

"out":false

}

可以粘貼到用戶設(shè)置的【默認(rèn)設(shè)置】里，也可以粘貼到用戶設(shè)置settings.json里。后面的懂json的同學(xué)自動忽略：如果settings.json是空的，應(yīng)該寫成：

{

"less.compile": {

"compress":  true,

"sourceMap": true,

"out":false

}

}

如果之前已有寫入json代碼，你應(yīng)該在前面的名稱/值對塊后面加上“,”（新手容易多加或者少加","符號，個人覺得是這樣的）。

****提示：****

在寫的時候，代碼內(nèi)最好不要加注釋。"sourceMap": true, 這個地方最好設(shè)置成false ，因為當(dāng)你實際使用的時候瀏覽器找不到sourceMap 可能會報錯或者瀏覽器一直去找，還沒遇到過（我碰到j(luò)Query.js因為這個報錯的），入門的同學(xué)還是設(shè)置成false 比較好。

3.3 VS color Picker

為css文檔和HTML文檔提供顏色選擇，當(dāng)輸入“#”后會出現(xiàn)顏色選擇器浮窗，點擊相應(yīng)顏色之后會插入文檔中，默認(rèn)用16進制表示。若想用其他格式的顏色，如RGB等則推薦擴展：Color Picker (Color Picker缺點是需要配置，安裝nodejs，并且添加node到全局環(huán)境變量中。而且在插入時需要使用命令調(diào)出提色板，有點麻煩）

3.4 live HTML Previewer

為html文檔提供預(yù)覽功能，需要用命令或者快捷鍵調(diào)出，會在編輯器中新增一列，用于運行html文件。

a. 按F1在命令框中輸入：Show side preview 新增一列顯示html，能邊寫邊看到效果，實時預(yù)覽。

b. 可以在html文檔中右鍵選擇：Open in browser 在系統(tǒng)默認(rèn)瀏覽器中打開，該模式下不能提供實時預(yù)覽,保存時不自動刷新瀏覽器。

3.5 SVG Viewer

為SVG 文檔在編輯器中提供預(yù)覽。

a. 按F1在命令框中輸入：SVG

b. 選擇SVG Viewer,新增一列顯示SVG運行結(jié)果。

4.VS code 用戶代碼片段

4.1 用戶代碼片段 設(shè)置入口及示例

用戶代碼片段 是用來提示代碼提示及快捷插入的，那么怎么做呢？

    1.文件——>首選項——>用戶代碼片段

    2.選擇代碼語言

    3.按固定格式寫json代碼

    示例格式：

"Print to console":

{"prefix": "log",

"body": [

"console.log('$1');",

"$2"

],

"description": "Log output to console"

}

4.2 片段json示例寫法詳解

可變區(qū)域（這里用XXXX表示）如下：A. "Print to XXXX": { 

//僅作為標(biāo)識和目的用途，區(qū)別于其他代碼塊（有多個相同值時會報錯），不會插入。

B."prefix": "XXXX", 

//觸發(fā)提示的關(guān)鍵字符，也就是輸入什么時彈出提示窗。例如:當(dāng)希望輸入a的時候就彈出，這里就寫a。在提示窗顯示。

C. "body": ["XXXX $1 XXXX"],

//在編輯器中插入的代碼塊，例如當(dāng)在提示窗中選擇a的時候就插入【<a>a</a>】那么這里就寫：<a>a</a> 

D.  "description": "XXXX"

// 這里是相關(guān)描述，比如說明插入的代碼塊內(nèi)容、用途、代碼結(jié)構(gòu)、參數(shù)等，僅在提示窗顯示不會插入}

E. 上面示例中的$1和$2是初始定位光標(biāo)位置，用于插入后需要修改的值、參數(shù)等。還是上面的例子：

"body":["<a>$1</a>"]

那么在插入<a></a>之后，光標(biāo)的位置將處于<a>和</a>的中間。再如：

"body":["<a>$1</a>",

"<span>$2GBK</span>"]

那么在插入

<a></a>

<span>GBK</span>

之后，光標(biāo)首先在a標(biāo)簽內(nèi)，輸入完內(nèi)容之后，光標(biāo)跳到<span>和GBK中間。輸入或者移動光標(biāo)之后光標(biāo)恢復(fù)正常

4.3 怎么使插入的代碼塊符合格式化標(biāo)準(zhǔn)？

代碼格式化主要就是縮進和換行了。

1.要縮進的地方按下TAB鍵即可，例如：["   <a>$1</a>"]

2.怎么在"body":[]中插入帶雙引號的內(nèi)容?因為注釋帶有特殊符號尤其是帶有雙引號（"")的內(nèi)容會導(dǎo)致json報錯，解決方法是用反斜杠“/”對特殊符號進行轉(zhuǎn)義。

例如：

希望插入：<a href="XXXX/">凱玩網(wǎng)</a>

那么"body":[]那里應(yīng)該這樣寫:

["<a href=/"XXXX//">凱玩網(wǎng)</a>"

這里在"description": "XXXX"那里同樣適用。

總的來說，碰到j(luò)son報錯的字符或者符號就用反斜杠“/”進行轉(zhuǎn)義。當(dāng)然你要考慮插入之后會不會影響程序文檔報錯或者出現(xiàn)異常，也就是要先確定插入的代碼塊是正確的完整的，這是自定義代碼塊存在的意義

4.4 下面是我寫的一段完整的示例(XXXX都匿了)：自定義的json{

"Print to authorInfo": {

"prefix": "au",

"body": [

"-----By Ray-----",

"mail:XXXXXXX",

"description:$1",

"            Step 1:",

"            Step 2:",

"<a href=/"XXXX//">凱玩網(wǎng)</a>"],

"description": "author info"

}

}

插入結(jié)果為：

-----By Ray-----

mail:XXXXXXX

description:

            Step 1:

            Step 2:

<a href="XXXX/">凱玩網(wǎng)</a>

（效果見動圖）