95%的開發者都在浪費VS Code的潛力。

VS Code有許多隱藏的寶藏功能,可以提升您的生產力和使用體驗 — 但大多數人并沒有使用它們。

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

1.首先從基礎開始

從基本功能入手。

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

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

用Ctrl + C復制整行,無需選中。

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

• 用Ctrl + K刪除行
• 用Ctrl + W關閉文件
• 用Ctrl + K, W關閉所有文件

啟用自動保存

自動保存你的文件。

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

設置大綱視圖

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

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

2.設置源代碼控制

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

用VS Code初始化倉庫

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

提交更改

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

安裝這個擴展

現在安裝GitLens擴展以獲得更好的集成:

GitLens將顯示重要的倉庫數據和當前文件信息 — 文件歷史、提交、分支等。

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

3.使用AI加速編碼

生成式AI最近蓬勃發展,現在我們有了擴展,可以在您輸入時提供智能AI代碼補全。

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

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

GitHub Copilot: 付費,12/月

4.學習代碼片段加快編碼

Emmet

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

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

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

安裝這個擴展

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

看看imp和imd片段如何快速導入ES6語法的模塊:

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

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

所以如果您來自:

• Vim: 安裝這個擴展
• Atom: 安裝這個擴展
• Visual Studio: 安裝這個擴展

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

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

6.開始自動代碼檢查

應該安裝一個代碼檢查器來避免錯誤并強制執行代碼風格。

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

7.啟用自動格式化

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

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

可以在設置中啟用它:

8.設置調試和測試

VS Code已經為我們提供了出色的調試功能。

設置斷點、檢查調用堆棧、監視變量等等。

9.測試

這些擴展將使測試變得更容易:

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

點擊運行即可運行特定的測試用例,無需使用終端。

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

如果仔細看,會發現我沒有使用默認的Consolas字體。

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

連字:

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

可以在設置中輕松更改字體:

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

顏色主題

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

包括您代碼的高亮顯示:

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

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

可以使用設置圖標更改主題:

圖標主題

VS Code在文件資源管理器窗格中顯示圖標的方式相當平淡無奇:

這就是為什么應該安裝VS Code Icons來增添趣味:

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

最后的想法

有了所有這些新設置和擴展,您就可以快速構建并更快地實現您的開發目標了。