Contents

Visual Studio Code 的 10 個基本生產力技巧

Visual Studio Code 無疑是最好的編程文本編輯器。對於許多人來說,它取代了 Sublime Text 成為他們選擇的編輯器。它是一個基於 Electron 的 JavaScript 應用程序,但速度快如閃電,並且不會像許多 JavaScript 應用程序那樣遇到性能問題。

事實上,對於那些可能好奇的人來說,值得注意的是 Visual Studio Code 是一個開源軟件,可以通過其在 GitHub 上的存儲庫進行訪問。為了提高工作效率並簡化工作流程,熟悉這個強大的代碼編輯器的幾個關鍵功能將是有益的。

掌握 VS Code 中的命令面板

/bc/images/vscode-command-palette.jpg

Sublime Text 及其前身 TextMate 都擁有一個有趣的實用程序,稱為“命令調色板”。這一創新工具使用戶能夠通過手動輸入快速執行多個命令,從而無需通過光標或鼠標進行繁瑣的導航。

在編程環境中瀏覽各種任務時,使用命令選項板可以實現更高效的工作流程。通過使用 Control + Shift + P 或 Command + Shift + P 鍵盤快捷鍵,人們可以訪問廣泛的可用操作列表,這些操作被分類在“文件”、“Git”、“終端”等標題下。該調色板的功能使用戶只需鍵入即可輸入所需的操作,同時實時更新顯示的選項。這簡化了查找和執行特定功能的過程,從而提高了整體生產力。

設置工作項目文件夾

/bc/images/project-directory-set-vs-code.jpg

單擊導航側欄中的“資源管理器”後,將出現一個新面板。該面板由兩個不同的部分組成,可以通過單擊省略號菜單並選擇“打開編輯器”或將其作為選項呈現來訪問。這些部分分別是“打開編輯器”(表示當前打開的文件和文檔的列表)和“未打開文件夾”。我們感興趣的是後者。

單擊菜單欄中的“打開文件夾”選項或通過“文件”菜單導航到該選項後,可以選擇在 Visual Studio Code 中選擇系統上存在的任何目錄。然後,所選目錄將被指定為當前工作項目,從而可以無縫訪問其所有組成文件和子目錄,而無需在文件資源管理器之間頻繁切換。

一次查看多個文件

/bc/images/viewing-files-side-by-side-vs-code.jpg

大多數現代文本編輯器都能夠同時處理多個文檔,從而通過選項卡式用戶界面在它們之間輕鬆導航。一些高度發達的文本編輯器還提供了進行並行文本編輯的選項,這是 Visual Studio Code 中也提供的便利功能(儘管它僅垂直運行)。

VS Code 擅長提供無縫協作體驗,即使在使用較小的屏幕尺寸(例如筆記本電腦或舊顯示器上的屏幕)時也是如此。此功能對於在有限的顯示空間中需要高效實時協作的用戶特別有用。

該應用程序結合了一種稱為“動態面板”的新穎功能,如果打開的文檔面板的尺寸不足以舒適地觀看,同時積極關注所述文檔,則該應用程序會智能地調整打開的文檔面板的寬度。這種直觀的增強可能對保持屏幕分辨率接近 720p 的用戶特別有吸引力。

一次編輯多行

/bc/images/multiple-cursors-vs-code.jpg

為了有效地操作文檔中出現的大量內容,一種方法是通過同時按下“Alt”鍵(對於 Mac 用戶來說是等效的“Option”鍵)的鍵盤快捷鍵來創建多個指針。通過單擊文本中的各個位置,每次點擊都會生成這些附加指針,從而在操作大量段落時可以更方便地進行編輯。

在處理涉及重複應用相同分類的情況時,例如在必須分配特定類的多個實例的 HTML 元素中,或者在修改多個超鏈接以符合特定結構時,該技術被證明是非常有利的。精通這種方法並接受它的好處是至關重要的。

轉到定義

/bc/images/go-to-definition-vs-code.jpg

當在編程或腳本編寫過程中遇到不熟悉的變量或方法時,可以使用兩個方便的選項之一。首先,通過將光標放在所述元素上並按 F12,用戶會立即定向到其相應的定義。其次,通過鍵盤快捷鍵選擇所需的實體,例如在單擊時按住 Control (Windows) 或 Command (Mac) 鍵,會將用戶轉移到相關定義。

或者,可以使用方便的鍵盤快捷鍵,即按“Alt”鍵加“F12”按鈕或在 Mac 計算機上按“Cmd”鍵和“F12”鍵來訪問定義,而無需在窗口中打開它。原始文件。此功能將定義直接顯示在光標位置下方,以提高易用性和效率。

