95%的開發(fā)者都在浪費(fèi)VS Code的潛力。

VS Code有許多隱藏的寶藏功能,可以提升您的生產(chǎn)力和使用體驗(yàn) — 但大多數(shù)人并沒有使用它們。

使用這11個(gè)實(shí)用技巧來逐步增強(qiáng)VS Code的功能,讓您編碼更快:包括強(qiáng)大的擴(kuò)展、鮮為人知的快捷鍵、美觀的字體和配色方案等等。

1.首先從基礎(chǔ)開始

從基本功能入手。

學(xué)習(xí)重要的鍵盤快捷鍵一旦掌握這些快捷鍵,你的編碼速度將大大提高。

用Shift + 左/右箭頭來左右選擇代碼。

用Ctrl + C復(fù)制整行,無需選中。

用Alt + 上/下箭頭上下移動(dòng)行。

• 用Ctrl + K刪除行
• 用Ctrl + W關(guān)閉文件
• 用Ctrl + K, W關(guān)閉所有文件

啟用自動(dòng)保存

自動(dòng)保存你的文件。

我之前說過為什么不喜歡自動(dòng)保存,但它確實(shí)是一個(gè)很好的功能,可以停止不斷按 Ctrl + S。

設(shè)置大綱視圖

大綱視圖可以在文件資源管理器窗格中快速概覽你活動(dòng)文件中的所有符號(hào):

建議將其移到單獨(dú)的窗格以獲得更多空間:

2.設(shè)置源代碼控制

需要設(shè)置Git集成以輕松跟蹤你的更改。

用VS Code初始化倉(cāng)庫

使用源代碼控制窗格初始化新的本地倉(cāng)庫。

提交更改

可以快速暫存文件,并在需要提交時(shí)隨時(shí)按Ctrl + Enter:

安裝這個(gè)擴(kuò)展

現(xiàn)在安裝GitLens擴(kuò)展以獲得更好的集成:

GitLens將顯示重要的倉(cāng)庫數(shù)據(jù)和當(dāng)前文件信息 — 文件歷史、提交、分支等。

將光標(biāo)放在編輯器中的任何行上,GitLens將顯示該行最后一次更改的提交信息:

3.使用AI加速編碼

生成式AI最近蓬勃發(fā)展,現(xiàn)在我們有了擴(kuò)展,可以在您輸入時(shí)提供智能AI代碼補(bǔ)全。

還有IDE集成聊天機(jī)器人,其中一些使用您代碼庫的上下文。

可以嘗試這些不錯(cuò)的選擇:

GitHub Copilot: 付費(fèi),12/月

4.學(xué)習(xí)代碼片段加快編碼

Emmet

有了這個(gè),我在使用JSX、CSS、HTML等時(shí)輸入速度更快。

會(huì)注意到縮寫與CSS選擇器非常相似。

這是有意為之的:Emmet語法受CSS選擇器啟發(fā)。

安裝這個(gè)擴(kuò)展

JavaScript (ES6) code snippets: 完全加載了大量節(jié)省時(shí)間的JavaScript代碼片段。

看看imp和imd片段如何快速導(dǎo)入ES6語法的模塊:

5.安裝鍵映射,讓你感覺賓至如歸

如果你習(xí)慣于其他代碼編輯器,這非常寶貴。

所以如果您來自:

• Vim: 安裝這個(gè)擴(kuò)展
• Atom: 安裝這個(gè)擴(kuò)展
• Visual Studio: 安裝這個(gè)擴(kuò)展

例如在Atom中,您可以輕松按A和Shift + A來創(chuàng)建新文件或新文件夾。

安裝Atom鍵映射立即將這個(gè)快捷鍵帶到VS Code — 無需手動(dòng)編輯熱鍵:

6.開始自動(dòng)代碼檢查

應(yīng)該安裝一個(gè)代碼檢查器來避免錯(cuò)誤并強(qiáng)制執(zhí)行代碼風(fēng)格。

使用ESLint快速找到并修復(fù)JavaScript代碼中的問題,輕松避免糟糕的編碼實(shí)踐 — 比如未使用的變量:

7.啟用自動(dòng)格式化

安裝Prettier以自動(dòng)格式化您的代碼,保持一致的格式。

通過"保存時(shí)格式化"選項(xiàng),Prettier會(huì)在按 Ctrl + S 時(shí)立即格式化你的代碼。

可以在設(shè)置中啟用它:

8.設(shè)置調(diào)試和測(cè)試

VS Code已經(jīng)為我們提供了出色的調(diào)試功能。

設(shè)置斷點(diǎn)、檢查調(diào)用堆棧、監(jiān)視變量等等。

9.測(cè)試

這些擴(kuò)展將使測(cè)試變得更容易:

• Jest Runner用于Jest測(cè)試
• Mocha sidebar用于Mocha測(cè)試

點(diǎn)擊運(yùn)行即可運(yùn)行特定的測(cè)試用例,無需使用終端。

10.使用更適合代碼的字體

如果仔細(xì)看,會(huì)發(fā)現(xiàn)我沒有使用默認(rèn)的Consolas字體。

我使用的是Cascadia Code — 微軟出品的一種美觀字體,帶有美觀的代碼連字。

連字:

Fira Code是另一個(gè)我用過的很棒的字體:

可以在設(shè)置中輕松更改字體:

11.用豐富多彩的主題美化您的編輯器

顏色主題

設(shè)置一個(gè)漂亮的主題,輕松修改UI所有方面的顏色。

包括您代碼的高亮顯示:

我用過的一些很棒的主題:

• Atom One Light & Atom One Dark — 我主要在這兩個(gè)之間切換。
• One Dark Pro
• Night Owl

可以使用設(shè)置圖標(biāo)更改主題:

圖標(biāo)主題

VS Code在文件資源管理器窗格中顯示圖標(biāo)的方式相當(dāng)平淡無奇:

這就是為什么應(yīng)該安裝VS Code Icons來增添趣味:

不同的圖標(biāo)使理解每個(gè)文件及其在代碼庫中的作用變得更加容易。

最后的想法

有了所有這些新設(shè)置和擴(kuò)展,您就可以快速構(gòu)建并更快地實(shí)現(xiàn)您的開發(fā)目標(biāo)了。