vscode代碼詳解（萬字長文把VSCode打造成）

2023-05-08 05:50:13 2

作者： denniszhu ，騰訊 CDG 開發工程師

面對大量代碼，在開發任務繁重場景下，VSCode 絕對是一把利器。本文雖以 C 為引，但在 python、php、java 等中後臺語言方面支持也很強大，對 js、css 等前端技術支持上更加厲害。簡言之，只需安裝一個 ide（VSCode），就能解決你在大型項目多語言、任務繁重、跨平臺場景下的開發需求。本文以介紹配置方法為主，雖看似長，但實際在 30 分鐘內絕對完成。一招在手，天下我有。

1. 為什麼是 VSCode1.1. 日常開發對 IED 功能的需求支持多語言，比如 C 、JAVA、PYTHON、JS、PHP 等等；基本日常用到的希望不用開多種 IDE 就能解決；支持 vim、sublime、emacs、eclipse 等各種其他編輯器的快捷鍵。支持多種編碼方式。代碼有 gbk 和 utf8 兩種，希望 ide 能自動識別。代碼自動補全、函數列表、函數引用、函數定義、查到、函數跳轉、函數跳回 都比較好用。支持上傳到 sftp支持 svn、Git支持 markdownide 能顯示文件全部路徑（近期接觸到的代碼，不同文件夾下同名文件太多）主題好看點，時不時換個主題換個心情ide 上手快，配置簡單，跨平臺；佔用內存少，不卡。輕便靈活支持調試代碼。支持跨平臺使用，windows、ubuntu 等作業系統使用人數？我們研發中心都在使用 VSCode

使用過的各種 IDE 對比

sourceinsight，不支持 gbksourceinsight beyond compare.sourceinsight 上述功能在 4 支持不好，對於長路徑會被省略掉。對於同名文件很多的項目，看代碼很困難。vim 對於大規模寫代碼，操作還是不很熟練。eclipse 等雖然也能配置 C ，JAVA，但太過笨重，多開幾個窗口後，機器基本就廢了。VSCode 完全滿足需求。√2.安裝 VSCode2.1. 下載安裝包

去 VSCode 官網 下載 windows 版本即可，安裝時記得勾選將 VSCode 添加至右鍵菜單選項，最好下面的勾全部勾上。

如果忘記勾選，也可參考下文設置，但最好建議 重裝 VSCode!!!

參考：VSCode 添加右鍵快捷打開方式

3. 設置 settings.json 文件3.1. 打開設置 json 文件

VSCode 的設置採用設置面板的形式，避免大家修改時出現錯誤。但對於開發人員來講，直接設置 json 配置文件方式更方便容易。操作路徑是：用戶首選項-設置。但不推薦。

目前最新版本（1.40.2 ）有意隱藏了 settings.json 配置文件的打開方式，需要手動打開。

在 VSCode 中使用 Ctrl Shift P打開命令面板，簡單輸入settings，選擇首選項：打開設置(json)，即可打開 settings.json 文件：

3.2 設置公司代理

開發網下為了能下載插件，需要設置代理，設置方式是在settings.json文件中配置如下內容方式如下：

"http.proxy": "http://你的代理伺服器IP:埠/", "http.proxyStrictSSL": false,

4. 安裝插件4.1 安裝 C 開發相關插件(必裝)

主要功能：C 語法識別、智能補全、代碼跳轉、調用依賴識別等，注意，下文中描述如果沒有指明是需要單獨手動下載的話，一般來說都是指通過 VSCode 側邊欄上的擴展按鈕來安裝插件。

C 插件僅推薦裝這一個，日常開發已足夠用

4.1.1 安裝`C/C `插件

首先安裝 C/C 插件：

安裝完此插件後，再安裝下 VSCode_cpptools 工具。它是由微軟 VSCode C 團隊負責維護的。

↓ 下面這段描述，如果你沒遇到，也沒關係。繼續按照下面（2）小節內容操作即可。 ↓

安裝完成後，一般 VSCode 彈窗還會提示下載 C/C 其他依賴，內容如下：

