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

visual studio code是一款輕量編輯器，採取了和VS相同的UI介面，搭配合適的插件可以優化前端開發的體驗，今天爲大家介紹一下visual studio code的使用技巧，大家可以學習下。

工具/材料

visual studio code

Windows系統

基礎教程

因爲軟件下載安裝之後，是英文版，可以先將其漢化，變成中文版，更方便開發。點擊插件按鈕搜尋 “Chinese”, 在彈出的選項中選擇第一個“中文簡體”。

右邊會彈出如下圖安裝介面，接着點擊【 Install 】安裝。安裝完畢後會有如下提示（主要提醒你安裝完中文簡體漢化包後一定要重啓方可生效）。

Vscode介面介紹：主要分爲5個區域，依次是活動欄、側邊欄、編輯欄、面板欄、狀態欄。

1.活動欄從上到下依次爲，開啟側邊欄、搜尋、使用git、debug、使用插件；
2.側邊欄，新建項目檔案和檔案夾；
3.編輯欄，編寫代碼的區域；
4.面板欄，從左到右依次爲：問題、輸出、調試欄、終端（terminal）、最重要的是terminal，下圖一所示，用來輸入相關命令；
5.狀態欄，點擊可以調出面板欄；
6.需要注意的爲下圖二紅框所示，分別表示鼠標遊標所在位置和tab縮進字元，這裏爲縮進4個字元。

新建檔案和檔案夾
新建檔案：Ctrl+N新建檔案並修改後綴即可（後綴根據所需檔案來，比如，，等）；
新建檔案夾
1.首先根據需要指定一個路徑（這裏路徑以桌面爲例），然後新建一個檔案夾（這裏新建的檔案夾爲demo1）；
2.鼠標點擊側邊欄第二個選項，如下圖一；
3.此時會提示你沒有可以開啟的檔案夾，點擊【Open Folder】按鈕匯入桌面新建的檔案夾demo1，如下圖二；
4.把檔案夾匯入後發現剛剛新建檔案夾名字是小寫的，現在變大寫了，如下圖三，這個不影響（右邊圖標從左到右爲，新建檔案 / 新建檔案夾 / 重新載入 / 摺疊檔案）。
注：新建檔案一定要修改後綴，否則默認都是text文字檔案

自動儲存設定。選擇File（檔案）、Preferences（首選項）、 Setting （設定）然後彈出下面介面，選擇“User”（一般會默認選中該選項），接着如下圖選擇“afterdelay”選項即可，下面有個數字1000表示1秒，這個可自行設定，表示多少秒以後自動儲存。

自動格式化代碼。選擇File（檔案）、 Preferences（首選項）、 Setting （設定）。User（用戶）、Text-Editor（文字編輯）、 Formatng（格式化），然後勾選下圖紅色框中的選項後，重啓Vscode即可。

Vscode更換主題。選擇File（檔案）、 Preferences（首選項）、Color-Theme （顏色主題），如下圖一所示。然後會出現下圖二紅色框的介面，此時按鍵盤上的上下鍵即可實時檢視主題顏色，直接回車可選中對應主題。

VS code用戶設定

選擇“檔案”選單內的“首選項”裏面的“用戶代碼片段”。

選擇代碼片段檔案“”。

輸入要自訂的快速鍵和模板代碼段。

進入 後綴的檔案中按快速鍵【vh】後按【tab】鍵即可實現快速輸入代碼段，自訂設定完成。

實用插件推薦

AutoFileName (檔案路徑自動補全插件)。

ESLint插件。安裝此插件，可使VS Code安裝和重啓後自動開始工作。

avaScript (ES6) Code Snippets (代碼片段插件)
用代碼片段加快ES開發速度，例如輸入imd可以自動生成如下代碼。

Project Manager (項目管理器插件)。簡單的項目管理器，可以在你的編輯器中快速切換項目。

Sort Lines (代碼行排序插件)。這個插件可以對選中的代碼行進行排序，也提供不區分大小寫、反向和唯一等排序功能。

(測試插件)。一個進階的連續測試執行器，可以對正在工作的檔案進行測試，它會在你的編輯器中創建透過測試或測試失敗的視覺反饋。

VS code 用戶代碼片段

找到選單 “檢視”，點擊“命令面板”， 或者按“command + shift + P”快速鍵開啟命令選項板。
搜尋“Preferences: Configure User Snippets”或者“首選項:配置用戶代碼片段”。

你可以選擇“現有的代碼片段檔案”或者“創建代碼片段檔案”，其中創建代碼片段檔案有兩個選項：“全局可用”和“當前項目目錄可用”。

以新建全局代碼段檔案爲例，單擊【新建全局代碼片段檔案…】。 創建-snippets後綴的檔案。我們可以看到一個大的對象{}，檢視註釋中示例，JavaScript代碼如下圖

其中，Print to console是代碼片段名稱；
scope字段表示作用域，在什麼語言下其作用；
prefix字段爲代碼片段前綴，定義如何從IntelliSense和選項卡完成中選擇此代碼段；
body即代碼片段的主體內容，其中每個字元串表示一行；
description字段爲代碼片段說明，會在IntelliSense候選欄中出現。未定義的情況下直接顯示對象名，上面列子中將會顯示Log output to console。

body 部分可以使用特殊語法結構，來控制遊標和要插入的文字，其支援的基本結構有Tabstops（製表符）。
用“Tabstops”可以讓編輯器的指針在“snippet”內跳轉。使用“1，2”等指定遊標位置。這些數字指定了遊標跳轉的順序，數字最大表示默認選中，按【tab】鍵，遊標移到下一個指定位置。
特別注意的是，“0”表示最終遊標位置。相同序號的“Tabstops”被連結在一起，將會同步更新，比如下列用於生成頭檔案封裝的“snippet”被替換到編輯器上時，遊標就將同時出現在所有“1”位置。
JavaScript 代碼：

body支援的基本結構有還有Placeholders（佔位符）。
“Placeholder”是帶有默認值的”Tabstops”，如 {1：foo}。“placeholder”文字將被插入“Tabstops”位置，並在跳轉時被全選，以方便修改。佔位符還可以嵌套，例如{1:another {2:placeholder}}。
比如，結構體的 snippet 主體可以這樣寫，JavaScript 代碼:

“Choice”是提供可選值的“Placeholder”。其語法爲一系列用逗號隔開，並最終被兩個豎線圈起來的枚舉值，比如 {1|one,two,three|} 。當遊標跳轉到該位置的時候，用戶將會被提供多個值（one或two或 three）以供選擇。