28 個提高開發幸福度的 VsCode 插件

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

雙 1111 拼團低至 85 元，來一塊兒拼團學習搭建本身的博客吧php

服務器如何搭建博客html

1. Quokka.js

Quokka.js 是一個用於 JavaScript 和 TypeScript 的實時運行代碼平臺。這意味着它會實時運行你輸入後的代碼，並在編輯器中顯示各類執行結果，建議親自嘗試一下。前端

安裝此擴展後，能夠按Ctrl / Cmd（⌘）+ Shift + P顯示編輯器的命令選項板，而後鍵入 Quokka 以查看可用命令的列表。選擇並運行「New JavaScript File」命令。你也能夠按（⌘+ K + J）直接打開文件。在此文件中輸入的任何內容都會當即執行。node

Quokka.js相似的擴展 –react

Code Runner – 支持多種語言，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。
Runner

2. 括號配對着色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)

花括號和圓括號是許多編程語言不可分割的部分，在 JavaScript 等語言中，在一屏代碼中花括號和園括號可能有多層嵌套，有些括號不太容易識別哪一個對應哪一個，然而卻沒有簡單的方法來識別這些括號先後的對應關係。ios

括號配對着色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)。這是兩個不一樣的擴展。然而，他們就像是一對情侶，能夠完美的配合使用。這些擴展將爲你的編輯器添加一系列顏色，並使代碼塊易於辨別，一旦你習慣了它們，若是 VSCode 沒有它們就會讓人以爲很平淡。git

不使用括號配對着色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)es6

使用括號配對着色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)後github

3. snippets(代碼片斷)

代碼片斷是編輯器中的短代碼。所以，能夠輸入 imr 並按Tab 來展開該代碼片斷，而不是'import React from '。相似地，clg 變成了 console.log。web

各類各樣的框架和類庫都有不少代碼片斷：Javascript，React，Redux，Angular，Vue，Jest。我我的認爲 Javascript 代碼片斷很是有用，由於我主要使用 JS 。

一些很好的代碼片斷擴展 –

4. TODO高亮

一般在進行編碼時，你認爲可能有更好的方法來執行相同的操做。這時你留下注釋// TODO: 須要重構或其餘相關的東西。可是你很容易忘記了這個註釋，並將你的代碼推送到主版本庫(master) 或者生產環境(production)。可是你若是使用 Todo Highlighter（高亮），它會高亮的顯示並讓你容易看到這個註釋。

它以明亮的顏色突出代碼中的「TODO/FIXME」或代碼任何其餘註釋，以便始終清晰可見。另外還有一個很好的功能是 List Highlighted annotations ，它會在控制檯中列出了全部 TODO。

使用 Todo Highlighter（高亮）相似的擴展 –

Todo+ — 更強大的 Todo 高亮擴展，具備更多功能。
Todo Parser

5. Import Cost

該擴展容許您查看導入模塊的大小，它對 Webpack 中的 bundlers 有很大幫助，你能夠查看是導入整個庫仍是隻導入特定的實用程序。

6. REST Client

做爲 web 開發人員，咱們常常須要使用 REST api。爲了檢查url和檢查響應，使用了 Postman 之類的工具。可是，既然編輯器能夠輕鬆地完成相同的任務，爲何還要使用不一樣的應用程序呢? REST Client 它容許你發送 HTTP 請求並直接在 Visual Studio 代碼中查看響應。

7. 自動閉合標記(Auto Close Tag)和自動重命名標記(Auto Rename Tag)

自從React的出現以及它在過去幾年得到的吸引力以來，以 JSX 形式出現的相似 html 的語法如今很是流行。咱們還必須使用 JavaScript 標籤進行編碼。任何web開發人員都會告訴你，輸入標籤是一件痛苦的事情。在大多數狀況下，咱們須要一個可以快速、輕鬆地生成標籤及其子標籤的工具。Emmet 是 VSCode 中一個很好的例子，然而，有時候，你只是想要一些簡單明瞭的東西。例如自動更新標籤，它在你輸入開始標籤時自動生成結束標籤。當你更改相同的標籤時，關閉標記會自動更改，這兩個擴展就是這樣作的。

它還適用於JSX和許多其餘語言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。

在這裏獲取這兩個擴展 – 自動閉合標記(Auto Close Tag) 和自動重命名標記(Auto Rename Tag)。

相似的擴展 –

Auto Complete Tag — 結合自動重命名和自動閉合標記的功能。
Close HTML/XML tag

8. GitLens

正如其做者所說，GitLens 加強了 Visual Studio Code 中內置的 Git 功能，它包含了許多強大的功能，例如經過跟蹤代碼顯示的代碼做者，提交搜索，歷史記錄和GitLens資源管理器。你能夠在此處閱讀這些功能的完整說明。

