Visual Studio Code教程：基礎使用和自定義設置

1、界面介紹

1.1 界面介紹

1.2 文件夾和文件的打開

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

1.3 新建文件/文件夾

新建文件： 

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

b. 按Ctrl+n;

c. 點文件夾名後面的+號圖標。 

新建文件夾： 

點文件夾名後面的+號圖標

1.4 拆分編輯器（分列）

快加鍵：Ctrl+\ 

點擊拆分編輯器圖標（右上角）進行拆分編輯器。拆分完畢以後，能夠經過鼠標點擊拖動文件到相應的列。多列同時瀏覽免去多文件來回切換

1.5 集成終端

終端對開發者來講不可或缺，Visual Studio code 天然也自帶終端視窗。

可按快捷鍵Ctrl+`快速調出終端，也能夠 查看——>集成終端 調出。

須要注意的是：若是當前的文件夾的路徑名稱包含中文，會出現終端打開失敗（待驗證）。

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

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

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

    a2.查看——>擴展；  

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

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

擴展下載安裝完畢以後須要點擊【啓用】才生效，有些擴展須要重啓編輯器才生效。

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

擴展的名稱通常都暴露了它的功能，基本以下： 

1.帶snippets 通常是代碼提示類擴展； 

2.帶viewer 通常是代碼運行預覽類擴展； 

3.帶support 通常是代碼語言支持； 

4.帶document 通常是參考文檔類擴展； 

5.帶Formatt 通常是代碼格式化整理擴展；

固然有的snippets 也自帶support功能，並非以上面的關鍵詞做爲惟一標準。

2、用戶設置

2.1 用戶設置入口

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

編輯器會拆分爲兩列，一個文件是【默認設置】，一個是【settings.json】，用戶設置是空的【settings.json】這個文件（以前沒有設置的話），須要自定義的設置項就在settings.json文件裏寫入json代碼便可

2.2 自定義的設置方法爲：

一、在【默認設置】裏找到相關的設置json代碼段，複製該設置完整的json塊，例如：【"editor.fontSize": 14,】。 

二、到【settings.json】粘貼。不過記得加上外層（先後）「{}」符號，否則不是完整的json，會出錯或者設置無效。 

例如： 

        {

            "editor.fontSize": 20 

        } 

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

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

3、插件推薦介紹

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 比較好。

3.3 VS color Picker

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

3.4 live HTML Previewer

爲html文檔提供預覽功能，須要用命令或者快捷鍵調出，會在編輯器中新增一列，用於運行html文件。 

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

b. 能夠在html文檔中右鍵選擇：Open in browser 在系統默認瀏覽器中打開，該模式下不能提供實時預覽,保存時不自動刷新瀏覽器。

3.5 SVG Viewer

爲SVG 文檔在編輯器中提供預覽。 

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

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

4、代碼風格

4.1 用戶代碼片斷 設置入口及示例

用戶代碼片斷 是用來提示代碼提示及快捷插入的，那麼怎麼作呢？ 

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

2.選擇代碼語言 

3.按固定格式寫json代碼 

示例格式： 

"Print to console": 
{

"prefix": "log", 

"body": [ 

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

　　"$2"

],

"description": "Log output to console" 
}

4.2 片斷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中間。輸入或者移動光標以後光標恢復正常

4.3 怎麼使插入的代碼塊符合格式化標準？

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

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

2.怎麼在"body":[]中插入帶雙引號的內容?由於註釋帶有特殊符號尤爲是帶有雙引號（"")的內容會致使json報錯，解決方法是用反斜槓「\」對特殊符號進行轉義。

例如： 

但願插入：<a href="XXXX/">凱玩網</a> 

那麼"body":[]那裏應該這樣寫: 

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

這裏在"description": "XXXX"那裏一樣適用。 

總的來講，碰到json報錯的字符或者符號就用反斜槓「\」進行轉義。固然你要考慮插入以後會不會影響程序文檔報錯或者出現異常，也就是要先肯定插入的代碼塊是正確的完整的，這是自定義代碼塊存在的意義

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

自定義的json{ 

"Print to authorInfo": { 

"prefix": "au", 

"body": [ 

"mail:XXXXXXX",

"description:$1", 

"            Step 1:", 

"            Step 2:",

"<a href=\"XXXX/\">凱玩網</a>"], 

"description": "author info"
}
}

插入結果爲： 

mail:XXXXXXX 

description: 

            Step 1: 

            Step 2:

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