VSCode 經典插件推薦

VSCode 經典插件推薦，今天我要介紹的是：能夠在某些領域大幅度提高VS Code使用效率和體驗的工具。能夠取代 VS Code原有功能的工具。對插件 API 的使用別出心裁的工具。

Visual Studio Code(代碼編輯器) v1.83.1 32位 官方中文免費綠色版

• 類型：編譯工具
• 大?。?/span>120MB
• 語言：簡體中文
• 時間：2023-10-13

查看詳情

Git 集成

跟Git集成相關的插件，有如下三個很值得推薦。

GitLens

VS Code中的 Git 體驗在易用性和完整性之間取得了一個不錯的平衡，大部分用戶都能夠使用它完成工作，同時又不會被太多的功能嚇到。但是很多硬核的 Git 用戶肯定會覺得功能還不夠用。包括但不限于：

不能查看某個 commit 中的代碼改動；不能比較兩個 commit 或者 branch，然后閱覽代碼改動；不能查看代碼歷史記錄。

不過 GitLens 這個插件，就彌補上了這個空缺，給硬核用戶提供了一個選擇。同時，這個插件也是我所知的擁有最多配置的插件了。

RemoteHub

GitLens 作者 Eric Amodio 又出一款力作——RemoteHub。安裝這個插件后，當你想在本地看某個 GitHub repository的代碼時，你就不需要將代碼 clone 下來了，你可以直接打開這個 repository 相關的工作區(qū)，所有文件、文件夾都是從 GitHub 按需下載下來。如果你連接 GitHub 的網速不錯的話，那么使用體驗可是比 GitHub 網站要好得多。

GitHub Pull Request

除了 Git 支持以外，一個呼聲一直非常高的需求，就是在 VS Code中查看和審核 GitHub 上的 Pull Request。好消息是，VS Code團隊和 GitHub 的 Editor Tools 團隊一起合作，為我們提供了 GitHub Pull Request這個插件。

工作區(qū)

跟 VS Code工作區(qū)相關的插件，Settings Sync和Project Manager這兩個特別值得一提。

Settings Sync

如何在不同設備之間同步個人設置？VS Code自己并沒有提供設置的同步，但通過 Settings Sync這個插件，你可以將個人設置同步到 Gist 中。

不過值得注意的是，雖然你的設置是同步到自己私人的 Gist 中，但是如果你的設置中有一些隱私信息，像密碼、Token 之類的，還是不要使用此插件比較好。

Project Manager

我們在工作臺的部分，介紹過 VS Code支持多文件夾工作區(qū)（multi-root workspace），以及如何通過快捷鍵在不同的項目之間來回切換。如果你不喜歡 VS Code默認的方式，那么你也可以試試 Project Manager。Project Manager 甚至還有一個專門的視圖來展示所有的項目，非常方便。

編輯器

跟編輯器相關的插件比較多，以我個人的經驗來看，我推薦的如下所述。

Vim

編輯器相關的插件中最厲害的應該就是 Vim 相關的插件了，VS Code提供了一個 API 保證了 Vim 插件能夠被正確地實現(xiàn)。不過 Vim 插件并不只有一個，下載量最大的，也是我參與的就是 VSCodeVim，它對 Vim keybings 的覆蓋程度非常高。另一個非常受大家歡迎的就是amVim，它的性能也非常不錯。

Rainbow Brackets

不管你是不是寫函數式語言，當你的代碼中有比較多的花括號時，要保證它們對稱可以說是非常困難了。Rainbow Brackets這個插件，為同一對花括號指定一個單獨的配色，這樣你就能夠輕松地一眼看出花括號的配對了。

Indent Rainbow

上面的 Rainbow brackets 是給花括號加上多種顏色，而 Indent Rainbow則是為你的代碼縮進提供顏色上的提示：

這兩個插件有異曲同工之妙，當然我還是建議寫代碼的時候，不要有太多的層級。

Pigment

既然說到顏色，就不得不提Pigment 這個插件。在介紹擇色器（Color Picker）的時候我介紹過，VS Code會在每個顏色前面加上一個方塊，用方塊來展示代碼所對應的顏色。Pigment 則是將顏色渲染在這段代碼的下面，我自己還是蠻喜歡這種方式的。