要對選定的變量或方法執行反向搜索,可以使用按“Shift + F12”的鍵盤快捷鍵。此操作將顯示代碼庫中所選實體的所有實例,包括出現在當前光標位置的實例。

為了有效地利用這些功能,有必要將相關目錄建立為當前活動項目(請參閱提示#2以獲取進一步指導)。

重命名所有出現的情況

/bc/images/rename-symbol-vs-code.jpg

重構是構建和維護組織良好的代碼庫的關鍵組成部分。然而,這可能被證明是一項具有挑戰性的任務,特別是在處理大量模塊或代碼的擴展部分時。為了減輕這種負擔,Visual Studio Code 提供了自動化功能,可以簡化甚至很小的更改,例如跨多個文件重新分配標籤或更新函數名稱。

在選擇變量或方法並執行功能鍵組合 F2 後,可以修改標識符,這將隨後在當前活動工作空間項目內的所有實例中更新對所述實體的引用。

為了僅修改當前文檔中的文本,請使用由 Ctrl/Cmd + F2 組成的鍵盤組合。執行此操作後,Visual Studio Code 將在整個文件中的每個實例旁邊放置一個光標。

搜索多個文件

/bc/images/searching-across-working-directory-vscode.jpg

當處理非源代碼文件並且需要識別句子或單詞而不知道它們在項目中的具體位置時,必須恢復到基本的“查找”功能,作為前面在提示中討論的不可用的面向符號的功能的替代方案#5。

按住“Ctrl”或“Command”鍵並按“F”可以在當前文檔中搜索特定術語,而同時按“Shift”和“Cmd”或“Control”鍵後跟字母“ F”允許對當前工作項目中包含的完整工作主體進行廣泛搜索,包括所有嵌套子目錄。

在 VS Code 中使用命令行

/bc/images/integrated-terminal-vscode.jpg

VS Code 提供了一個集成的終端界面,允許用戶訪問命令行工具並在其項目中執行命令。終端的外觀取決於用戶的操作系統;在 Windows 上,它顯示為命令提示符,而在 macOS 和 Linux 上,它顯示為 Bash 提示符。無論操作系統如何,終端都會在當前工作項目的目錄中啟動(前提是該目錄存在),否則默認為用戶的主文件夾。

事實上,終端的設計考慮到了多功能性和易用性,用戶可以通過單擊應用程序窗口右上角的“+”圖標來創建其他虛擬終端窗口。或者,可以通過選擇所需終端窗口旁邊的垃圾桶圖標來刪除現有的終端實例。此外,所提供的下拉菜單有利於不同終端會話之間的無縫導航,而不會消耗過多的顯示區域,這與可能消耗大量屏幕空間的選項卡式界面不同。

在 VS Code 中安裝新主題

/bc/images/changing-themes-vs-code.jpg

事實上,Visual Studio Code 為用戶提供了通過各種主題自定義文本和源代碼的語法突出顯示的能力。但是,此功能不會擴展到更改用戶界面本身的外觀。儘管如此,擁有一個精心設計的語法突出顯示主題可以顯著提高編碼任務的效率。

您可以在 VS Code Marketplace 上找到新主題(它們是免費的),也可以直接在 VS Code 中搜索它們。如果您需要建議,請查看我們的最佳 VS Code 主題列表。

在 VS Code 中安裝第三方擴展

/bc/images/vscode-extensions-marketplace.jpg

最後一個要強調的基本功能是 VS Code 通過第三方擴展的可擴展性。與主題一樣,您可以在 VS Code Marketplace 上找到它們(是的,這些也是免費的),或者您可以在 VS Code 中搜索它們。使用 Ctrl \+ Shift \+ X (或 Shift \+ Cmd \+ X )鍵盤快捷鍵訪問“擴展”面板。

擴展是提高 Visual Studio Code 效率的重要手段。該存儲庫包含一系列工具,例如代碼檢查器、調試器、代碼片段管理器、集成開發環境(IDE) 的性能優化、構建工具,甚至某些利用ChatGPT 來簡化VS Code 中的編程流程的附加組件。

Visual Studio Code 是最好的文本編輯器

雖然 VS Code 擁有大量粉絲,但它對每個人的適用性仍然是主觀的,不完美的解決方案是不可避免的。還應該注意的是,VS Code 主要用作文本編輯器,而不是集成開發環境 (IDE)。

雖然我們不能保證您滿意,但我們鼓勵您以公正的角度測試我們的產品。我們的創新功能可能會以積極的方式超越您的期望。