相似的擴展 –

Git History — 顯示提交歷史的精美圖表等等。推薦。
Git Blame — 它容許您在狀態欄中查看當前所選行的Git Blame信息。 GitLens也提供了相似的功能。
Git Indicators — 它容許你查看受影響的文件以及狀態欄中添加或刪除的行數。
Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它容許您使用單個命令在瀏覽器中打開repo。

9. Git項目管理器(Git Project Manager,GPM)

Git項目管理器(Git Project Manager,GPM)容許你直接從 VSCode 窗口打開一個針對Git存儲庫的新窗口。基本上，你能夠打開另外一個存儲庫而無需離開VSCode。

安裝此擴展後，您必須將 gitProjectManager.baseProjectsFolders 設置爲包含 repos 的URL列表。例如：

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

相似的擴展 –

Project Manager – 我沒有親自使用它，但它有百萬+安裝。因此建議你必定要看一下。

10. Indenticator(縮進指示器)

它在視覺上突出顯示當前的縮進個數，所以，你能夠輕鬆區分在不一樣級別縮進的各類代碼塊。

11. VSCode Icons

使您的編輯更具吸引力的圖標！

相似的擴展 –

12. Dracula (Theme)

Dracula 是我最喜歡的主題。

咱們可使用快捷鍵來快速的選擇更換主題；

首先：按下 Ctrl + k

而後再按下：Ctrl + t

13. 其它推薦

Fira Code — 帶編程連體字的等寬字體。愚人碼頭注：clone 項目後，找到 ttf 文件夾，而後安裝該文件夾中的字體文件。從新啓動 VSCode ，選擇TOOLS -> Options -> Fonts and Colors ，選擇 Fira Code 便可。
Live Server — 一個具備靜態和動態頁面的實時從新加載功能的本地開發服務器。
EditorConfig for VS Code – 此插件嘗試使用.editorconfig文件中的設置覆蓋用戶/工做區設置，不須要其餘或特定於 vscode 的文件。與任何EditorConfig插件同樣，若是未指定root = true，EditorConfig將繼續在項目外部查找.editorconfig文件。
Prettier for VSCode — 一個代碼格式化工具。
Bookmarks – 它能夠幫助您在代碼中導航，輕鬆快速地在重要位置之間移動。再也不須要搜索代碼，它還支持一組選擇命令，容許您選擇書籤線和書籤線之間的區域，它對日誌文件分析很是有用。
Path Intellisense — Visual Studio Code插件，可自動填充文件名。
Version Lens — 在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息。

14. Material Theme & Icons

這是 VS Code 主題中的重要角色。做者認爲重要的主題是在編輯器中用筆和紙書寫最接近的東西（特別是在使用無對比變體主題時）。從集成的工具到文本編輯器，你的編輯器看起來幾乎是平的和無縫的。

想象一個史詩般的主題加上史詩般的圖標。 Material Theme Icons 是替換默認 VSCode 圖標的絕佳選擇。設計的大型圖標目錄與主題融爲一體，使其更加美觀，這有助於你在資源管理器中輕鬆找到你的文件。

15. 具備居中佈局的禪模式或者勿擾模式 (Zen Mode)

爲了讓廣大苦逼碼農可以在 coding/docing 時有清晰的思路，表明最廣大碼農利益的 VSCode 也加入了「禪模式」。該模式能夠在你在頁面編輯文件時啓用，效果是全屏化你的編輯框，而後帶有若隱若現的雲霧效果。

打開方式：文件 > 首選項 > 設置 > 用戶設置 > 工做臺 > 禪模式

16. 具備連字的字體

文字的風格使閱讀變得簡單方便，你可使用好看連字的字體使編輯器看起來更友好。這裏是支持連字的6種最佳字體 (根據www.slant.co)

你能夠嘗試 Fira Code，它很是棒並且是開源的。如下是引入 Fira Code 後在 VSCode 輥更改該字體的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

具體使用方法能夠參考：

vscode中修改字體,使用 Fira Code

提升visual studio使用逼格的連體字(Fira code)以及多行編輯(MixEdit)

17. 彩虹縮進（indent-rainbow）

縮進風格，這個擴展爲文本前面的縮進着色，在每一個步驟中交替使用四種不一樣的顏色。

固然若是須要自定義本身喜歡的顏色，請將如下代碼段複製並粘貼到 settings.json 中

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

18. 自定義標題欄

這是一個很棒的視覺調整，改變了不一樣項目的標題欄顏色，以便輕鬆識別它們。若是你處理可能具備相同代碼或文件名的應用程序（例如react-native 應用程序和 React Web應用程序），這很是有用

設置方式：打開方式：文件 > 首選項 > 設置 > 工做區設置

19. Tag Wrapping