一般都無法下載成功，狀態欄欄裡的輸出內容文本內容如下：

此時，就需要按照下面（2）小節內容操作。

↑ 上面這段描述，如果你沒遇到，也沒關係。繼續按照下面（2）小節內容操作即可。↑

4.1.2 手動下載 VSCode_cpptools（C/C language components (Windows)）

有時在公司開發環境下，由於網絡策略等問題 VSCode 無法自動下載，所以我們採取手動下載的方式。打開官方下載頁面：

https://github.com/Microsoft/VSCode-cpptools/releases

頁面中選擇最新版本 cpptools-win32.vsix點擊下載到本地，（注意選擇最新版本，本文檔寫作時插件是 0.20.0,你只要選最新版就可以，理論上你的版本一定不能比截圖中的小）如下圖：

官網支持 win、linux、mac，選擇對應的下載即可。

4.1.3 在 VSCode 中安裝插件

在任意一個 VSCode 打開的界面中，按住Ctrl Shfit P，在彈窗的輸入框中輸入Install from VSIX（或簡單輸入vsix），再選擇剛才下載好的cpptools-win32.vsix，VSCode 會自動安裝，安裝好後，重啟 VSCode 即可。

4.1.4 快捷鍵

這裡主要介紹下最主要的快捷鍵：

`Ctrl 滑鼠左鍵`，是文件、函數等跳轉。`Alt ←` ，是跳轉後返回原處。`Ctrl Shift O`，列出函數名`Ctrl P`，列出近期打開的文件名`Ctrl Tab`, 可以列出最近打開的文件，在開發時，兩個文件間切換時效率很高。

上述是最常用的功能。其他功能請參考VSCode 官網快捷鍵

要注意下，在windows下，上述快捷是默認的.但在linux、mac下, Alt ← 跳轉返回原處 這一快捷鍵是無法使用的，原因是快捷鍵衝突。筆者在這三個 os 間都長時間做過開發工作，因此建議三種 os 下用統一快捷鍵，以減少認知成本。linux、mac下，如何綁定 Alt ← 為 跳轉返回原處 。操作如下：

**找到快捷鍵 **

操作路徑：【首選項】-【鍵盤快捷方式】

注意：截圖中筆者使用的mac，但實際上linux、win都是同樣路徑。

找到 後退 功能

尋找時可在搜索框中輸入後退查找，截圖是為了方便大家定位，手動上下翻動找的。

鍵綁定

點擊 上圖中的第二個圈位置（鍵綁定那一列），然後按下鍵盤上的組合鍵。我在win、linux下使用普通鍵盤時，採用的是 Alt ← ，mac是使用的 command ← 。

注意，實際按鍵時只要同時按下 Alt 和 ←（或者 command 和 ←）兩個鍵即可，不需要 鍵。是為了方便大家看到是需要按兩個鍵才中間增加了 。

4.1.5 大綱功能

大綱功能比較使用，直接列出了代碼中所有的函數列表，且支持搜索。

4.2 安裝漢化插件

安裝Chinese (Simplified) Language Pack for Visual Studio Code 插件，相當於漢化插件。

4.3 安裝代碼同步插件

推薦安裝 SFTP。

4.3.1 VSCode 中安裝 sftp

4.3.2 新工程中首先配置 sftp

Ctrl Shift P 後，輸入 sftp ，選擇 Config 功能，然後 VSCode 會在當前目錄下生成.VSCode 目錄，並創建 sftp.json 文件，即為 sftp 要同步文件到其他機器的配置信息。

上圖中內容是默認創建的 sftp.json 文件。讀者可以直接拷貝下面這段配置，並修改對應內容為你自己的伺服器的信息

{ "name": "tfae.dtx", "protocol": "sftp", "host": "10.xxxxxxxx.22", "port": 36000, "username": "xxxxxxxx", "password": "xxxxxx", "uploadOnSave": true, "ignore": [ "\\.VSCode", "\\.git", "\\.DS_Store", "\\.svn", "\\.history", "\\.IAB", "\\.IAD", "\\.IMB", "\\.IMD", "\\.PFI", "\\.PO", "\\.PR", "\\.PRI", "\\.PS", "\\.WK3" ], "remotePath": "/root/home/denniszhu/tarsCpp"}

