推薦了幾個(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ù)覽

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

***提示***

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

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

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

1.2 文件夾和文件的打開(kāi)

文件——>打開(kāi)文件夾/打開(kāi)文件

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ì)開(kāi)發(fā)者來(lái)說(shuō)不可或缺，Visual Studio code 自然也自帶終端視窗。

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

需要注意的是：如果當(dāng)前的文件夾的路徑名稱(chēng)包含中文，會(huì)出現(xiàn)終端打開(kāi)失敗（待驗(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ò)展的名稱(chēng)一般都暴露了它的功能，基本如下：

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

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

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

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

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

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

1.7 文件圖標(biāo)主題設(shè)置之前寫(xiě)的有一篇經(jīng)驗(yàn)，鏈接附上。

1.7 文件圖標(biāo)主題設(shè)置之前寫(xiě)的有一篇經(jīng)驗(yàn)，鏈接附上。

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

2.1 用戶(hù)設(shè)置入口

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

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

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

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

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

        例如：

        {

            "editor.fontSize": 20

        }

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

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

3.插件推薦及使用配置

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

3.1 HTNL Snippets

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

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

"less.compile": {

"compress":  true,

"sourceMap": true,

"out":false

}

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

{

"less.compile": {

"compress":  true,

"sourceMap": true,

"out":false

}

}

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

****提示：****

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

3.3 VS color Picker

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

3.4 live HTML Previewer

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

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

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

3.5 SVG Viewer

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

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

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

4.VS code 用戶(hù)代碼片段

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

用戶(hù)代碼片段 是用來(lái)提示代碼提示及快捷插入的，那么怎么做呢？

    1.文件——>首選項(xiàng)——>用戶(hù)代碼片段

    2.選擇代碼語(yǔ)言

    3.按固定格式寫(xiě)json代碼

    示例格式：

"Print to console":

{"prefix": "log",

"body": [

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

"$2"

],

"description": "Log output to console"

}

4.2 片段json示例寫(xiě)法詳解

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

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

B."prefix": "XXXX", 

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

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

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

D.  "description": "XXXX"

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

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中間。輸入或者移動(dòng)光標(biāo)之后光標(biāo)恢復(fù)正常

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

代碼格式化主要就是縮進(jìn)和換行了。

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

2.怎么在"body":[]中插入帶雙引號(hào)的內(nèi)容?因?yàn)樽⑨寧в刑厥夥?hào)尤其是帶有雙引號(hào)（"")的內(nèi)容會(huì)導(dǎo)致json報(bào)錯(cuò)，解決方法是用反斜杠“\”對(duì)特殊符號(hào)進(jìn)行轉(zhuǎn)義。

例如：

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

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

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

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

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

4.4 下面是我寫(xiě)的一段完整的示例(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>

（效果見(jiàn)動(dòng)圖）

最新評(píng)論