visual studio code教程：基礎使用和自定義設定

visual studio code教程：基礎使用和自定義設定

材料/工具

認識檢視介面

方法

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

資料夾和檔案的開啟
檔案——>開啟資料夾/開啟檔案

新建檔案/資料夾
新建檔案：
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檔案。可自定義設定。開發者給出的配置例子：

"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>

（效果見動圖）