材料/工具

認識視圖界面

方法

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

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

新建文件/文件夾
新建文件：
a. 文件——>新建文件；
b. 按Ctrl+n;
c. 點文件夾名后面的+號圖標。
新建文件夾：
點文件夾名后面的+號圖標。

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

集成終端
終端對開發者來說不可或缺，Visual Studio code 自然也自帶終端視窗。
可按快捷鍵Ctrl+`快速調出終端，也可以 查看——>集成終端 調出。
需要注意的是：如果當前的文件夾的路徑名稱包含中文，會出現終端打開失敗（待驗證）。

安裝/卸載擴展（插件）
a. 進入擴展視圖界面安裝/卸載
a1.快捷鍵：Ctrl+shift+x；
a2.查看——>擴展；
a3.點左側邊框的擴展圖標按鈕進入。

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

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

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

    a2.查看——>擴展；

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

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

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

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

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

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

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

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

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

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

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

VS code用戶設置

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

自定義的設置方法為：
1、在【默認設置】里找到相關的設置json代碼段，復制該設置完整的json塊，例如：【"editor.fontSize": 14,】。
2、到【settings.json】粘貼。不過記得加上外層（前后）“{}”符號，不然不是完整的json，會出錯或者設置無效。
例如：
{
"editor.fontSize": 20
}

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

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

插件推薦及使用配置

VS code的擴展還是比較豐富的，具體選擇方法在前面的步驟1.6已經教大家了，下面介紹幾個對基本web前端編輯比較實用的擴展插件（我個人認為）。
3.1 HTNL Snippets
為HTML文檔提供代碼提示功能，包含HTML5。
3.2 easyless為less文檔提供提示，錯誤警告，以及把less文檔編譯為css文件?？勺远x設置。開發者給出的配置例子：

"less.compile": {"compress":true,"sourceMap": true,"out":false}可以粘貼到用戶設置的【默認設置】里，也可以粘貼到用戶設置settings.json里。后面的懂json的同學自動忽略：如果settings.json是空的，應該寫成：{

"less.compile": {

"compress":  true,

"sourceMap": true,

"out":false

}

}

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

***提示：****

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

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

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

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

VS code 用戶代碼片段

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

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

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

2.選擇代碼語言

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

片段json示例寫法詳解
可變區域（這里用XXXX表示）如下：A. "Print to XXXX": {
//僅作為標識和目的用途，區別于其他代碼塊（有多個相同值時會報錯），不會插入。
B."prefix": "XXXX",
//觸發提示的關鍵字符，也就是輸入什么時彈出提示窗。例如:當希望輸入a的時候就彈出，這里就寫a。在提示窗顯示。
C. "body": ["XXXX $1 XXXX"],
//在編輯器中插入的代碼塊，例如當在提示窗中選擇a的時候就插入【<a>a</a>】那么這里就寫：<a>a</a>
D."description": "XXXX"
// 這里是相關描述，比如說明插入的代碼塊內容、用途、代碼結構、參數等，僅在提示窗顯示不會插入}
E. 上面示例中的$1和$2是初始定位光標位置，用于插入后需要修改的值、參數等。還是上面的例子：
"body":["<a>$1</a>"]
那么在插入<a></a>之后，光標的位置將處于<a>和</a>的中間。再如：
"body":["<a>$1</a>",
"<span>$2GBK</span>"]
那么在插入
<a></a>
<span>GBK</span>
之后，光標首先在a標簽內，輸入完內容之后，光標跳到<span>和GBK中間。輸入或者移動光標之后光標恢復正常

怎么使插入的代碼塊符合格式化標準？
代碼格式化主要就是縮進和換行了。
1.要縮進的地方按下TAB鍵即可，例如：[" <a>$1</a>"]

2.怎么在"body":[]中插入帶雙引號的內容?因為注釋帶有特殊符號尤其是帶有雙引號（"")的內容會導致json報錯，解決方法是用反斜杠“”對特殊符號進行轉義。
例如：
希望插入：<a href="XXXX/">凱玩網</a>
那么"body":[]那里應該這樣寫:
["<a href="XXXX/">凱玩網</a>"這里在"description": "XXXX"那里同樣適用。總的來說，碰到json報錯的字符或者符號就用反斜杠“”進行轉義。當然你要考慮插入之后會不會影響程序文檔報錯或者出現異常，也就是要先確定插入的代碼塊是正確的完整的，這是自定義代碼塊存在的意義

下面是我寫的一段完整的示例(XXXX都匿了)：自定義的json{
"Print to authorInfo": {
"prefix": "au",
"body": [
"-----By Ray-----",
"mail:XXXXXXX",
"description:$1",
"Step 1:",
"Step 2:",
"<a href="XXXX/">凱玩網</a>"],
"description": "author info"
}

}

插入結果為：

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

mail:XXXXXXX

description:

            Step 1:

            Step 2:

<a href="XXXX/">凱玩網</a>

（效果見動圖）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com