host、port、username、password 和你使用 xshell 時需要配置的信息一樣。uploadOnSave參數意思是，你本地編寫的代碼，在你使用 VSCode 保存時，sftp 會自動幫你同步到遠程。這個功能建議開啟，開啟後，就不需要像 beyond compare 每次都需要手動同步那樣麻煩了。ignore，意思是你同步時，忽略哪些文件，一般可以固定的把.VSCode、.git、sourceinsight 自動生成的文件都忽略掉，這樣同步到遠程的文件都是你關注的代碼。remotePath 就是你遠程的代碼放置的目錄4.3.3 同步代碼到單臺遠程機器

注意，可以在代碼列表的空白處右鍵，同步所有代碼；也可以在某個文件，某個文件夾上右鍵，則僅同步選中的內容

4.4 安裝 git 相關插件4.4.1 安裝 git

git 是 VSCode 自帶的功能，不過 windows 下需要我們自己先安裝 git。然後 VSCode 才能識別。安裝 git 可參考： https://www.jianshu.com/p/414ccd423efc

linux、macos 下如何安裝 git 請自行查閱。

git 安裝時，需要在關鍵幾步注意下：請按照圖中選項設置

git 安裝 0:

git 安裝 1:

git 安裝 2:

git 安裝 3:

git 安裝 4:

git 安裝 5:

4.4.2 VSCode 中配置 git 安裝路徑

安裝 git 時要關注添加環境變量到系統中即可。安裝完成後，需要在 VSCode 中配置 git 路徑。VSCode 中配置 git 安裝路徑如下：win 下，僅供參考：

"git.path": "D:\\Program Files\\Git\\cmd\\git.exe",

linux、mac 下，僅供參考：

"git.path": "/usr/bin/git",

4.4.3 VSCode 中使用 git 日常操作

註：本文列舉的是如何在 VSCode 中使用 git，但還是要求開發人員對 git 的命令比較熟悉，VSCode 僅僅是省去了你敲命令的工作，但並不代表如果你不懂 git 就能上手，畢竟下面中菜單列出的選項都是和 git 知識強相關的。註：VSCode 中所有的 git 功能你也可以不用，所有操作使用 git 命令行進行也可以，隨你的習慣。筆者 git 日常工作基本全在 VSCode 中進行了。註：VSCode 暫不支持 git clone 自動拉去倉庫，因此是需要先手動執行命令行 git clone 下倉庫到本地目錄中，才能使用 VSCode 進行後續 git 操作。

（1）暫存更改

暫存更改可以指定某個文件按 暫存，可一個全選，按圖中的加號。

（2） 提交暫存、推送、拉取等功能

籤出到主要是首次使用 git 命令 glone 倉庫下，用 VSCode 打開後這裡不會展示分支名，而是一個一個 commitid，所以要收到籤出到對應的分支名，一般來說都是遷出到 master。如上圖。

（3） 切換分支、拉取分支

等等 git 的各種功能都在 VSCode 中有所集成。

上述僅列舉了常用高頻操作，很多功能需要自行探索。

4.4.4 git 相關其他插件GitLens它會顯示有 git 有關的所有代碼提交信息，是在 sidebar 上的二叉樹圖標

Git Branch WarningsGit Branch Warnings 比較有意思，當你切到 master 分支上時會在最下面的狀態欄和彈窗提示。以防你誤切 master 分支需要在 User Setting 上加一行配置：【】裡是你想提醒的分支

"branchwarnings.protectedBranches": [ "master" ]

git graph

它會顯示有 git 有關的所有代碼提交信息，可以方便查看本地分支、遠程分支、主幹的 commit、push、pull 情況，尤其在版本提測、提發時確認分支代碼是否提交很有幫助；具體功能需自行探索，只能說很強大。

