visual studio code是一款輕量編輯器，采取了和VS相同的UI界面，搭配合適的插件可以優(yōu)化前端開發(fā)的體驗，今天為大家介紹一下visual studio code的使用技巧，大家可以學(xué)習(xí)下。

工具/材料

visual studio code

Windows系統(tǒng)

基礎(chǔ)教程

因為軟件下載安裝之后，是英文版，可以先將其漢化，變成中文版，更方便開發(fā)。點(diǎn)擊插件按鈕搜索 “Chinese”, 在彈出的選項中選擇第一個“中文簡體”。

右邊會彈出如下圖安裝界面，接著點(diǎn)擊【 Install 】安裝。安裝完畢后會有如下提示（主要提醒你安裝完中文簡體漢化包后一定要重啟方可生效）。

Vscode界面介紹：主要分為5個區(qū)域，依次是活動欄、側(cè)邊欄、編輯欄、面板欄、狀態(tài)欄。

1.活動欄從上到下依次為，打開側(cè)邊欄、搜索、使用git、debug、使用插件；

2.側(cè)邊欄，新建項目文件和文件夾；
3.編輯欄，編寫代碼的區(qū)域；
4.面板欄，從左到右依次為：問題、輸出、調(diào)試欄、終端（terminal）、最重要的是terminal，下圖一所示，用來輸入相關(guān)命令；
5.狀態(tài)欄，點(diǎn)擊可以調(diào)出面板欄；
6.需要注意的為下圖二紅框所示，分別表示鼠標(biāo)光標(biāo)所在位置和tab縮進(jìn)字符，這里為縮進(jìn)4個字符。

新建文件和文件夾

新建文件：Ctrl+N新建文件并修改后綴即可（后綴根據(jù)所需文件來，比如.html，.css，.js等）；
新建文件夾
1.首先根據(jù)需要指定一個路徑（這里路徑以桌面為例），然后新建一個文件夾（這里新建的文件夾為demo1）；
2.鼠標(biāo)點(diǎn)擊側(cè)邊欄第二個選項，如下圖一；
3.此時會提示你沒有可以打開的文件夾，點(diǎn)擊【Open Folder】按鈕導(dǎo)入桌面新建的文件夾demo1，如下圖二；
4.把文件夾導(dǎo)入后發(fā)現(xiàn)剛剛新建文件夾名字是小寫的，現(xiàn)在變大寫了，如下圖三，這個不影響（右邊圖標(biāo)從左到右為，新建文件 / 新建文件夾 / 刷新 / 折疊文件）。
注：新建文件一定要修改后綴，否則默認(rèn)都是text文本文件

自動保存設(shè)置。選擇File（文件）、Preferences（首選項）、 Setting （設(shè)置）然后彈出下面界面，選擇“User”（一般會默認(rèn)選中該選項），接著如下圖選擇“afterdelay”選項即可，下面有個數(shù)字1000表示1秒，這個可自行設(shè)置，表示多少秒以后自動保存。

自動格式化代碼。選擇File（文件）、 Preferences（首選項）、 Setting （設(shè)置）。User（用戶）、Text-Editor（文本編輯）、 Formatng（格式化），然后勾選下圖紅色框中的選項后，重啟Vscode即可。

Vscode更換主題。選擇File（文件）、 Preferences（首選項）、Color-Theme （顏色主題），如下圖一所示。然后會出現(xiàn)下圖二紅色框的界面，此時按鍵盤上的上下鍵即可實(shí)時查看主題顏色，直接回車可選中對應(yīng)主題。

VS code用戶設(shè)置

選擇“文件”菜單內(nèi)的“首選項”里面的“用戶代碼片段”。

選擇代碼片段文件“html.json”。

輸入要自定義的快捷鍵和模板代碼段。

進(jìn)入 .html 后綴的文件中按快捷鍵【vh】后按【tab】鍵即可實(shí)現(xiàn)快速輸入代碼段，自定義設(shè)置完成。

實(shí)用插件推薦

AutoFileName (文件路徑自動補(bǔ)全插件)。

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

avaScript (ES6) Code Snippets (代碼片段插件)

用代碼片段加快ES開發(fā)速度，例如輸入imd可以自動生成如下代碼。

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

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

Wallaby.js (測試插件)。一個高級的連續(xù)測試運(yùn)行器，可以對正在工作的文件進(jìn)行測試，它會在你的編輯器中創(chuàng)建通過測試或測試失敗的視覺反饋。

VS code 用戶代碼片段

找到菜單 “查看”，點(diǎn)擊“命令面板”， 或者按“command + shift + P”快捷鍵打開命令選項板。

搜索“Preferences: Configure User Snippets”或者“首選項:配置用戶代碼片段”。

你可以選擇“現(xiàn)有的代碼片段文件”或者“創(chuàng)建代碼片段文件”，其中創(chuàng)建代碼片段文件有兩個選項：“全局可用”和“當(dāng)前項目目錄可用”。

以新建全局代碼段文件為例，單擊【新建全局代碼片段文件…】。 創(chuàng)建.code-snippets后綴的文件。我們可以看到一個大的對象{}，查看注釋中示例，JavaScript代碼如下圖

其中，Print to console是代碼片段名稱；

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

body 部分可以使用特殊語法結(jié)構(gòu)，來控制光標(biāo)和要插入的文本，其支持的基本結(jié)構(gòu)有Tabstops（制表符）。

用“Tabstops”可以讓編輯器的指針在“snippet”內(nèi)跳轉(zhuǎn)。使用“1，2”等指定光標(biāo)位置。這些數(shù)字指定了光標(biāo)跳轉(zhuǎn)的順序，數(shù)字最大表示默認(rèn)選中，按【tab】鍵，光標(biāo)移到下一個指定位置。
特別注意的是，“0”表示最終光標(biāo)位置。相同序號的“Tabstops”被鏈接在一起，將會同步更新，比如下列用于生成頭文件封裝的“snippet”被替換到編輯器上時，光標(biāo)就將同時出現(xiàn)在所有“1”位置。
JavaScript 代碼：

body支持的基本結(jié)構(gòu)有還有Placeholders（占位符）。

“Placeholder”是帶有默認(rèn)值的”Tabstops”，如 {1：foo}。“placeholder”文本將被插入“Tabstops”位置，并在跳轉(zhuǎn)時被全選，以方便修改。占位符還可以嵌套，例如{1:another {2:placeholder}}。
比如，結(jié)構(gòu)體的 snippet 主體可以這樣寫，JavaScript 代碼:

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