vscode常用插件有哪些? VSCode經(jīng)典插件推薦

VSCode 經(jīng)典插件推薦
VSCode 經(jīng)典插件推薦,今天我要介紹的是:能夠在某些領(lǐng)域大幅度提高VS Code使用效率和體驗的工具。能夠取代 VS Code原有功能的工具。對插件 API 的使用別出心裁的工具。
Git 集成
跟Git集成相關(guān)的插件,有如下三個很值得推薦。
GitLens
VS Code中的 Git 體驗在易用性和完整性之間取得了一個不錯的平衡,大部分用戶都能夠使用它完成工作,同時又不會被太多的功能嚇到。但是很多硬核的 Git 用戶肯定會覺得功能還不夠用。包括但不限于:
不能查看某個 commit 中的代碼改動;不能比較兩個 commit 或者 branch,然后閱覽代碼改動;不能查看代碼歷史記錄。
不過 GitLens 這個插件,就彌補上了這個空缺,給硬核用戶提供了一個選擇。同時,這個插件也是我所知的擁有最多配置的插件了。
RemoteHub
GitLens 作者 Eric Amodio 又出一款力作——RemoteHub。安裝這個插件后,當(dāng)你想在本地看某個 GitHub repository的代碼時,你就不需要將代碼 clone 下來了,你可以直接打開這個 repository 相關(guān)的工作區(qū),所有文件、文件夾都是從 GitHub 按需下載下來。如果你連接 GitHub 的網(wǎng)速不錯的話,那么使用體驗可是比 GitHub 網(wǎng)站要好得多。
GitHub Pull Request
除了 Git 支持以外,一個呼聲一直非常高的需求,就是在 VS Code中查看和審核 GitHub 上的 Pull Request。好消息是,VS Code團隊和 GitHub 的 Editor Tools 團隊一起合作,為我們提供了 GitHub Pull Request這個插件。
工作區(qū)
跟 VS Code工作區(qū)相關(guān)的插件,Settings Sync和Project Manager這兩個特別值得一提。
Settings Sync
如何在不同設(shè)備之間同步個人設(shè)置?VS Code自己并沒有提供設(shè)置的同步,但通過 Settings Sync這個插件,你可以將個人設(shè)置同步到 Gist 中。
不過值得注意的是,雖然你的設(shè)置是同步到自己私人的 Gist 中,但是如果你的設(shè)置中有一些隱私信息,像密碼、Token 之類的,還是不要使用此插件比較好。
Project Manager
我們在工作臺的部分,介紹過 VS Code支持多文件夾工作區(qū)(multi-root workspace),以及如何通過快捷鍵在不同的項目之間來回切換。如果你不喜歡 VS Code默認的方式,那么你也可以試試 Project Manager。Project Manager 甚至還有一個專門的視圖來展示所有的項目,非常方便。
編輯器
跟編輯器相關(guān)的插件比較多,以我個人的經(jīng)驗來看,我推薦的如下所述。
Vim
編輯器相關(guān)的插件中最厲害的應(yīng)該就是 Vim 相關(guān)的插件了,VS Code提供了一個 API 保證了 Vim 插件能夠被正確地實現(xiàn)。不過 Vim 插件并不只有一個,下載量最大的,也是我參與的就是 VSCodeVim,它對 Vim keybings 的覆蓋程度非常高。另一個非常受大家歡迎的就是amVim,它的性能也非常不錯。
Rainbow Brackets
不管你是不是寫函數(shù)式語言,當(dāng)你的代碼中有比較多的花括號時,要保證它們對稱可以說是非常困難了。Rainbow Brackets這個插件,為同一對花括號指定一個單獨的配色,這樣你就能夠輕松地一眼看出花括號的配對了。
Indent Rainbow
上面的 Rainbow brackets 是給花括號加上多種顏色,而 Indent Rainbow則是為你的代碼縮進提供顏色上的提示:
這兩個插件有異曲同工之妙,當(dāng)然我還是建議寫代碼的時候,不要有太多的層級。
Pigment
既然說到顏色,就不得不提Pigment 這個插件。在介紹擇色器(Color Picker)的時候我介紹過,VS Code會在每個顏色前面加上一個方塊,用方塊來展示代碼所對應(yīng)的顏色。Pigment 則是將顏色渲染在這段代碼的下面,我自己還是蠻喜歡這種方式的。
Import Cost
JavaScript 經(jīng)常被吐槽的一個地方,就是大家對 npm 庫的使用程度非常高,經(jīng)常為了一個簡單的功能,引入了幾兆甚至十幾兆的 npm 包。Import Cost這個插件,很好地在代碼中給我們以提示,告訴我們引入的某個包,它最終會導(dǎo)致整個項目的大小增加多少。
調(diào)試:Debugger for Chrome
雖然我們并不介紹語言相關(guān)的插件,但是還是有一個調(diào)試相關(guān)的插件值得一提,那就是 Debugger for Chrome。這個插件,允許在 VS Code中調(diào)試前段代碼,這樣你就不需要再使用 Chrome Dev Tools 了。你可以直接在自己的代碼上加上斷點,發(fā)現(xiàn)錯誤后直接修改,非常方便。
其他
還有一些插件,非常實用,但并沒有什么特別的分類,這里我們就一起講講。
Rest Client
我們使用 REST API 的時候,經(jīng)常需要發(fā)送一些樣例數(shù)據(jù)對 API 進行測試,這時我們可以使用 Postman 這類的獨立應(yīng)用,也可以在 VS Code中使用 Rest Client插件,直接在編輯器里發(fā)送 REST 請求。
Code Runner
macOS 用戶對 Code Runner 這個應(yīng)用一定非常熟悉了,你可以使用 Code Runner 快速地書寫代碼并且執(zhí)行,而無需設(shè)置環(huán)境配置工程之類的。VS Code里也有這樣的插件,如果你有類似的需求,可以試一試。
Live Share
Live Share是微軟官方出品的非常強大的服務(wù),通過 Live Share service,你可以將你本地的工作區(qū),直接分享給你的同伴,然后你的同伴就可以直接編輯你的代碼,與你共享代碼調(diào)試、集成終端等等,而無需安裝任何環(huán)境。Atom 也有類似的服務(wù)叫做 Teletype。我工作中每次要和同事 Pair Programming 的時候,就會使用 Live Share。同時 Live Share 服務(wù)還支持語音通訊,不過需要安裝另一個插件 Live Share Audio。
如何分享插件
以上就是我心目中值得推薦的插件了,雖不算多,但是每個都幫助到我的日常工作。如果你覺得這些插件還不能滿足你的日常工作,那你可以試著在插件市場進行找尋。不過,找尋的時候,記得要根據(jù)我們學(xué)習(xí)的知識進行分類搜索:
- 如果你想搜索某個語言的支持,可以查詢語言分類;
- 如果你想為自己的代碼添加代碼審查,可以查看Linters;
- 如果你想使用其他人分享的代碼片段,則可以查看Snippets;
- 如果你想安裝其他人分享的主題,可以查看Themes。
當(dāng)你找到了自己心儀的插件后,并且想分享給你的同事,除了把名字告訴他們外,還有什么別的辦法沒有?
當(dāng)然有!你可以通過在項目的 .vscode 文件夾下,創(chuàng)建一個文件 extensions.json。你很熟悉了,這又是一個 JSON 文件,在這個 JSON 文件里,你只需提供一個鍵(key) recommendations,然后將你想要推薦給這個項目的其他工程師的插件的 ID 們,全部放入到這個數(shù)組中。當(dāng)他們打開這個項目,而且并沒有安裝這些插件時,VS Code就會給他們提示了。
除了在 .vscode/extensions.json 文件推薦插件,如果你在使用多文件夾工作區(qū)(multi-root workspace),也可以在多文件夾工作區(qū)的配置文件里添加如下的設(shè)置:
{ "folders": [ { "path": "vscode" }, { "path": "vscode-docs" } ], "extensions": { "recommendations": [ "eg2.tslint", "dbaeumer.vscode-eslint", "msjsdiag.debugger-for-chrome" ] } }
以上就是VSCode經(jīng)典插件推薦,希望大家喜歡,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
vscode docker插件有什么用? vscode docker插件使用教程
vscode怎么安裝插件? vscode插件的安裝的圖文教程
相關(guān)文章
VSCode終端有哪些快捷鍵操作? vscode終端運行快捷鍵介紹
VSCode終端有哪些快捷鍵操作?今天我們就來看看集成終端里的快捷鍵操作的相關(guān)介紹,詳細請看下文介紹2023-07-20VSCode怎么新增任務(wù)? VSCode創(chuàng)建自定義的任務(wù)技巧
VSCode怎么新增任務(wù)?VSCode中想要自己創(chuàng)建新任務(wù),該怎么操作呢?下面我們就來看看 VSCode創(chuàng)建自定義的任務(wù)技巧2023-07-20VSCode任務(wù)系統(tǒng)配置中的分組和結(jié)果顯示怎么用?
VSCode任務(wù)系統(tǒng)配置中的分組和結(jié)果顯示怎么用?VSCode任務(wù)系統(tǒng)配置中有很多屬性,今天我們就來看看“group” “presentation” 和 “options”,詳細請看下文介紹2023-07-20- VS Codezhong git保存文件提示彈窗怎么顯示?保存文件的時候會有一個彈窗提示,該怎么設(shè)置呢?下面我們就來看看開啟這個功能的技巧2023-07-12
VSCode中g(shù)it怎么取消提取時修剪? VSCode關(guān)閉去取時修剪的技巧
VSCode中g(shù)it怎么取消提取時修剪?經(jīng)常會根據(jù)不同的代碼內(nèi)容設(shè)置更改功能選項,那么用戶想要設(shè)置忽略修剪空白功能的話,下面我們就來看看VSCodeVSCode關(guān)閉去取時修剪的技巧2023-07-08- VSCode中g(shù)it怎么開啟拉標簽?VSCode中想要提取時獲取所有標簽,該怎么操作呢?下面我們就來看看詳細的設(shè)置方法2023-07-08
- VSCode怎么開啟使用圖標渲染面包屑導(dǎo)航項?VSCode中面包屑功能經(jīng)常使用,下面我們就來看看VSCode使用圖標渲染面包屑導(dǎo)航項設(shè)置技巧2023-06-25
VSCode怎么設(shè)置翻頁? VSCode滾動頁面關(guān)閉方法
VSCode怎么設(shè)置翻頁?VSCode編輯代碼的時候,可以開啟和關(guān)閉自動翻頁功能,就是頁面滾動效果,下面我們就來看看VSCode滾動頁面關(guān)閉方法2023-06-25- vscode面包屑是什么?可以快速地瀏覽代碼,在代碼中跳轉(zhuǎn),在長代碼、長文檔中還可以充當(dāng)目錄的功能,下面我們就來看看vscode面包屑的使用技巧2023-06-25
- vs Code怎么設(shè)置面包屑顯示代碼單元?vs Code面包屑想要顯示代碼單元,該怎么設(shè)置呢?下面我們就來看看詳細的教程2023-06-25