【51CTO.com快譯】由Microsoft開發并提供的Visual Studio Code(https://code.visualstudio.com/)，是一款用來編輯計算機程序源代碼的基本編程工具。它可以在Windows、Linux、以及Mac等操作系統被使用。作為一款免費且開源的應用，它既可以被個人所使用，也可以作為商業用途。

下面，我將向您介紹開發人員在使用Visual Studio Code過程中，值得掌握的十項開發技巧。

命令面板(Command Palette)

通過“命令面板”，您只需要鍵入某個關鍵字，而無需瀏覽具體菜單，即可訪問到各種可用的命令。

您可以使用Ctrl + Shift + P的組合鍵，來打開命令面板。接著，您可以鍵入各種相關的關鍵字，并在下拉窗口中查找對應的命令列表。

命令面板

Zen模式

Zen模式是一種無干擾式(distraction-free)的視圖。為了能夠讓您完全專注于代碼，它去掉了原有窗體中所有額外的工具箱、以及工具欄。

您可以通過選擇“視圖” > “外觀” > “Zen模式的切換”，來自由地進入和退出Zen模式。

另外，您也可以在Zen模式下將代碼設置為居中對齊，以展示出類似于文檔編輯器的效果。具體操作是：選擇“視圖” > “外觀” > “居中式布局的切換”。

Zen模式下的居中代碼

拆分視圖(Split View)

如果您擅長多任務處理的話，那么您可能需要同時處理同一項目的兩個不同文件，或者需要查找兩個文件之間的差異。此時，您最好采用拆分視圖的模式。

您可以根據自己的喜好，來自定義視圖的拆分。您既可以將兩個文件采用上下放置的方式，又可以左右平鋪兩個文件。

為了達到該效果，您可以選擇“視圖” > “編輯器布局” > “拆分”。

在拆分視圖中比較文件

標簽包裹(Tag wrapping)

Emmet(https://emmet.io/)可幫助您在減少手工鍵入的基礎上，生成更多的程序代碼。此類插件，不但能夠為開發人員節省重復輸入的時間，還能夠提高他們的工作效率。

由于Emmet允許您從鍵入的縮寫代碼中獲取相應的標簽，因此您可以從如下的Emmet屏幕截圖中，查看到所有預先支持的標簽包裹列表。

使用Emmet包裹標簽

Git集成

Visual Studio Code能夠與Git進行有效的集成。該集成能夠方便您將任何針對代碼的修改，及時地提交、拉出、以及推送到遠程的Git存儲庫中。

在Visual Studio Code中，您可以打開一個屬于Git存儲庫的文件。其對應的編輯器將顯示出既有的工作副本、與遠程存儲庫中當前文件之間的差異。不過，互聯網連接是保障用戶能夠持續對Git存儲庫進行直接操作的基本要求。

您可以通過查看清單：https://education.github.com/git-cheat-sheet-education.pdf，來了解所有與Git相關的命令。

工作副本和代碼庫之間的代碼差異

各種新的主題和插件

Visual Studio Code可以讓您根據自己的喜好，將不同的主題應用到編輯器中，進而高亮地顯示出文本的語法。您可以在Visual Studio Marketplace(https://marketplace.visualstudio.com/vscode/Themes)中找到各種完全免費的主題。

Visual Studio Code的主題列表

此外，Visual Studio Code也帶有豐富的插件API，用戶可以籍此創建屬于自己的插件。下面是兩種最為常見的插件：

• 設置同步 - Settings Sync(https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)：作為一種最為常見的設置插件，它允許您在不同設備上，以同步的方式安裝Visual Studio Code。
• Docker(https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)：在使用Docker進行開發時，您可能需要運行復雜的Docker命令，并對其進行持續監視。通過安裝此類Docker擴展，您可以獲得諸如：生成Docker文件、Docker文件感知(IntelliSense)、以及監視其服務等，較為實用的Docker工具。

Visual Studio Code中的命令行

Visual Studio Code自帶有集成的命令行終端。在Windows上，該終端以命令提示符的形式顯示;而在Mac和Linux上，它則顯示為Bash。無論是哪種方式，只要系統中已經加載了此類終端，您就可以直接在當前項目的工作目錄中啟動終端服務。而如果系統并未事先加載，則需要您從自己的主文件夾里啟動終端服務。

命令行界面可以讓您輕松地控制啟動編輯器的方式。通過其給定的選項，您可以打開各種文件，安裝各類擴展名，更改顯示語言、以及對于不同的輸出進行診斷。

另外，它還支持并提供多個單獨的終端服務。您只需單擊終端右上角的 + 號圖標，便能生成更多的終端實例。當然，您也可以通過單擊垃圾桶圖標，以關閉當前的終端窗口。

Visual Studio Code中的命令行

同時編輯多行

如果只能對代碼進行復制與粘貼，顯然已經有些過時了。在Visual Studio Code中，您可以通過將光標移動到不同的位置，以實現對多行代碼進行編輯。如果您想在不同的行中使用相同的代碼，您可以按住 Alt 鍵，然后單擊要鍵入或編輯代碼的不同位置，以添加多個游標。有了這些游標，您便可以一次性添加或編輯各種代碼，而不需要反復地在各處進行復制與粘貼代碼的操作。

同時編輯多行

排除文件夾(Exclude Folders)

您可以使用“排除文件夾”選項，以刪除node_modules之類不必要的模塊。當然，您也可以通過此類方法，關閉那些不想在Visual Studio Code中被打開的文件夾。

具體操作方法是：點擊“文件” > “首選項”，然后在搜索設置中搜索file.exclude。當然，您也可以在Visual Studio Code中自行添加那些不想打開的文件夾路徑。

排除文件夾

轉到定義

在編程或編寫腳本時，如果您碰到了無法識別的變量或方法，會怎么辦呢?您可能需要花費幾分鐘的時間，去手動檢索正確的文件，或是根據該變量或方法的名稱，進行全局查找。

如今，Visual Studio Code將會直接幫您定位其對應的定義。您只需按住 Command鍵(如果是在Mac上)或 Ctrl鍵(如果是在Windows上)，然后將鼠標指針懸停在該變量或方法上，那么系統彈出的懸窗就會自動顯示該變量或方法所對應的位置，以及內聯的定義。

在彈出的窗口中檢查變量

結論

上面我們為您羅列了十項能夠有效使用Visual Studio Code的新技巧。希望您能夠在實際開發過程中，通過這些技巧來達到事半功倍的效果。

原文標題：10 Tricks Every Developer Should Know in Visual Studio Code，作者：Hari Prasath

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】