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

來源：酷知科普網 2.93W

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）以供選擇。