Import Cost

JavaScript 經常被吐槽的一個地方，就是大家對 npm 庫的使用程度非常高，經常為了一個簡單的功能，引入了幾兆甚至十幾兆的 npm 包。Import Cost這個插件，很好地在代碼中給我們以提示，告訴我們引入的某個包，它最終會導致整個項目的大小增加多少。

調試：Debugger for Chrome

雖然我們并不介紹語言相關的插件，但是還是有一個調試相關的插件值得一提，那就是 Debugger for Chrome。這個插件，允許在 VS Code中調試前段代碼，這樣你就不需要再使用 Chrome Dev Tools 了。你可以直接在自己的代碼上加上斷點，發(fā)現(xiàn)錯誤后直接修改，非常方便。

其他

還有一些插件，非常實用，但并沒有什么特別的分類，這里我們就一起講講。

Rest Client

我們使用 REST API 的時候，經常需要發(fā)送一些樣例數據對 API 進行測試，這時我們可以使用 Postman 這類的獨立應用，也可以在 VS Code中使用 Rest Client插件，直接在編輯器里發(fā)送 REST 請求。

Code Runner

macOS 用戶對 Code Runner 這個應用一定非常熟悉了，你可以使用 Code Runner 快速地書寫代碼并且執(zhí)行，而無需設置環(huán)境配置工程之類的。VS Code里也有這樣的插件，如果你有類似的需求，可以試一試。

Live Share

Live Share是微軟官方出品的非常強大的服務，通過 Live Share service，你可以將你本地的工作區(qū)，直接分享給你的同伴，然后你的同伴就可以直接編輯你的代碼，與你共享代碼調試、集成終端等等，而無需安裝任何環(huán)境。Atom 也有類似的服務叫做 Teletype。我工作中每次要和同事 Pair Programming 的時候，就會使用 Live Share。同時 Live Share 服務還支持語音通訊，不過需要安裝另一個插件 Live Share Audio。

如何分享插件

以上就是我心目中值得推薦的插件了，雖不算多，但是每個都幫助到我的日常工作。如果你覺得這些插件還不能滿足你的日常工作，那你可以試著在插件市場進行找尋。不過，找尋的時候，記得要根據我們學習的知識進行分類搜索：

• 如果你想搜索某個語言的支持，可以查詢語言分類；
• 如果你想為自己的代碼添加代碼審查，可以查看Linters；
• 如果你想使用其他人分享的代碼片段，則可以查看Snippets；
• 如果你想安裝其他人分享的主題，可以查看Themes。

當你找到了自己心儀的插件后，并且想分享給你的同事，除了把名字告訴他們外，還有什么別的辦法沒有？

當然有！你可以通過在項目的 .vscode 文件夾下，創(chuàng)建一個文件 extensions.json。你很熟悉了，這又是一個 JSON 文件，在這個 JSON 文件里，你只需提供一個鍵（key） recommendations，然后將你想要推薦給這個項目的其他工程師的插件的 ID 們，全部放入到這個數組中。當他們打開這個項目，而且并沒有安裝這些插件時，VS Code就會給他們提示了。

除了在 .vscode/extensions.json 文件推薦插件，如果你在使用多文件夾工作區(qū)（multi-root workspace），也可以在多文件夾工作區(qū)的配置文件里添加如下的設置：

{
    "folders": [
        {
            "path": "vscode"
        },
        {
            "path": "vscode-docs"
        }
    ],
    "extensions": {
        "recommendations": [
            "eg2.tslint",
            "dbaeumer.vscode-eslint",
            "msjsdiag.debugger-for-chrome"
        ]
    }
}

以上就是VSCode經典插件推薦，希望大家喜歡，請繼續(xù)關注腳本之家。

相關推薦：

vscode docker插件有什么用? vscode docker插件使用教程

vscode怎么安裝插件? vscode插件的安裝的圖文教程

vscode插件怎么刪除? 完全卸載vscode插件的技巧