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

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

命令面板(Command Palette)

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

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

命令面板

Zen模式

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

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

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

Zen模式下的居中代碼

拆分視圖(Split View)

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

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

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

在拆分視圖中比較文件

標(biāo)簽包裹(Tag wrapping)

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

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

使用Emmet包裹標(biāo)簽

Git集成

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

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

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

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

各種新的主題和插件

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

Visual Studio Code的主題列表

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

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

Visual Studio Code中的命令行

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

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

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

Visual Studio Code中的命令行

同時編輯多行

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

同時編輯多行

排除文件夾(Exclude Folders)

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

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

排除文件夾

轉(zhuǎn)到定義

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

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

在彈出的窗口中檢查變量

結(jié)論

上面我們?yōu)槟_列了十項能夠有效使用Visual Studio Code的新技巧。希望您能夠在實際開發(fā)過程中，通過這些技巧來達(dá)到事半功倍的效果。

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

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