visual studio code教程：基礎(chǔ)使用和自定義設(shè)置

材料/工具

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

方法

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

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

新建文件/文件夾
新建文件：
a. 文件——>新建文件；
b. 按Ctrl+n;
c. 點(diǎn)文件夾名后面的+號(hào)圖標(biāo)。
新建文件夾：
點(diǎn)文件夾名后面的+號(hào)圖標(biāo)。

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

集成終端
終端對(duì)開發(fā)者來(lái)說(shuō)不可或缺，Visual Studio code 自然也自帶終端視窗。
可按快捷鍵Ctrl+`快速調(diào)出終端，也可以 查看——>集成終端 調(diào)出。
需要注意的是：如果當(dāng)前的文件夾的路徑名稱包含中文，會(huì)出現(xiàn)終端打開失?。ù?yàn)證）。

安裝/卸載擴(kuò)展（插件）
a. 進(jìn)入擴(kuò)展視圖界面安裝/卸載
a1.快捷鍵：Ctrl+shift+x；
a2.查看——>擴(kuò)展；
a3.點(diǎn)左側(cè)邊框的擴(kuò)展圖標(biāo)按鈕進(jì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)。

VS code用戶設(shè)置

用戶設(shè)置入口
VS code支持用戶自定義設(shè)置編輯器，包括快加鍵修改、代碼高亮、以及擴(kuò)展插件配置等，點(diǎn)擊文件——>首選項(xiàng)——>用戶設(shè)置。
編輯器會(huì)拆分為兩列，一個(gè)文件是【默認(rèn)設(shè)置】，一個(gè)是【settings.json】，用戶設(shè)置是空的【settings.json】這個(gè)文件（之前沒(méi)有設(shè)置的話），需要自定義的設(shè)置項(xiàng)就在settings.json文件里寫入json代碼即可。

自定義的設(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格式，且名稱（如上面的editor.fontSize）和值對(duì)（如上面的20）是【默認(rèn)設(shè)置】里有的或者是擴(kuò)展中支持的，不然不會(huì)有任何作用。

插件推薦及使用配置

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文件?？勺远x設(shè)置。開發(fā)者給出的配置例子：

"less.compile": {"compress":true,"sourceMap": true,"out":false}可以粘貼到用戶設(shè)置的【默認(rèn)設(shè)置】里，也可以粘貼到用戶設(shè)置settings.json里。后面的懂json的同學(xué)自動(dòng)忽略：如果settings.json是空的，應(yīng)該寫成：{

"less.compile": {

"compress":  true,

"sourceMap": true,

"out":false

}

}

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

***提示：****

在寫的時(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ò)的），入門的同學(xué)還是設(shè)置成false 比較好。

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)麻煩）

live HTML Previewer
為html文檔提供預(yù)覽功能，需要用命令或者快捷鍵調(diào)出，會(huì)在編輯器中新增一列，用于運(yùn)行html文件。
a. 按F1在命令框中輸入：Show side preview 新增一列顯示html，能邊寫邊看到效果，實(shí)時(shí)預(yù)覽。
b. 可以在html文檔中右鍵選擇：Open in browser 在系統(tǒng)默認(rèn)瀏覽器中打開，該模式下不能提供實(shí)時(shí)預(yù)覽,保存時(shí)不自動(dòng)刷新瀏覽器。

SVG Viewer
為SVG 文檔在編輯器中提供預(yù)覽。
a. 按F1在命令框中輸入：SVG
b. 選擇SVG Viewer,新增一列顯示SVG運(yùn)行結(jié)果。

VS code 用戶代碼片段

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

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

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

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

3.按固定格式寫json代碼示例格式："Print to console":{"prefix": "log","body": ["console.log('$1');","$2"],"description": "Log output to console"}

片段json示例寫法詳解
可變區(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í)候就彈出，這里就寫a。在提示窗顯示。
C. "body": ["XXXX $1 XXXX"],
//在編輯器中插入的代碼塊，例如當(dāng)在提示窗中選擇a的時(shí)候就插入【<a>a</a>】那么這里就寫：<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ù)正常

怎么使插入的代碼塊符合格式化標(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)該這樣寫:
["<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)異常，也就是要先確定插入的代碼塊是正確的完整的，這是自定義代碼塊存在的意義

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

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com