Git (Submodule) Assistant

有些工程使用 submodule 方式引入其他庫。如果想在 VSCode 的 git 也能自動拉取這些 submodule 的代碼，則需要該插件，對於看代碼會十分方便。git 默認是不拉取 submodule 的；

以騰訊開源的 tarscpp 框架為例：https://github.com/TarsCloud/TarsCpp.git

git clone 到本地後(clone 時可不需要--recursive 選項)，通過 VSCode 打開後，Git (Submodule) Assistant 插件會自動識別並下載所有 submodule。當然如果你帳戶沒有權限 clone 子模塊，則會下載失敗，會有詳細提示。

上圖中的紅框圈起來的目錄均為子模塊，可以看到右側還有個s（submodule）的標誌。直接 git clone 工程時本地是不會 pull 這些 submodules 的。安裝該插件後可以自動下載。

4.5. 其他提高效率的插件（可選）（1） 自動識別文件編碼(必做)

針對不同編碼的文件，VSCode 也能自動識別。

"files.autoGuessEncoding": true,

（2） 安裝圖標、顏色主題

推薦使用material icon theme主題，它提供的文件圖標比較漂亮。推薦使用solarized Light顏色主題。更多主題可以通過 VSCode 右下角的顏色主題和文件圖標主體來選擇更多：

之後可以選擇喜歡的主題。本小節推薦的主題和顏色主題均可以在 sidebar 的 extensions 中下載。

（3） 縮小小地圖

VSCode 自帶的小地圖太寬，寫代碼時太佔用可編輯區域，所以可以調小

"editor.minimap.maxColumn": 40,

（4） 字符分割

editor.wordSeparators，是指在寫代碼時，VSCode如何區分每個詞（token）。加入以下設置，在雙擊選中一串字符序列時，VSCode就會依此來區分詞，此配置包含了很多中文字符。

"editor.wordSeparators": "`~!@#$%^&*-= [{]}\\|;:'\",./?·～！￥…—【】、；：『』「」，。《》？ ",

（5） 讓標題能夠顯示完整的文件路徑名

有時候代碼中有些項目文件名相同，默認的標題只顯示文件名，看不出是哪個目錄的，最好設置讓他全顯示

"window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}",

（6） 括號通過不同顏色區分

安裝Bracket Pair Colorizer2插件，會通過不同顏色來展示匹配的括號，這樣代碼不容易遺漏括號。

例如上圖中if有多重括號，分別用藍色和黃色標記，這樣很容易看出代碼有沒有遺漏括號

（7） 展示對齊層級深度

安裝Indenticator插件，會將同一級的深度用豎線對齊展示，這樣很容易看出來塊結構，比如下圖中就for語句塊內的代碼就有一條豎線，而內部的if和else則分別還有一條豎線。這些豎線只是幫助你看代碼更容易。上一小節的截圖中外層 if、內層 if 間都有豎線，便於觀察

（8） 移動控制欄的位置

由於編輯的習慣，右手持滑鼠時，最好把控制欄也放置到右邊，這樣操作控制欄時頭和眼睛不用來迴轉。

"workbench.sideBar.location": "right",

（9） 移動全局搜索框的位置

vscode 老版本的全局搜索框是放在 sidebar 上的，和 git、擴展等並列，新版本後，放在了底部，官方理由是搜索結果視野更加寬闊，不過不太習慣，可以配置成老闆的方式。選擇 sidebar，而不是 panel：

（10） 自動刪除文件行尾空格

寫代碼時，免不了會導致文件行尾出現很多空格，該命令可在文件保存時，自動去掉行尾所有空格。

"files.trimTrailingWhitespace": true,

該命令還可配合插件Trailing Spaces，該插件會將行尾空格高亮。

（11）TabNine

TabNine 是一個智能的代碼自動補全工具。最重要的是，零配置，開箱即用（不用購買 license，也可以使用）。

（12）terminal

terminal 是一個能夠在 vscode 內自動打開終端命令該行的插件，大家可以嘗試。

（13） 項目管理

