vscode 工作臺介紹

我們把 VS Code 的整個界面統(tǒng)稱為工作臺（Workbench），它就像是木匠的工作桌，上面擺放著做木工活時需要的各式工具。一個好的匠人一定會精心擺置自己的工作臺，把最需要的、頻繁使用的工具放在最順手的地方，并充分利用桌子的空間，但又不喧賓奪主。

編程也是一樣，除了使用核心的編輯器，我們也經(jīng)常需要快速訪問文件目錄，使用終端運(yùn)行一些腳本或者使用版本管理工具等等，因此我們就需要了解 VS Code 的工作臺上都有哪些工具，它們是干什么的，以及工作時需要使用哪些才有可能事半功倍。

所以，從今天開始，我將和你一起探索 VS Code 工作區(qū)里的各個組件。

首先，你打開歡迎界面，并且點(diǎn)擊界面右側(cè)的“界面概覽”。

打開“界面概覽”

這時你能夠看到，在默認(rèn)設(shè)置下 VS Code 的左側(cè)側(cè)邊欄有五個組件，它們分別是：

• 文件資源管理器，主要用于瀏覽和管理文件和文件夾。
• 跨文件搜索，用于在當(dāng)前文件夾內(nèi)進(jìn)行跨文件的搜索。
• 源代碼管理，用于對當(dāng)前文件夾下的代碼進(jìn)行版本管理，默認(rèn) VS Code 支持的版本管理軟件是 Git。
• 啟動和調(diào)試，用于對當(dāng)前文件夾下的項目進(jìn)行運(yùn)行和調(diào)試。
• 擴(kuò)展管理，用于下載和管理 VS Code 里的插件。

如果有哪個功能是你不需要的話，你可以在 VS Code 的最左側(cè)，右鍵打開上下文菜單，然后將那個組件隱藏。你還可以拖動這幾個小圖標(biāo)，然后將這些功能按照你需要的方式排序。

管理視圖的順序和是否隱藏

在側(cè)邊欄的最下角還有一個齒輪形狀的按鈕，它提供了一些 VS Code 系統(tǒng)管理常用的快捷鍵，點(diǎn)擊打開后，你可以看到命令面板、設(shè)置、鍵盤快捷方式、管理擴(kuò)展等等一系列快速入口。

最左下角的快速入口

界面的最下面一行則是狀態(tài)欄，顧名思義，這個組件的作用就是將當(dāng)前文件夾、編輯器狀態(tài)、代碼版本、代碼錯誤等的簡略訊息呈現(xiàn)給你。除此之外，很多插件也會選擇將信息呈現(xiàn)在狀態(tài)欄上。

最下面的狀態(tài)欄訊息

不過“界面概覽”并沒有覆蓋所有的組件，其中一個非常重要的部分就是面板（Panel），你可以在命令面板中執(zhí)行“切換面板”命令來打開它。

面板

打開后，你會看到面板的四個組件：問題面板、輸出面板、調(diào)試控制臺和終端。

• 問題面板（Problems Panel）的作用是展示當(dāng)前文件夾下代碼里的所有問題和警告，比如你的代碼有語法錯誤、格式問題、拼寫錯誤等，這些問題和警告都會被收集在這個面板中。你可以通過這個面板瀏覽這些問題并且訪問對應(yīng)的文件。
• 輸出面板（Output Panel）的存在是我特別喜歡 VS Code 的一個原因。GUI 的很大一個作用就是將很多命令行工具以一個更易用的形式呈現(xiàn)給用戶，但是當(dāng)你按下一個按鈕后究竟發(fā)生了什么，你往往是不清楚的。如果這個按鈕所對應(yīng)的命令執(zhí)行失敗了，你估計更是一頭霧水，不知如何是好。

對于這樣的問題，VS Code 的答案是避免做一個黑盒，相信用戶有能力且有必要了解自己在使用的工具。輸出面板的作用就是將核心命令和插件的運(yùn)行狀態(tài)和結(jié)果輸出來，比如你使用 Git 來管理你的代碼版本，你的每個 UI 上的版本操作，你都能在輸出面板里看到這個操作對應(yīng)的 Git 命令行以及它的運(yùn)行結(jié)果。這樣即使意外發(fā)生了， VS Code 無法完成指定的 Git 命令，你依然可以通過閱讀輸出面板找到問題所在，然后自行修復(fù)。

• 調(diào)試控制臺主要是在調(diào)試代碼時使用，之后我會有專門的一講來介紹。
• 終端是開發(fā)工作中不可或缺的一個工具，VS Code 則更進(jìn)一步，把終端直接集成了進(jìn)來。集成終端的存在，使得 VS Code 保持輕量級成為了可能性。

這里我繼續(xù)使用 Git 這個例子，Git 的命令行是極其豐富的，但我估計沒有人敢聲稱自己熟練掌握每條命令。VS Code 的版本管理 UI 不可能把所有功能都實現(xiàn)了然后呈現(xiàn)給用戶，而且對于絕大多數(shù)人而言，大部分時間接觸的可能就是幾條或者十幾條 Git 命令，VS Code 只為這些命令提供 UI。

但如果你對其他功能有需要，那么你可以打開集成終端，使用 Git 命令行進(jìn)行操作。這里你可能會問，為什么不直接使用系統(tǒng)自帶的終端呢？請允許我賣個關(guān)子，我會在之后跟你探討。

剩下還有兩個 UI 組件。第一個是菜單欄，這個沒有太多可以講的，VS Code 把常用的命令按功能進(jìn)行歸類放到菜單中，這樣你就可以使用操作系統(tǒng)支持的快捷方式進(jìn)行搜索和訪問。

搜索和訪問菜單欄