阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!

您是否知道全球 73% 的開發人員依賴同一個程式碼編輯器?

是的,2023 年 Stack Overflow 開發者調查結果已經出爐,Visual Studio Code 再次成為迄今為止最常用的開發環境。

“Visual Studio Code 仍然是所有開發人員的首選 IDE,與專業開發人員相比,學習編碼的人越來越多地使用它”

「Visual Studio Code 仍然是所有開發人員的首選 IDE,與專業開發人員相比,學習編碼的人越來越多地使用它」 - Stack Overflow Developer Survey 2023

我們都知道為什麼:太棒了。

但我們是否充分挖掘了它的潛力?在本文中,我們將展示一些引人注目的 VS Code 功能,這些功能可透過本機原始碼控制、動畫打字和快速行刪除等來提高工作效率。讓我們開始使用它們來比以往更快地實現我們的編碼目標。

  1. 時間軸視圖:本機原始碼控制

時間軸視圖為我們提供了內建的原始碼控制。

我們中的許多人都知道 Git 和其他原始碼控制工具有多有用,它們可以幫助我們輕鬆追蹤檔案變更並在需要時恢復到先前的狀態。

VS Code 中的時間軸視圖提供與文件相關的重要事件的自動更新時間軸,例如 Git 提交、文件保存和測試執行。此功能可確保您無需離開編輯器即可始終追蹤程式碼的歷史記錄。

  1. 綜合終端

VS Code 最強大的功能之一是整合終端。您可以直接在編輯器中執行命令、腳本甚至完整的開發伺服器。這樣就無需在編輯器和單獨的終端應用程式之間切換,從而簡化了您的工作流程。

要開啟終端,您可以使用快捷方式:

Ctrl + `
  1. 擴展市場

VS Code 擴展市場提供了大量可以顯著提高您的工作效率的工具。從 linter 和格式化程式到主題和語言支持,幾乎所有內容都有擴展。

一些必備的擴展包括:

  • 更適合程式碼格式化

  • 用於 JavaScript linting 的ESLint

  • Live Server用於快速開發伺服器

  • GitLens用於增強 Git 功能

  1. 多根工作區

VS Code 支援多根工作區,讓您在單一視窗中同時處理多個專案。如果您正在從事相關專案或微服務,這尤其有用。

若要將資料夾新增至您的工作區,請前往:

File > Add Folder to Workspace...
  1. 智慧感知

IntelliSense 是一款功能強大的程式碼補全工具,它提供基於變數類型、函數定義和導入模組的智慧補全。此功能可以減少打字量並防止錯誤,從而大大加快編碼速度。

  1. Emmet 縮寫

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>

這在編寫重複結構時可以節省大量時間。

  1. 命令面板

命令面板提供對 VS Code 中許多功能和命令的快速存取。您可以透過以下方式開啟它:

Ctrl + Shift + P

從這裡,您可以搜尋並執行命令,使其成為提高生產力的強大工具。

  1. 片段

程式碼片段是預先定義的模板,可以更輕鬆地輸入重複的程式碼模式。您可以建立自訂片段或使用預製片段。例如,輸入 for 並按 Tab 可以擴展為 for 循環結構,從而避免每次都輸入它。

  1. 括號對著色

括號對著色可幫助您追蹤程式碼中匹配的括號。這對於具有複雜嵌套結構的語言特別有用。您可以透過安裝「Bracket Pair Colorizer」擴充功能來啟用此功能。

10、除錯

VS Code 內建了多種程式語言的偵錯支援。您可以直接在編輯器中設定斷點、檢查變數並單步執行程式碼。這使得查找和修復錯誤變得更快、更直觀。

要開始除錯,您可以使用快捷方式:

F5

結論

Visual Studio Code 包含許多可以提高工作效率並提高編碼效率的功能。透過充分利用這些工具,您可以簡化工作流程、減少上下文切換,並更專注於編寫出色的程式碼。無論您是經驗豐富的開發人員還是新手,這些提示和技巧都可以幫助您充分利用 VS Code。因此,深入研究、探索這些功能,並提升您的程式設計體驗!

這就是今天的全部內容。

另外,分享您最喜歡的網頁開發資源來幫助這裡的初學者!

與我聯絡:@ LinkedIn並查看我的作品集

探索我的YouTube頻道!如果你覺得有用的話。

請給我的GitHub專案一顆星 ⭐️

感謝24547! 🤗


原文出處:https://dev.to/safdarali/10-essential-vs-code-tips-tricks-for-greater-productivity-1cao


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!