當 VSCode 打開多個項目時，默認是每個項目開 1 個窗口，所以會導致窗口較多，通過安裝插件Project Manager來管理，可以只打開 1 個小窗口。

安裝插件後，在每個工程中窗口中，Ctrl Shift P，輸入 Project Manager Save Project ,意思是將當前工程命名成 1 個 project，它會默認取當前根目錄的文件名為 project name。我們採用默認方式即可。

注意 當你想把這些窗口都放置到 1 個窗口中時，需要再每個窗口都執行 1 次。不過也僅 1 次。執行完成後，會在 sidebar 上生成 1 個文件夾圖標，點擊後，會出現你剛才Save Project的所有項目，通過這裡切換即可。

（14） VIM 插件

喜歡 VIM 的可以下載 vim 插件。

（15） 安裝字體相關插件(可忽略)

字體可以選擇自己喜歡的，我推薦 source code pro 等寬字體。可從 google 搜索 source code pro 關鍵字下載。首選項中配置，我這裡指定了多個字體，VSCode 會優先使用最前面的。找不到的話使用後面的。

"editor.fontFamily": "'Source Code Pro', Consolas, 'Courier New', monospace",

（16） 安裝 shellman 腳本模板

shellman 插件本質上是個插件模板。shell 的語法格式比較多，有時候多個空格，少個空格，就不能用了。對於不會經常寫 shell 的人來說，每次寫 shell 可能都要靠谷歌寫 shell。shellman 自帶各種模板，很省心。

5. 附上我的 User Settings.json

{ "editor.fontSize": 13, "editor.minimap.maxColumn": 40, "editor.wordSeparators": "`~!@#$%^&*-= [{]}\\|;:'\",./?·～！￥…—【】、；：『』「」，。《》？ ", "editor.fontFamily": "'Source Code Pro', Consolas, 'Courier New', monospace", "editor.suggest.localityBonus": true, "window.title": "${dirty}${activeEditorLong}${separator}${rootName}${separator}${appName}", "window.zoomLevel": 1, "window.titleBarStyle": "custom", "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Solarized Light", "workbench.sideBar.location": "right", //"git.path": "D:\\Program Files\\Git\\cmd\\git.exe", "git.path": "/usr/bin/git", "git.autofetch": true, "git.ignoreMissingGitWarning": true, "git-assistant.checkConfigVariables": "disabled", "git-assistant.pushBeforeClosingIDE": "disabled", "diffEditor.ignoreTrimWhitespace": false, //"terminal.integrated.shell.windows": "C:\\windows\\System32\\cmd.exe", "http.proxy": "http://公司代理地址IP:埠/", "http.proxyStrictSSL": false, "files.trimTrailingWhitespace": true, "files.autoGuessEncoding": true, "files.watcherExclude": { "**/.git/objects/**": true, "**/.git/subtree-cache/**": true, "**/node_modules/*/**": true }, "C_Cpp.updateChannel": "Insiders", "C_Cpp.default.intelliSenseMode": "gcc-x64", "C_Cpp.default.includePath": [ "/usr/include", "/usr/local/include", "${workspaceFolder}/**" ], "terminal.integrated.fontFamily": "Hack Nerd Font", "terminal.integrated.fontSize": 14,}

6. 附上我的插件列表

7. 常見問題

Q：VSCode 不知道為啥一直提示未找到 xxx 的任何定義，之前都是好好的，[流淚]，CTRL 左鍵或者 F12 都不能跳轉。A：VSCode_cpptools 插件官網有更新，需要重新執行 3.1 操作，下載最新版，更新插件。https://github.com/Microsoft/VSCode-cpptools/releases

Q： VSCode 在 windows10（7）、linux、mac 上體驗如何？A：VSCode 在 win 上使用時，主要受限於 git 是，操作較慢，且對於 C 的系統庫文件跳轉無法正常解析，還需另外通過 wsl 或者安裝其他工具來設置，但在 linux、mac，則可以使用系統自帶的 git 和系統庫，系統庫文件跳轉容易很多，且 git 速度很快。

,