你所不知道的 vscode,彙集歷史版本中你可能不知道的新特性

壹 ❀ 引
vscode可以毫不誇張的說是大部分前端同學吃飯的工具(webstorm除外),隨着時間的推移vscode其實也在不斷推出了各種新功能新特性,但vscode並不會默認就實裝這些新功能,我相信也有很多同學其實不會關心vscode的更新日誌,這就導致會永遠跟這些功能擦肩而過。那麼本文的目的就是從vscode歷史版本中去搜集匯總那些對於研發同學有幫助的新特性。
注意,寫這篇文章時vscode最新版本為1.72.2,請先保證版本先升級。關於版本信息可以點擊左上角幫助--關於查看當前安裝的版本;而升級可以點擊左下角管理--檢查更新即可,需要注意的是mac用戶可能會出現自動更新失敗的情況,如果失敗請檢查你的vscode是否安裝在application(應用程序)中,假設你之前裝在了下載目錄,你只需要選中應用拖動到應用程序後重啟vscode即可。
OK,現在萬事俱備,讓我們開始了解歷史版本中vscode究竟帶來了哪些新特性吧,我們並不要求你一定要使用它,但你可以在了解後決定要不要用它。
貳 ❀ 你可能喜愛的新特性
貳 ❀ 壹 search支持樹狀查看搜索結果
search作為日常開發超高頻使用的功能,現在已支持對匹配結果按樹狀形式展示,對於匹配結果非常多的情況下,現在你能清晰了解結果分部的目錄情況,當然你能點擊tree圖標切換樹狀或者平鋪兩種形式,此功能不需要額外配置,更新自帶。

貳 ❀ 貳 git衝突支持三窗合併模式
早期的代碼衝突解決,大家比較熟悉的一定是<<<<<<< HEAD (Current Change)這種模式,你的衝突代碼在上,其他人的衝突代碼在下,然後我們來對比刪除解決代碼衝突。在後續版本中vscode新增了三窗口解決衝突模式。
我們可以點擊左下角管理--設置然後輸入git.mergeEditor,打勾匹配結果。

在之後解決衝突你會發現就是三窗口模式:

前兩個窗口為其他人與你的衝突代碼,你可以打勾選擇要誰的代碼,選擇後的代碼都會呈現在底下的第三個窗口,當然你也可以在第三個窗口編輯最終的預期代碼,更多細節大家可以自行體驗。
vscode本來想在未來默認裝載此功能,結果推出後大部分人覺得還是之前的解決形式更加簡單粗暴,畢竟習慣還是挺難改變的,所以在1.72.0官方將git.mergeEditor默認設置為了false,具體理由可見 Issue Change default git conflict experience to be the inline editor 。假設你之前沒設置過字段,那麼現在當有衝突時,我們可以通過點擊右下角的Resolve in Merge Editor按鈕進入三窗模式:

準確來說,現在可以無縫切換這兩種模式,具體可見下圖操作。當然,vscode官方承諾仍會不斷優化三窗合併的使用體驗,所以了解它很有必要。

貳 ❀ 叄 search支持多選操作
前面提到search功能支持樹狀展開搜索結果,除此之外,在以往版本已經支持搜索結果文件多選替換或多選刪除。比如我搜出12個文件符合條件,我需要對其中三個文件進行全局替換,那麼我就可以按住command/ctrl(前mac後windows)鍵點擊這些文件,單獨對多選的這些文件進行replace和刪除操作。
注意,這裡的刪除不是把文件刪除了,我們常常會遇到某些文件不是我們想要的結果,那麼就可以通過刪除僅在這次搜索結果中屏蔽掉這個文件。

貳 ❀ 肆 局部文件夾搜索
大家都知道通過search可以全局搜索你想要的結果,但假設現在我就想搜索某個目錄下的匹配的內容該怎麼做呢?我們可以先點擊某個文件夾目錄,然後command/ctrl + F喚醒搜索框,輸入匹配規則,這時候的結果就是你當前選中目錄下的結果。
問題來了,假設目錄下還有目錄,有些結果被藏起來了不方便看怎麼辦呢?這時候點擊搜索框右邊的篩選器按鈕,vscode就會把此目錄下所有匹配的結果單獨領出來展示,具體操作可以下圖:

考慮到搜索框可能會擋住你的搜索內容不利於查看,在1.72.0版本還專門引入了拖動功能,方便你隨意拖動搜索框。

貳 ❀ 伍 粘性滾動
大家有沒有經歷過在一個幾千行代碼的文件滾動時常常不知道當前是在哪個函數上下文中,考慮到這點vscode推出了粘性滾動,我們只用在管理--設置搜索stickyScroll後勾選即可看到效果。


貳 ❀ 陸 允許頁面tab換行
隨着我們處理一個迭代越久,就會發現我們開的文件越來越多tab長長一條,有時候需要頻繁左右滾動選擇文件非常麻煩,但是從1.53版本開始,vscode就支持tab換行展示,我們只需在設置中搜索workbench.editor.wrapTabs之後打勾,你就會發現當文件非常多時它自動換行了。

叄 ❀ 你可能不再需要的插件
早期vscode確實存在一些體驗問題,所以我們常常需要藉助外在三方插件來達到效果。但隨着時間推移,vscode逐漸開始自身支持這些功能,我們完全可以通過簡單配置達到相同效果。是時候來解放你的插件列表了。
叄 ❀ 壹 Bracket Pair Colorizer
Bracket Pair Colorizer可以說是很多前端的心頭肉,利用不同顏色來標記不同括號以及起點到終點的範圍,這對於我們閱讀代碼有很大的幫助。但現在我們只需要在設置中搜索editor.bracketPairColorization.enabled打勾,我們就能默認使用這一特性。在設置後你完全可以卸載Bracket Pair Colorizer插件。
"editor.bracketPairColorization.enabled": true;

叄 ❀ 貳 Auto Rename Tag
這個插件的作用,是在我們修改某個標籤名時,它會自動將尾部的標籤同步更改,這裡我就不貼圖,現在我們一樣能如下配置達到相同效果,所以此插件也到了退休的時候。
"editor.linkedEditing": true
叄 ❀ 叄 Auto Close Tag
此插件的作用長作用於html編寫,當我們寫了<div>它會自動幫你補全閉合標籤,現在vscode也原生支持了此功能,我們只需要去設置中配置如下屬性即可:
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true
叄 ❀ 肆 Trailing Spaces
我們有時候寫代碼可能都不清楚在某一行末尾添加了無效空格,有強迫症的同學可能看到了就得一個個刪除,那麼這個插件的作用就是幫你在保存文件後自動刪除每一行後面無效的空格,不過現在我們也能通過如下配置自動達到相同效果:
"files.trimTrailingWhitespace": true
叄 ❀ 伍 Path Intellisense
npm包引用時常用的路徑自動補全插件,現在vscode已經默認支持此功能,所以你不需要再安裝此插件了。


