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

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