如果當(dāng)電腦只能裝一個軟件還需要盡量不影響日常學(xué)習(xí)工作時，不知道你的選擇會是什么。我把這個看似「荒誕」的問題理解為「All-in-One」的升級版拷問。
這個問題陪伴了我很久，每用一個軟件我都會想想它對我究竟有多不可代替，然后決定是否繼續(xù)用下去；當(dāng)決定深度使用后，我就會問自己它能在多大程度上幫助我完成日常的學(xué)習(xí)和工作。截至這篇文章完稿，如果我的電腦只能裝一個軟件還要做到基本不影響日常學(xué)習(xí)工作，我的選擇是 VS Code。
參考之前寫過的 文獻管理工具 Zotero 入門指南，本入門指南將從 VS Code 特點出發(fā)，介紹入門 VS Code 必須了解的核心概念和組件（上篇）以及 5 個 VS Code 實際使用場景（下篇）。希望對想了解和學(xué)習(xí) VS Code 的讀者能有一點幫助和啟發(fā)。
如果此前對「代碼編輯器」沒有任何概念，我們可以和文本編輯器（寫作工具）進行類比，就是為了更好更方便進行代碼編寫開發(fā)的工具。
提到代碼編輯器，不少「工齡」較長的程序員第一反應(yīng)都會是 Notepad++，這款代碼編輯器發(fā)布于 2003 年并更新至今，非常經(jīng)典。因為使用慣性和輕量的特點它目前依舊很受歡迎。不過在 2020 年的今天，有更多好用的代碼編輯器值得向你推薦。目前比較受歡迎的代碼編輯器主要有 VS Code、Atom 和 Sublime text 。它們各有特點也都有不少死忠粉，新手在初期都可以嘗試。
另外你或許還經(jīng)常人提起 IDE(Intergreated Development Environment)，和代碼編輯器相比 IDE 更關(guān)注開箱即用的體驗、對代碼的智能理解和對大型項目的支持，因此相對「笨重」；代碼編輯器則更加輕量，側(cè)重于文件，對于語言和工作流的支持也更自由。
Visual Studio Code（簡稱 VS Code）是一個由微軟開發(fā)，同時支持 Windows 、 Linux 和 macOS 等操作系統(tǒng)且開放源代碼的代碼編輯器，它支持測試，并內(nèi)置了 Git 版本控制功能，同時也具有開發(fā)環(huán)境功能，例如代碼補全（類似于 IntelliSense）、代碼片段和代碼重構(gòu)等。該編輯器支持用戶個性化配置，例如改變主題顏色、鍵盤快捷方式等各種屬性和參數(shù)，同時還在編輯器中內(nèi)置了擴展程序管理的功能。
——維基百科
瑞士計算機科學(xué)家 Erich Gamma （《設(shè)計模式》作者、 Eclipse 主要開發(fā)者之一） 2011 年從 IBM 來到微軟后起初負(fù)責(zé)組建團隊開發(fā)一款線上開發(fā)工具（Manaco），后來他們在這個工具的基礎(chǔ)上開發(fā)了如今的 VS Code 并于 2015 年發(fā)布。VS Code 定位為一個 高性能輕量級的編輯器，為了保證主進程的穩(wěn)定，插件系統(tǒng)運行在主進程之外，所有個性化功能都由插件系統(tǒng)完成，在 IDE 和編輯器之間找到一個比較理想的平衡。
在微軟所有開源項目中，VS Code 是目前最受歡迎的一個。經(jīng)過不同工具之間的比較，我最終選擇 VS Code 的原因包括：
完全免費且開源，更新迭代穩(wěn)定
跨平臺編輯器，滿足日常在不同系統(tǒng)中的使用
占用系統(tǒng)資源比較少，大文件打開速度快
插件豐富，擴展性極強
使用人數(shù)多且社區(qū)活躍，碰到問題和需求容易找到解決方案
VS Code 有兩個不同版本：穩(wěn)定版（Stable）每月更新；預(yù)覽版（Insiders）每個工作日更新。兩個版本可同時安裝互不影響，在 官網(wǎng) 即可選擇自己需要的平臺和版本，本文使用的版本為穩(wěn)定版 1.44.1。
客戶端安裝完成后，如希望通過終端啟動 VS Code，可以按下 shift+command+p 調(diào)出命令面板，在搜索框內(nèi)輸入shell command 后找到并點擊「Shell Command: Install 'code' command in PATH」即可。
VS Code 默認(rèn)是英文界面，這里并不建議把默認(rèn)語言修改為中文，因為在學(xué)習(xí)大量英文相關(guān)教程和說明時使用英文界面或許更容易操作。另外，VS Code 絕大多數(shù)插件都沒有漢化，使用起來會中英混雜。
如果需要使用中文，依舊可以通過 shift+command+p 調(diào)取命令面板，然后在搜索框中輸入 display 找到并點擊「Configure Display Language」，這時會顯示目前可以選擇的語言或者安裝其它語言。選擇「Install additional languages...」后會跳轉(zhuǎn)到相關(guān)語言插件，選擇中文語言包安裝并進行安裝。安裝完成后再次找到「Configure Display Language」后選擇「zh-cn」后重啟即可。
打開 VS Code 后，未修改默認(rèn)配置的情況下首先會看到「歡迎頁面」。如下圖，歡迎頁面有五部分內(nèi)容。首次使用不妨先花點時間瀏覽「學(xué)習(xí)」部分內(nèi)容，其中交互式演練場（interactive playground）是新手了解 VS Code 好資料。
在個性化設(shè)置部分點擊「Color theme」可以選擇一個你喜歡的主題。
除了主題之外，你還可以為 VS Code 選擇一套自己喜歡的文件圖標(biāo)。點擊左下角的「設(shè)置」圖標(biāo)，選擇「file icon theme」。
然后選擇「Install additional File icon theme...」會彈出可以安裝的 icon 插件列表，例如 Material Icom Theme，點擊安裝后選擇使用即可。
上面這張圖展示了默認(rèn)配置情況下 VS Code 的基本界面。
編輯器：在這里碼字寫代碼
側(cè)邊欄：可以類比為 macOS 的擴展塢，姑且稱為「組件塢」，這里會展示各種組件和插件圖標(biāo)。
組件內(nèi)容：擊側(cè)邊欄不同的組件后這里會展示相應(yīng)顯示組件內(nèi)容。
面板：包括問題顯示、輸出、調(diào)試控制臺和終端四個組件。問題面板會顯示代碼中的警告和問題，輸出面板會呈現(xiàn)命令和插件的運行結(jié)果，調(diào)試控制臺用來進行代碼調(diào)試，終端則可以幫助我們直接在 VS Code 中進行命令行操作。
狀態(tài)欄：可以類比為 macOS 的菜單欄 + 通知中心，這里會展示和文檔及項目相關(guān)的簡單信息以及部分插件提供的信息。
默認(rèn)情況下，側(cè)邊欄顯示的五個組件分別是：資源管理器、跨文件搜索、源代碼管理、啟動和調(diào)試和擴展管理。隨著后期安裝插件的增多，側(cè)邊欄可以顯示的組件數(shù)量也會越來越多，不過你可以通過右擊側(cè)邊欄選擇隱藏那些用不到的組件還可以拖動組件圖標(biāo)進行排序。
側(cè)邊欄顯示的默認(rèn)組件中「資源管理器」和「跨文件搜索」就是字面功能，分別用來瀏覽管理文件和進行內(nèi)容查找替換，我們會在下篇中配合具體應(yīng)用場景進行更詳細(xì)的介紹。源代碼管理和調(diào)試分別用于 git 一系列操作和 debug，如果你并非程序員，沒有這方面的需求也可以選擇將其隱藏。
這一部分需要詳細(xì)介紹「擴展管理」組件和「插件」這個概念。
如文章開頭所言，VS Code 中為了保證主進程的穩(wěn)定所有個性化功能的實現(xiàn)都將通過插件來完成，在下文的應(yīng)用場景部分我們也會用到大量插件。我們可以把插件理解為 macOS 中的應(yīng)用，而擴展管理則是 VS Code 的應(yīng)用商店。
如上圖，在組件顯示部分可以看到已經(jīng)安裝的插件和推薦插件，所有你想找的東西都可以嘗試在搜索框進行搜索。點擊感興趣的插件后會顯示插件詳情，其中包括詳細(xì)介紹、作者和更新日志等內(nèi)容。
需要說明的是，由于 VS Code 的擴展插件數(shù)量實在過于龐大，在瀏覽插件的時候系統(tǒng)已提供了一些過濾操作，點擊 ··· 可以選擇只查看安裝的插件或者流行的插件等等。
更方便的是你還可以直接在插件搜索框中輸入 @ 來進行快速過濾。
為了更方便的找到需要的插件，VS Code 支持按照類別進行查找，目前支持的類別如下圖所示，包括語言支持、代碼片段和主題等。
目前在官方的插件商店中，我們可以看到共有 12 類 20000 余款插件。如果你想開發(fā)自己的插件，可以進一步參考官方插件 API 。
VS Code 作為一個代碼編輯器，它本身有兩個比較極客的設(shè)計思想。一個是基于文本（命令）的交互界面，另一個是基于文本的系統(tǒng)設(shè)置?；谖谋镜慕换ソ缑婢褪沁@里提到的命令面板，系統(tǒng)設(shè)置將會稍后介紹。
命令面板的存在提供了一種全新的使用邏輯，熟練使用后可以極大提高效率，因此對命令面板有基本了解是上手 VS Code 的關(guān)鍵。其實在上文安裝命令行啟動以及設(shè)置中文支持時我們都用過它，shift+command+p 就是調(diào)用命令面板的一種基本方式。
命令面板的高效在于其可以通過輸入框中的第一個字符來觸發(fā)不同功能。
如下圖所示，當(dāng)你按下 shift+command+p 時，命令面板的輸入框會自動出現(xiàn)一個 > 它意味著此時命令面板認(rèn)為你想要搜索相關(guān)命令并執(zhí)行。
當(dāng)刪除 > 后會看到命令面板切換到了「訪問最近文件」?fàn)顟B(tài)。如果你想在調(diào)用命令面板時直接訪問最近文件，快捷鍵是 command+p。
如果此時輸入 ? 會觸發(fā)命令面板的「幫助」功能，我們可以看到支持哪些操作。下圖中顯示的切換文件、>執(zhí)行命令、@符號跳轉(zhuǎn)等我們在后續(xù)的應(yīng)用場景中都會提及。其他單詞縮寫也代表了對應(yīng)的操作，例如edt接空格可以管理打開的編輯器，term接空格可以打開或管理終端。
在下篇介紹中，我們會涉及到更改默認(rèn)設(shè)置的內(nèi)容，因此有必要了解 VS Code 更改設(shè)置的方法。
VS Code 目前已經(jīng)有了比較完善的圖形化設(shè)置界面，只需要使用 command+, 就可以調(diào)用。
如上圖所示，設(shè)置面板已經(jīng)列出了用戶常用配置內(nèi)容，你可以尋找自己想要改變的東西，但是這里更加推薦直接在搜索框里搜索。此外，VS Code 的配置分為用戶（User）和工作區(qū)（workspaces）兩個層級，其中用戶配置會對全局生效，工作區(qū)配置只會對當(dāng)前所在的項目（目錄）生效且優(yōu)先級更高。
除了圖形化界面以外，VS Code 的所有配置其實都寫在 json 格式的一個文本文件中。你可以非常方便的調(diào)出該文件進行設(shè)置，只需要在命令面板中輸入open sett 然后選擇 JSON 即可。如果是針對工作區(qū)的設(shè)置，json 文件將會保存在工作區(qū).vscode目錄下。
在 json 文件中，你可以直接編寫設(shè)置，也可以點擊行號前的「筆形」圖標(biāo)查看可以更改的內(nèi)容。之所以有必要了解如何通過配置文件更改設(shè)置是因為部分插件提供的復(fù)雜設(shè)置只能通過修改 json 文件完成。
工作區(qū)（workspace）是另一個需要了解的核心概念，它對應(yīng)在 VS Code 中如何進行文件管理。
上文我們提到相比于 IDE 著重于項目管理，代碼編輯器更加側(cè)重于文件本身，VS Code 所有操作就是基于當(dāng)前目錄、子目錄和其中的文件進行的。在下篇內(nèi)容中我們會講到很多操作和插件都會基于所在目錄生成相關(guān)的配置文件，而這些文件通常都會被保存到所在目錄的.vscode文件夾中。.vscode 文件夾中的各種配置決定了不同目錄被打開時 VS Code 會啟動哪些插件和配置。
隨著項目逐漸發(fā)展，單一文件夾往往無法滿足我們的開發(fā)需求，VS Code 通過工作區(qū)這個概念解決了同時操作多個文件夾的問題。簡而言之，當(dāng)你使用 VS Code 打開一個文件夾后可以在命令面板中搜索運行 add folder to workspace，然后選擇想要打開的其它文件夾，此時就會顯示一個尚未保存的工作區(qū)。
當(dāng)所有文件夾添加完成后在命令面板執(zhí)行 save workspace as 選擇我們的工作區(qū)名字和要保存的位置，就可以對該工作區(qū)進行保存。
這時我們會看到一個名字后綴為code-workspace的文件，其本質(zhì)依舊是一個 json 格式的配置文件。其中包括了文件夾的相對路徑以及針對工作區(qū)的其它設(shè)置。
此外，記住兩個目錄切換的快捷鍵也會大大提高效率，ctrl+r 可以快速查看并切換最近打開的文件夾，ctrl+w 則可以快速在所有打開的 VS Code 窗口中進行切換。
作為一個代碼編輯器，VS Code 提供了統(tǒng)一的 Language Server Protocol 和 Code Debugging Protocol API，所有語言支持都能夠借助這兩個 API 在 VS Code 上得到類似 IDE 的開發(fā)和調(diào)試體驗。
程序員可能最關(guān)心的內(nèi)容就是對編程語言的支持，但初學(xué)者最不需要擔(dān)心的其實也是這部分內(nèi)容。到目前為止常用的主流編程語言在 VS Code 中都得到了很不錯的支持，你需要的往往只是安裝對應(yīng)語言插件和進行一點基本配置。這些語言包括基礎(chǔ)的 Markdown 和 JSON，以 HTML、CSS 和 JavaScript 為代表的多種前端語言和以 Python、Java、Go、C#、PHP 等為代表的大量后端語言。對于一些在程序員群體中相對使用人數(shù)較少的編程語言，例如 R 和 Julia 等也都有插件提供支持。下圖為官網(wǎng)展示的幾個流行語言插件。
如果想查看自己使用的編程語言是否支持，可以在插件商店中查找。此外，當(dāng)你用 VS Code 打開一個文件時，系統(tǒng)會根據(jù)文件名后綴自動提示你安裝與之相關(guān)的語言插件，非常方面。
這一部分我們也會在下篇中結(jié)合具體的應(yīng)用場景進行介紹。
提倡使用使用快捷鍵，主要目的是提高效率盡量讓雙手不離開鍵盤?？旖萱I的使用開始看似是一件更浪費時間的事情，但是隨著肌肉記憶和熟練度增加效率將會大大提高。
如果你是從其它編輯器切換到 VS Code 完全可以移植之前熟悉的快捷鍵配置，比如 Vim, Atom 或者 sublime。如果是一個新手，下圖是我自己日常用到的 VS Code 高頻快捷鍵，供參考。
如果需要查看所有快捷鍵，可以通過 ctrl+K ctrl+s 進入快捷鍵設(shè)置界面或者直接查看官方文檔。
以上就是 VS Code 編輯器入門指南上篇的內(nèi)容，介紹了什么是代碼編輯器、為什么選擇 VS Code 、從 0 到 1 開始使用 VS Code 以及上手 VS Code 需要了解的核心概念與組件。有了這些知識儲備，在下篇中將會介紹 5 個 VS Code 實際應(yīng)用場景，進而更好的了解 VS Code 的特性和插件。
聯(lián)系客服
