您是否知道全球 73% 的開發人員依賴同一個程式碼編輯器?
是的,2023 年 Stack Overflow 開發者調查結果已經出爐,Visual Studio Code 再次成為迄今為止最常用的開發環境。
「Visual Studio Code 仍然是所有開發人員的首選 IDE,與專業開發人員相比,學習編碼的人越來越多地使用它」 - Stack Overflow Developer Survey 2023
我們都知道為什麼:太棒了。
但我們是否充分挖掘了它的潛力?在本文中,我們將展示一些引人注目的 VS Code 功能,這些功能可透過本機原始碼控制、動畫打字和快速行刪除等來提高工作效率。讓我們開始使用它們來比以往更快地實現我們的編碼目標。
時間軸視圖為我們提供了內建的原始碼控制。
我們中的許多人都知道 Git 和其他原始碼控制工具有多有用,它們可以幫助我們輕鬆追蹤檔案變更並在需要時恢復到先前的狀態。
VS Code 中的時間軸視圖提供與文件相關的重要事件的自動更新時間軸,例如 Git 提交、文件保存和測試執行。此功能可確保您無需離開編輯器即可始終追蹤程式碼的歷史記錄。
VS Code 最強大的功能之一是整合終端。您可以直接在編輯器中執行命令、腳本甚至完整的開發伺服器。這樣就無需在編輯器和單獨的終端應用程式之間切換,從而簡化了您的工作流程。
要開啟終端,您可以使用快捷方式:
Ctrl + `
VS Code 擴展市場提供了大量可以顯著提高您的工作效率的工具。從 linter 和格式化程式到主題和語言支持,幾乎所有內容都有擴展。
一些必備的擴展包括:
更適合程式碼格式化
用於 JavaScript linting 的ESLint
Live Server用於快速開發伺服器
GitLens用於增強 Git 功能
VS Code 支援多根工作區,讓您在單一視窗中同時處理多個專案。如果您正在從事相關專案或微服務,這尤其有用。
若要將資料夾新增至您的工作區,請前往:
File > Add Folder to Workspace...
IntelliSense 是一款功能強大的程式碼補全工具,它提供基於變數類型、函數定義和導入模組的智慧補全。此功能可以減少打字量並防止錯誤,從而大大加快編碼速度。
Emmet 是一種速記語法,可協助您快速編寫 HTML 和 CSS。例如,輸入 div.container>ul>li*5 並按 Tab 鍵將擴充為:
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
這在編寫重複結構時可以節省大量時間。
命令面板提供對 VS Code 中許多功能和命令的快速存取。您可以透過以下方式開啟它:
Ctrl + Shift + P
從這裡,您可以搜尋並執行命令,使其成為提高生產力的強大工具。
程式碼片段是預先定義的模板,可以更輕鬆地輸入重複的程式碼模式。您可以建立自訂片段或使用預製片段。例如,輸入 for 並按 Tab 可以擴展為 for 循環結構,從而避免每次都輸入它。
括號對著色可幫助您追蹤程式碼中匹配的括號。這對於具有複雜嵌套結構的語言特別有用。您可以透過安裝「Bracket Pair Colorizer」擴充功能來啟用此功能。
VS Code 內建了多種程式語言的偵錯支援。您可以直接在編輯器中設定斷點、檢查變數並單步執行程式碼。這使得查找和修復錯誤變得更快、更直觀。
要開始除錯,您可以使用快捷方式:
F5
Visual Studio Code 包含許多可以提高工作效率並提高編碼效率的功能。透過充分利用這些工具,您可以簡化工作流程、減少上下文切換,並更專注於編寫出色的程式碼。無論您是經驗豐富的開發人員還是新手,這些提示和技巧都可以幫助您充分利用 VS Code。因此,深入研究、探索這些功能,並提升您的程式設計體驗!
這就是今天的全部內容。
另外,分享您最喜歡的網頁開發資源來幫助這裡的初學者!
探索我的YouTube頻道!如果你覺得有用的話。
請給我的GitHub專案一顆星 ⭐️
感謝24547! 🤗
原文出處:https://dev.to/safdarali/10-essential-vs-code-tips-tricks-for-greater-productivity-1cao