visual studio code教程:基礎(chǔ)使用和自定義設(shè)置
水云君
visual studio code是一款輕量編輯器,采取了和VS相同的UI界面,搭配合適的插件可以優(yōu)化前端開(kāi)發(fā)的體驗(yàn),今天為大家介紹一下visual studio code的使用技巧,大家可以學(xué)習(xí)下。
工具/材料
visual studio code
Windows系統(tǒng)
基礎(chǔ)教程
因?yàn)檐浖螺d安裝之后,是英文版,可以先將其漢化,變成中文版,更方便開(kāi)發(fā)。點(diǎn)擊插件按鈕搜索 “Chinese”, 在彈出的選項(xiàng)中選擇第一個(gè)“中文簡(jiǎn)體”。
右邊會(huì)彈出如下圖安裝界面,接著點(diǎn)擊【 Install 】安裝。安裝完畢后會(huì)有如下提示(主要提醒你安裝完中文簡(jiǎn)體漢化包后一定要重啟方可生效)。
Vscode界面介紹:主要分為5個(gè)區(qū)域,依次是活動(dòng)欄、側(cè)邊欄、編輯欄、面板欄、狀態(tài)欄。
1.活動(dòng)欄從上到下依次為,打開(kāi)側(cè)邊欄、搜索、使用git、debug、使用插件;
2.側(cè)邊欄,新建項(xiàng)目文件和文件夾;
3.編輯欄,編寫(xiě)代碼的區(qū)域;
4.面板欄,從左到右依次為:?jiǎn)栴}、輸出、調(diào)試欄、終端(terminal)、最重要的是terminal,下圖一所示,用來(lái)輸入相關(guān)命令;
5.狀態(tài)欄,點(diǎn)擊可以調(diào)出面板欄;
6.需要注意的為下圖二紅框所示,分別表示鼠標(biāo)光標(biāo)所在位置和tab縮進(jìn)字符,這里為縮進(jìn)4個(gè)字符。
新建文件和文件夾
新建文件:Ctrl+N新建文件并修改后綴即可(后綴根據(jù)所需文件來(lái),比如.html,.css,.js等);
新建文件夾
1.首先根據(jù)需要指定一個(gè)路徑(這里路徑以桌面為例),然后新建一個(gè)文件夾(這里新建的文件夾為demo1);
2.鼠標(biāo)點(diǎn)擊側(cè)邊欄第二個(gè)選項(xiàng),如下圖一;
3.此時(shí)會(huì)提示你沒(méi)有可以打開(kāi)的文件夾,點(diǎn)擊【Open Folder】按鈕導(dǎo)入桌面新建的文件夾demo1,如下圖二;
4.把文件夾導(dǎo)入后發(fā)現(xiàn)剛剛新建文件夾名字是小寫(xiě)的,現(xiàn)在變大寫(xiě)了,如下圖三,這個(gè)不影響(右邊圖標(biāo)從左到右為,新建文件 / 新建文件夾 / 刷新 / 折疊文件)。
注:新建文件一定要修改后綴,否則默認(rèn)都是text文本文件
自動(dòng)保存設(shè)置。選擇File(文件)、Preferences(首選項(xiàng))、 Setting (設(shè)置)然后彈出下面界面,選擇“User”(一般會(huì)默認(rèn)選中該選項(xiàng)),接著如下圖選擇“afterdelay”選項(xiàng)即可,下面有個(gè)數(shù)字1000表示1秒,這個(gè)可自行設(shè)置,表示多少秒以后自動(dòng)保存。
自動(dòng)格式化代碼。選擇File(文件)、 Preferences(首選項(xiàng))、 Setting (設(shè)置)。User(用戶)、Text-Editor(文本編輯)、 Formatng(格式化),然后勾選下圖紅色框中的選項(xiàng)后,重啟Vscode即可。
Vscode更換主題。選擇File(文件)、 Preferences(首選項(xiàng))、Color-Theme (顏色主題),如下圖一所示。然后會(huì)出現(xiàn)下圖二紅色框的界面,此時(shí)按鍵盤(pán)上的上下鍵即可實(shí)時(shí)查看主題顏色,直接回車可選中對(duì)應(yīng)主題。
VS code用戶設(shè)置
選擇“文件”菜單內(nèi)的“首選項(xiàng)”里面的“用戶代碼片段”。
選擇代碼片段文件“html.json”。
輸入要自定義的快捷鍵和模板代碼段。
進(jìn)入 .html 后綴的文件中按快捷鍵【vh】后按【tab】鍵即可實(shí)現(xiàn)快速輸入代碼段,自定義設(shè)置完成。
實(shí)用插件推薦
AutoFileName (文件路徑自動(dòng)補(bǔ)全插件)。
ESLint插件。安裝此插件,可使VS Code安裝和重啟后自動(dòng)開(kāi)始工作。
avaScript (ES6) Code Snippets (代碼片段插件)
用代碼片段加快ES開(kāi)發(fā)速度,例如輸入imd可以自動(dòng)生成如下代碼。
Project Manager (項(xiàng)目管理器插件)。簡(jiǎn)單的項(xiàng)目管理器,可以在你的編輯器中快速切換項(xiàng)目。
Sort Lines (代碼行排序插件)。這個(gè)插件可以對(duì)選中的代碼行進(jìn)行排序,也提供不區(qū)分大小寫(xiě)、反向和唯一等排序功能。
Wallaby.js (測(cè)試插件)。一個(gè)高級(jí)的連續(xù)測(cè)試運(yùn)行器,可以對(duì)正在工作的文件進(jìn)行測(cè)試,它會(huì)在你的編輯器中創(chuàng)建通過(guò)測(cè)試或測(cè)試失敗的視覺(jué)反饋。
VS code 用戶代碼片段
找到菜單 “查看”,點(diǎn)擊“命令面板”, 或者按“command + shift + P”快捷鍵打開(kāi)命令選項(xiàng)板。
搜索“Preferences: Configure User Snippets”或者“首選項(xiàng):配置用戶代碼片段”。
你可以選擇“現(xiàn)有的代碼片段文件”或者“創(chuàng)建代碼片段文件”,其中創(chuàng)建代碼片段文件有兩個(gè)選項(xiàng):“全局可用”和“當(dāng)前項(xiàng)目目錄可用”。
以新建全局代碼段文件為例,單擊【新建全局代碼片段文件…】。 創(chuàng)建.code-snippets后綴的文件。我們可以看到一個(gè)大的對(duì)象{},查看注釋中示例,JavaScript代碼如下圖
其中,Print to console是代碼片段名稱;
scope字段表示作用域,在什么語(yǔ)言下其作用;
prefix字段為代碼片段前綴,定義如何從IntelliSense和選項(xiàng)卡完成中選擇此代碼段;
body即代碼片段的主體內(nèi)容,其中每個(gè)字符串表示一行;
description字段為代碼片段說(shuō)明,會(huì)在IntelliSense候選欄中出現(xiàn)。未定義的情況下直接顯示對(duì)象名,上面列子中將會(huì)顯示Log output to console。
body 部分可以使用特殊語(yǔ)法結(jié)構(gòu),來(lái)控制光標(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)移到下一個(gè)指定位置。
特別注意的是,“0”表示最終光標(biāo)位置。相同序號(hào)的“Tabstops”被鏈接在一起,將會(huì)同步更新,比如下列用于生成頭文件封裝的“snippet”被替換到編輯器上時(shí),光標(biāo)就將同時(shí)出現(xiàn)在所有“1”位置。
JavaScript 代碼:
body支持的基本結(jié)構(gòu)有還有Placeholders(占位符)。
“Placeholder”是帶有默認(rèn)值的”Tabstops”,如 {1:foo}。“placeholder”文本將被插入“Tabstops”位置,并在跳轉(zhuǎn)時(shí)被全選,以方便修改。占位符還可以嵌套,例如{1:another {2:placeholder}}。
比如,結(jié)構(gòu)體的 snippet 主體可以這樣寫(xiě),JavaScript 代碼:
“Choice”是提供可選值的“Placeholder”。其語(yǔ)法為一系列用逗號(hào)隔開(kāi),并最終被兩個(gè)豎線圈起來(lái)的枚舉值,比如 {1|one,two,three|} 。當(dāng)光標(biāo)跳轉(zhuǎn)到該位置的時(shí)候,用戶將會(huì)被提供多個(gè)值(one或two或 three)以供選擇。