一款工具搞定 5 個應用場景：VS Code 上手指南
摘要：除了代碼格式化以外，VS Code 還可以基於語言定義進行代碼摺疊，即根據語言特性來自動區分哪些部分可以摺疊，因此 Markdown 文檔同樣可以使用代碼摺疊功能。不過該插件目前需要開啓一些 VS Code 默認關閉的功能，如果想嘗試可以閱讀插件使用說明。
<div>
Matrix 精選
Matrix 是少數派的寫作社區，我們主張分享真實的產品體驗，有實用價值的經驗與思考。我們會不定期挑選 Matrix 最優質的文章，展示來自用戶的最真實的體驗和觀點。 文章代表作者個人觀點，少數派僅對標題和排版略作修改。寫在前面
如果當電腦只能裝一個軟件還需要儘量不影響日常學習工作時，不知道你的選擇會是什麼。我把這個看似「荒誕」的問題理解爲「All-in-One」的升級版拷問。 這個問題陪伴了我很久，每用一個軟件我都會想想它對我究竟有多不可代替，然後決定是否繼續用下去；當決定深度使用後，我就會問自己它能在多大程度上幫助我完成日常的學習和工作。截至這篇文章完稿，如果我的電腦只能裝一個軟件還要做到基本不影響日常學習工作，我的選擇是 VS Code 。 參考之前寫過的 文獻管理工具 Zotero 入門指南 ，本入門指南將從 VS Code 特點出發，介紹入門 VS Code 必須瞭解的核心概念和組件（上篇）以及 5 個 VS Code 實際使用場景（下篇）。希望對想了解和學習 VS Code 的讀者能有一點幫助和啓發。 在 VS Code 編輯器入門指南上篇 ，我們瞭解了什麼是代碼編輯器、爲什麼選擇 VS Code 、從 0 到 1 開始使用 VS Code 以及上手 VS Code 需要了解的核心概念與組件。提到的組件包括資源管理器、跨文件搜索、源代碼管理、啓動調試和擴展管理，涉及到的核心概念包括插件、命令面板、工作區和語言支持。 有了這些基礎的知識儲備再打開 VS Code 就不會恐懼和陌生，不過，學習一個工具更好的方式是找到具體應用場景。VS Code 編輯器入門指南下篇將從五個可能會用到的實際場景出發介紹一些 VS Code 特性和好用的插件。因爲文章篇幅所限很難詳細展開，如果有需要可以後續再分別介紹，不過我會爲每個插件附上鍊接和儘可能多的官方相關介紹方便大家進一步瞭解。 拓展閱讀：VS Code 編輯器入門指南上篇碼字工具
如果你是一個重度的 Markdown 寫作者，VS Code 經過簡單配置後作爲文本編輯器其體驗不會遜於市面上大部分文本編輯器。圖片
首先通過兩個插件來解決圖片處理這個老大難問題，如果經常使用截圖功能且喜歡直接把圖片存放在本地可以使用 Paste Image 插件，如果喜歡把圖片直接上傳至圖牀則推薦使用優秀的 PicGo VS Code 插件。 因爲我日常會把所有圖都放在騰訊雲中保存，這裏以此爲例簡單介紹 PicGo 在 VS Code 的配置和使用。 在設置面板中搜索 picgo 就可以看到相關的配置選項，需要的配置參數和 PicGo 客戶端一致，例如使用騰訊雲時需要填寫 APPID、存儲空間名和自定義域名等信息。因爲平時使用的目錄和文件名都可能包括中文，我設置爲僅按照時間命名。
option+command+u ) 或者本地圖片 ( option+command+e ) 上傳至圖牀，並直接在光標處插入圖片鏈接。
目錄功能
打開一個 Markdown 文本後在資源管理器組件中可以通過 outline 查看文檔目錄，點擊對應章節標題直接跳轉至相應位置。
Command+shift+o 或者按下 command+p 後輸入 @ , 就可以看到各級標題了。
ctrl+k z 開啓 禪模式 的時候。
編輯體驗
如果需要獲得更好的 Markdown 編輯體驗可以考慮安裝如下幾個插件- Markdown All in One ：基本支持了 Markdown 所需的各種操作，例如快捷鍵、生成 TOC 和導出 HTML 等，如果沒有特殊需求無需安裝下面三個插件。
- Markdown Footnotes ：讓系統默認的 Markdown 支持腳註。
- Markdown+Math ：非常完善的數學公式支持。
- Pangu-Markdown ：盤古之白，在需要的時候給中文和英語數字之間增加空格。你懂的，關鍵時刻這個功能非常重要。
筆記模板
模板是所有筆記類工具的標準配置，在 VS Code 中可以通過代碼片段（Snippets）針對不同類型的文檔設置模板。 如果想配置自己的代碼片段，在命令面板中輸入Configure User Snippets 後會看到語言選項，這裏我們以 Markdown 爲例，配置內容本身爲 json 格式。
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
Print to console 爲片段名，對象的值包含：prefix、body 和 description 三個屬性。分別表示調用名、插入內容和代碼描述。
我把自己一些常用的 Markdown 模板做成代碼片段並打包成了一個 插件 。例如當我輸入 debug 的時候就可以方便的調用 debug 記錄模板。
查找替換與精確定位
如果你是一個每天需要處理很多稿件的編輯往往會有一些重複性工作，比如需要把十幾篇投稿中的「ios」修改爲「iOS」。這類涉及到搜索替換的問題，使用 VS Code 強大的搜索組件都可以輕鬆搞定。
2020-04* 會匹配所有以它開頭的文件。
除了使用搜索功能進行替換以外，它還可以實現「精確定位」。
很多人在使用一些筆記工具時都有精確定位的需求得不到滿足，即快速找到某個 tag 或者關鍵詞所在的具體位置。VS Code 則可以幫你在所有需要的文檔中進行精確定位和跳轉。
如下圖所示，我在一個文件夾內搜索「模板」，它會在結果中顯示每個文檔中的搜索結果，鼠標放在某一行時會用浮窗形式展示詳細內容，點擊後會直接打開對應文檔並定位在所在行。
預覽導出
Markdown 文檔的預覽在不借助第三方插件的情況下基本可以滿足需求，我們可以在配置中設置引用自己中意的 CSS 樣式以達到更好的效果。如果需要非常強大的導出功能，可以藉助插件 Markdown Preview Enhanced 。
項目管理
如果你有很多個筆記本（文件夾）在碼字的過程中需要經常切換，這裏推薦的插件是 Project Manage 。 它支持將目錄和工作區 Workspaces 保存爲項目並進行快速切換，很好地彌補了 VS Code 自身項目切換的不足。如果你對工作區這個概念很陌生，可以閱讀 VS Code 編輯器入門指南上篇-核心概念與組件 。管理協作
如果你的項目需要協作，VS Code 也可以成爲你不錯的項目管理和協作工具。從需要的地方即刻開始
從 VS Code 的搜索功能角度出發，如果我們在文檔內部做一些固定的埋點並賦予特殊含義，那麼就可以在需要的時候直接找到這些特殊內容。todo 類型插件就是這樣的思路，我們可以設定一些特殊的標記，然後在工作目錄下自動搜索匹配這些標記再以形象的方式展示在組件中。 以比較常用的 TODO 插件 Todo Tree 爲例，在設置中我們可以指定哪些內容作爲標記以及這些標記如何被展示。
"todo-tree.highlights.customHighlight": {
"TODO": {
"icon": "tasklist",
"iconColour": "red"
},
"REVIEW": {
"icon": "eye",
"iconColour": "green",
},
"FIXME": {
"icon": "thumbsdown",
"iconColour": "yellow"
}
}
隨後當我們在任意文檔的任意位置插入相關標籤後，它們就會在組件中展示出來，點擊標籤即可直接跳轉到對應位置。
用 KanBan 管理素材
只有 TODO 功能或許不夠過癮，如果能做成看板的形式就更好了。嗯，一個插件 Kanban 基本滿足需求。 在自己的稿件目錄下添加一個「稿不完」看板，該寫什麼一目瞭然。看板內容本身會存儲在 json 格式的文本文件中。
在 VS Code 中使用 Trello
如果你的團隊正在使用 Trello， 那麼你也可以在 VS Code 藉助插件 Trello Viewer 及時查看大家的 Trello 動態。 完成 token 配置後，在側邊欄將會出現一個 Trello Viewer 組件，Trello boards 下會顯示所有看板，你還可以把某個常用的 list 添加到 favorite list。 如果僅僅是想查看卡片內容只需要點擊即可，這時插件會生成一個 Markdwon 格式文件並自動打開預覽模式。如果你想對卡片進行簡單編輯，可以在組件中右鍵點擊某個卡片然後選擇要進行的後續操作。
讓 Git 更容易一些
版本管理是個人和團隊項目開發中非常重要的一環，源代碼管理也是僅有的幾個被內置到 VS Code 中組件，無需任何插件和設置即可在 VS Code 中使用 Git。很多人在學習 Git 時都會被各種各樣的命令搞暈，在提交代碼時也會因爲要輸入各種命令而煩躁。 如果想更輕鬆使用 Git 和 GitHub，你可能會選擇 GitHub 官方客戶端或第三方
網站開發
說完目前最火的輕量標記語言 Markdown ，就不得不提和它對應的超文本編輯語言 HTML 和前端開發了。 可能寫一個小網頁或者個人博客是很多人的 todo 事項，使用 VS Code 做前端開發對於初學者來說非常友好。格式化與摺疊
代碼格式化是指讓各種不規範的代碼瞬間按照要求好看起來，VS Code 藉助語言插件目前對絕大多數語言都有很好的支持。在設置中我們可以選擇何時對代碼進行格式化，包括輸入粘貼和保存。此外每種語言都可以進一步進行個性化設置。
command+shift+[ 進行快速摺疊時，會從所在位置處可摺疊的最內層代碼開始摺疊。展開的快捷鍵則是 command+shift+] 。
多光標
多光標特性是 VS Code 高效使用的必備技能， 官方文檔 有詳細介紹，這裏簡單提一下我常用的三種方式。 有時候我們需要在一個文件內多個沒有明顯特徵的位置添加相同的內容，此時如果配合鼠標操作，只需要按住 option 鍵，在需要添加光標的位置單擊即可。
option+shift+i 就可以在行末添加光標。
command+d 就會自動選中下一個相同的內容。
顏色設置
在編寫 CSS 時常見的一個需求就是修改元素顏色，在 VS Code 中可以直接使用取色器進行修改。 當遇到顏色時，我們會在編碼前看到效果色塊，鼠標浮於顏色上會自動顯示顏色編輯器。在這個窗口中可以調整顏色的飽和度、透明度和色相，也可以切換不同的顏色代碼。同時，只要點擊右上角就可以輕鬆退回之前的顏色值。
Emmet
Emmet 是一個可以大幅提高前端代碼編寫效率的工具，可以讓我們用盡量簡潔的輸入來實現複雜的內容。藉助 Emmet 可以擺脫頻繁寫< > 的尷尬，而在 VS Code 中可以非常方便的調用 Emmet。
當輸入任意內容後，如果有可以和輸入匹配的 Emmet 縮寫，相關建議就會實時展示出來供選擇。
實時預覽
VS Code 本身不支持實時預覽 HTML 文件，不過已經有很多插件實現了這一功能，例如 Live Server 。
數據分析
查看 Excel 和 PDF
在日常工作中，我有很大一部分時間都在和各種格式的數據和文檔打交道，其中 Excel 和 PDF 文檔是最常見的兩種格式。在沒有使用 VS Code 之前如果一個項目中有這些文件就需要在 office 和 PDF 閱讀器中打開，但是藉助 Data Preview 和 VS Code-pdf 可以輕鬆查看這些文件，用起來挺過癮。 VS Code 中直接查看 Excel 並進行基本操作。
Python 與 R 語言支持
目前數據科學相關領域有 Python 和 R 兩種常用編程語言。如果你習慣使用 python ,VS Code 本身對 Python 和 juypter 都有非常完善的支持，可以查看官方文檔的 詳細說明 ，使用起來比較簡單。 如果你習慣使用 R 語言，隨着 R Language Server 後端加持以及 VS Code-R 插件在前端的重大迭代，現在使用 VS Code 愉快地進行 R 語言編程不僅成爲了一種可能，而且還挺香。使用體驗上基本不輸 Rstudio，而且很多小細節上更貼心。 因爲 R 語言配置相對複雜，所以稍加介紹。install.packages("languageserver")
R support for Visual Studio Code 這個插件是 VS Code 中 R 的核心插件，具有語法高亮，基礎代碼片段和代碼執行等功能。例如你可以在編輯器中選擇某幾行內容，然後使用 ctrl+enter 將代碼發送到終端執行。
R LSP Client 有了它就可以進行代碼補全、查看函數定義以及參數預覽等功能。
安裝插件後需要在配置文件中進行兩個對應設置。通過 ctrl+, 進入設置頁面，在搜索頁面首先搜索 rterm，在對應操作系統位置處輸入你的 R 路徑，然後找到 rlsp path 對應設置處也輸入 R 安裝路徑。
打開一個包含 R 腳本的文件夾（單獨打開一個 R 腳本無效）就可以正常使用了。
一些基本特性如鼠標懸停顯示函數定義和幫助文檔（無論包是否加載）、鼠標懸停在變量直接展示類型信息、自動高亮文檔內所有同一變量和函數自動補全等都非常好用。
R session watcher
VS Code-R 插件近期更新中新增了 Session Watcher 功能，即便還在測試階段這個功能也足以讓人激動。它實現了在 VS Code 中實時展示各種變量圖表等需求，不會再有單獨彈窗。
.Rprofile 配置文件中添加一行代碼：
source(file.path(Sys.getenv(if (.Platform$OS.type == "windows") "HOMEPATH" else "HOME"), ".VS Code-R", "init.R"))
開發利器
對於程序員來說，終端和服務器的使用頻率極高，如果代碼編輯器可以和這兩者非常好的結合將會大大提高工作效率。配置終端
VS Code 的設計理念之一就是讓 VS Code 和終端緊密聯繫在一起。 例如，我們可以在終端某個目錄中通過code 命令以命令行的形式打開 VS Code，也可以在資源管理器中通過右鍵直接通過終端打開一個目錄。
cd 到某一個目錄直接在資源管理器打開；在終端中點擊文件直接在 VS Code 中編輯；當終端輸出內容（例如報錯信息）包括鏈接或者文檔路徑時，VS Code 會自動識別並可以直接點擊打開鏈接和文件。
遠程模式
一些小型的計算和開發可以在本機完成，如果涉及到大型計算或者部署就需要在服務器上操作。VS Code 提供的遠程模式可以讓我們在本機輕鬆連接其它開發環境，目前官方的遠程模式支持包括容器、SSH 和 WSL 在內的三種方式。
remote ssh 。然後找到 Remote-SSH 相關命令，即可以直接選擇鏈接服務器，也可以選擇打開配置文件。這裏，我們選擇打開配置文件進行簡單的配置。
代碼調試
VS Code 內置支持 node.js ，可以對 JavaScript, TypeScript 進行調試，其它語言則通過第三方插件實現。目前對 PHP, Ruby, Go, C#, Python, C++, PowerShell 等都有很好的支持。 如果想進入調試模式，首先需要點擊側邊欄的調製組件打開調試視圖，會看到提示打開一個需要被調試的文件。我們以簡單的 Python 腳本舉例，打開腳本後會自動生成一個名爲 launch.json 的調試配置文件。這個文件可以隨時修改，定義不同的內容應該如何加載調試。典型的配置如下圖所示。
或許有用
最後，列舉幾個可能會讓 VS Code 更加順手的設置。渲染空格符製表符
通過設置editor.renderWhitespace: all 可以將所有的空格符、製表符等全部顯示出來。有時候空白的地方就是坑。
修改新建文件默認格式
默認配置時，command+n 快捷鍵可以在編輯器裏創建一個新的普通文本文件。如果你是一個把 VS Code 當做文本編輯器用的人，不妨通過 files.defaultLanguage 把新建文檔格式設置成 Markdown。
前後光標處跳轉
這個功能有些向在 Linux 中快速回到之前目錄的操作。ctrl+- 跳轉回上一次光標所在位置， ctrl+shift+- 則相反。
自定義快捷鍵
如果你是從其它 IDE 遷移過來，可能會面臨快捷鍵衝突和缺失的問題。這時可以通過自定義快捷鍵解決。 例如 R 語言用戶在 RStudio 中可以使用alt+- 一氣呵成輸入賦值符號 <- ，在 VS Code 中必須也可以。
打開 Keyboard Shortcuts 會看到這個快捷鍵已經被綁定，可以在 json 文件中設置不同情境下新的含義。
點開快捷鍵配置文件之後不要管左邊的內容，直接去右邊設置就好，配置方法如圖。以後在 R 或者 Rmd 文件裏 alt+- 就變成了和 RStudio 一樣的快捷鍵。