若是你不認識 Emmet，那麼你多是一個喜歡打字的人。Emmet 容許你寫入縮寫代碼並返回的相應標記，目前 VSCode 已經內置，因此不用配置了。

若是你想了解更多的 Emmet 的簡寫，能夠查看 Emmet Cheatsheet

20. 內外平衡

這條建議來自 https://vscodecandothat.com/，做者很是推薦它。

你可使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代碼中選擇整個標記。將這些命令綁定到鍵盤快捷鍵是有幫助的，例如 Ctrl + Shift + 向上箭頭用於平衡向外，而 Ctrl + Shift +向下箭頭 用於平衡向內。

21. Turbo Console.log()

沒有人喜歡輸入很是長的語句，好比 console.log()。這真的很煩人，尤爲是當你只想快速輸出一些東西，查看它的值，而後繼續編碼的時候。若是我告訴你，你能夠像 Lucky Luke同樣快速地控制檯記錄任何東西呢?

這是經過名爲 Turbo Console Log 的擴展來完成的。它支持對下面一行中的任何變量進行日誌記錄，並在代碼結構以後自動添加前綴。你還能夠取消註釋/註釋 alt+shift+u / alt+shift+c 爲全部由這個擴展添加的 console.log()。

此外，你也能夠經過 alt+shift+d 刪除全部：

22. Live server

這是一個很是棒的擴展，能夠幫助你啓動一個本地開發服務器，爲靜態和動態頁面提供實時從新加載功能，它對 HTTPS、CORS、自定義本地主機地址和端口等主要特性提供了強大的支持。

若是與 VSCode LiveShare 一塊兒使用，它甚至可讓你共享本地主機。

23. 使用多個遊標複製/粘貼

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

24. Breadcrumbs（麪包屑）

編輯器的內容上方如今有一個被稱爲 Breadcrumbs 的導航欄，它顯示你的當前位置，並容許在符號和文件之間快速導航。要使用該功能，可以使用 View > Toggle Breadcrumbs 命令或經過 breadcrumbs.enabled 設置啓用。要與其交互，請使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。

25. Code CLI

代碼有一個強大的命令行界面，容許你控制如何啓動編輯器。你能夠經過命令行選項打開文件、安裝擴展名、更改顯示語言和輸出診斷信息。

想象一下，你經過 git clone <repo-url> 克隆一個遠程庫，你想要替換你正在使用的當前 VS Code實例。經過命令 code . -r 將在沒必要離開 CLI 界面的狀況下完成這一操做 (在此處瞭解更多信息)。

26. Polacode

你常常會看到帶有定製字體和主題的代碼截屏，以下所示。這是在VS代碼與 x 擴展

我知道 Carbon 也是一種更好，更可定製的替代品。可是，Polacode 容許你保留在代碼編輯器中並使用你可能已購買的任何專用字體，這些字體在 Carbon 中沒法使用。

27. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的快速原型開發平臺。在你輸入代碼時，它將當即運行你的代碼，並在代碼編輯器中顯示各類執行結果。

Quokka 的一個很棒的擴展插件，當你準備技術面試時，你能夠輸出每一個步驟，而沒必要在調試器中設置斷點。它還能夠幫助您在實際使用以前研究庫的函數，如 Lodash 或 MomentJS，它甚至能夠用於異步調用。

28. WakaTime

若是你想記錄天天編程所花的時間，WakaTime 是一個擴展，它能夠幫助記錄和存儲有關編程活動的指標和分析。

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq44924588... 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

本文同步分享在博客「前端小智」（SegmentFault）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

28 個提高開發幸福度的 VsCode 插件

1. Quokka.js

2. 括號配對着色(Bracket Pair Colorizer) 和 彩虹縮進(Indent Rainbow)

3. snippets(代碼片斷)

4. TODO高亮

5. Import Cost

6. REST Client

7. 自動閉合標記(Auto Close Tag)和自動重命名標記(Auto Rename Tag)

8. GitLens

9. Git項目管理器(Git Project Manager,GPM)

10. Indenticator(縮進指示器)

11. VSCode Icons

12. Dracula (Theme)

13. 其它推薦

14. Material Theme & Icons

15. 具備居中佈局的禪模式或者勿擾模式 (Zen Mode)

16. 具備連字的字體

17. 彩虹縮進 （indent-rainbow）

18. 自定義標題欄

19. Tag Wrapping

20. 內外平衡

21. Turbo Console.log()

22. Live server

23. 使用多個遊標 複製/粘貼

24. Breadcrumbs（麪包屑）

25. Code CLI

26. Polacode

27. Quokka (JS/TS ScratchPad)

28. WakaTime

交流

2. 括號配對着色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)

17. 彩虹縮進（indent-rainbow）

23. 使用多個遊標複製/粘貼