vscode 工作臺(tái)介紹

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

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

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

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

打開(kāi)“界面概覽”

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

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

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

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

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

最左下角的快速入口

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

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

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

面板

打開(kāi)后，你會(huì)看到面板的四個(gè)組件：?jiǎn)栴}面板、輸出面板、調(diào)試控制臺(tái)和終端。

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

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

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

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

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

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

搜索和訪問(wèn)菜單欄