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

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

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

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

從基本功能入手。

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

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

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

用Alt + 上/下箭頭上下移動行。

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

啟用自動保存

自動保存你的文件。

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

設(shè)置大綱視圖

大綱視圖可以在文件資源管理器窗格中快速概覽你活動文件中的所有符號:

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

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

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

用VS Code初始化倉庫

使用源代碼控制窗格初始化新的本地倉庫。

提交更改

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

安裝這個擴(kuò)展

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

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

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

3.使用AI加速編碼

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

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

可以嘗試這些不錯的選擇:

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

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

Emmet

有了這個,我在使用JSX、CSS、HTML等時輸入速度更快。

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

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

安裝這個擴(kuò)展

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

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

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

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

所以如果您來自:

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

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

安裝Atom鍵映射立即將這個快捷鍵帶到VS Code — 無需手動編輯熱鍵:

6.開始自動代碼檢查

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

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

7.啟用自動格式化

安裝Prettier以自動格式化您的代碼,保持一致的格式。

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

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

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

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

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

9.測試

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

• Jest Runner用于Jest測試
• Mocha sidebar用于Mocha測試

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

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

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

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

連字:

Fira Code是另一個我用過的很棒的字體:

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

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

顏色主題

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

包括您代碼的高亮顯示:

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

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

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

圖標(biāo)主題

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

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

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

最后的想法

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