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

做者：Jsmanifest

譯者：前端小智

來源：medium

---

阿里雲最近在作活動，低至2折，真心以爲很划算了，能夠點擊本條內容或者連接進行參與： promotion.aliyun.com/ntms/yunpar…

騰訊雲最近在作活動，百款雲產品低至 1 折，能夠點擊本條內容或者連接進行參與

---

Visual Studio Code（也稱爲VSCode）是一種輕量級但功能強大的跨平臺源代碼編輯器, 藉助對TypeScript 和Chrome調試器等開發工具的內置支持，愈來愈多的開發都都喜歡使用它。

若是你正在尋找更多的好用的 VsCode 工具，那麼這篇或許可以幫助你。如下是 2019年爲 JS 開發者提供的26個難以想象的VSCode工具。

1. Project Snippets (代碼片斷)

project snippets，這是我最喜歡的一個工具，它來自於 VSCode 中內置的原始用戶代碼片斷。 該特性容許你建立本身的代碼段，以便在整個項目中重用。

可是**「重用」**它們到底意味着什麼？

若是我們常常要重複寫下面這樣的樣板文件：

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook
複製代碼

實際上，我們能夠直接將上面的代碼放到的用戶代碼片斷中，所以沒必要寫出(或複製和粘貼)整個代碼片斷，只需鍵入一個自定義前綴來生成配置的代碼片斷便可。

打開 VsCode，而後選擇 文件 >首選項 > 用戶代碼片斷，則能夠選擇經過單擊 '新建全局代碼片斷文件'來建立新的全局代碼片斷。

例如，要爲 TypeScript React 項目建立本身的代碼片斷文件，能夠單擊新建全局代碼片斷文件，輸入 入typescriptreact.json。它將引導我們訪問一個新建立的.json文件，可使用該文件來構建使用TypeScript 的 React 應用程序。

例如，要從上面的代碼示例建立一個用戶片斷，能夠這樣作:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}
複製代碼

有了它，我們能夠建立一個以.tsx結尾的新TypeScript文件，在新建立的文件輸入rsr，而後按回車或 tab 鍵 Vscode 就會幫我們生成代碼片斷內容。

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}
複製代碼

全局用戶代碼片斷的問題是，它將貫穿我們全部項目(在某些狀況下，這對於通常的代碼片斷來講是很是強大的)。

一些項目將以不一樣的方式配置，當須要區分特定的用例時，用於配置代碼片斷的全局文件就成了一個問題。

例如，當每一個項目的項目結構不一樣時

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}
複製代碼

這對於具備特定file/folder結構的項目可能就足夠了，可是若是我們正在處理另外一個項目，其中Link 組件具備相似components/Link的路徑，該怎麼辦？

請注意這三個border tests是如何將它們的值用單引號括起來的:border: '1px solid red'。

這在 JS 中是徹底有效的，可是若是使用 styled-components做爲項目的樣式解決方案呢?該語法再也不適用於該工做區，由於 styled components使用普通的CSS語法

這就是 project snippets 的亮點所在。

Project snippets使我們能夠聲明項目/工做區級別的代碼段，讓當前項目代碼段不會與其它項目衝突也不會污染其餘項目。

2. Better Comments(更加人性化的註釋)

若是喜歡在代碼中編寫註釋，那麼有時你可能會發現搜索您之前編寫的特定註釋的位置是使人沮喪的，由於代碼可能會變得有些擁擠。

有了Better Comments，能夠經過引入彩色註釋使註釋更加明顯。

3. Bracket Pair Colorizer (標籤匹配 括號匹配插件)

第一次看到Bracket Pair Colorizer的屏幕截圖時，我第一時間入安裝使用了。

4. Material Theme

Material Theme是一個史詩主題，能夠直接安裝到VSCode中，安裝後代碼看起來像這樣：

5. @typescript-eslint/parser

若是你是一個TypeScript用戶，應該開始考慮將你的 TSLint 配置轉移到ESLint + TypeScript上，TSLint 背後的支持者已經宣佈計劃在今年的某個時候棄用 TSLint。

項目正逐步採用@typescript-eslint/parser和相關包，以確保其項目的前瞻性設置。

我們仍然可以利用大部分ESLint的規則和兼容性與更漂亮使用新的設置。

6. Stylelint

對我來講，出於如下幾個緣由，stylelint 在我全部的項目中都是必須的：

1. 它有助於避免錯誤。

2. 它增強了CSS中的樣式約定。

3. 它與Prettier支持並駕齊驅。

4. 它支持 CSS/SCSS/Sass/Less。

5. 它支持社區編寫的插件。

7. Markdownlint + docsify

markdown 愛好者必定要試試 vscode 上的 markdownlint 擴展，會用綠色波浪線給你提示出 N 多不符合書寫規範的地方，好比：

• 標題下面必須是個空行

• 代碼段必須加上類型

• 文中不能出現<br>這種html標號

• URL必須用< >擴起來

同時也能夠配合安裝 docsify，由於它支持Markdown和每一個項目的其餘加強。

8. TODO Highlight

若是習慣在應用程序代碼中編寫待辦事項的開發者，能夠安裝 TODO Highlight 這樣的擴展名對於突出顯示整個項目中設置的待辦事項很是有用。

9. Import Cost

Import Cost 能夠顯示我們在VS代碼編輯器中導入的程序包的大小。

10. Highlight Matching Tag

有時，試圖匹配標籤的結束地方會使人沮喪，這時 Highlight Matching Tag 就派上用場了

11. vscode-spotify

程序員常常邊聽歌邊打代碼，有時候寫到一半，歌太難聽，想切換，得切到音樂播放器，而後在回到 VsCdoe 界面，有點麻煩。

這就 是vscode-spotify 用武功之地，由於它能夠在VSCode內直接使用音樂播放器。

有了這個擴展，各位就能夠在狀態欄中看到當前播放的歌曲，能夠經過熱鍵在歌曲之間切換，也能夠點擊按鈕來控制音樂播放器等等。

12. GraphQL for VSCode

GraphQL一直在發展，我們常常能夠在 JS 社區中看到它的身影。所以，最好開始考慮在 VSCode中安裝 GraphQL for VSCode。

13. Indent-Rainbow

Indent-Rainbow 會給縮進添加一種顏色,讓你更加直觀的看到代碼層次。

14. Color Highlight

Color Highlight 能夠在代碼中突出顯示顏色，以下所示：

15. Color Picker

Color Picker 是一個 VSCode 擴展，它爲我們提供了一個圖形用戶界面，用來選擇和生成顏色代碼，如 CSS 顏色符號。

16. REST Client

第一次看到 REST Client 並嘗試它時，與現有的軟件(如Postman)相比，它彷佛不是一個很是有用的工具。

可是，對 REST Client 擴展的用法瞭解越多，就會意識到它對開發工具的影響有多大，尤爲是在測試API 時。

只須要建立一個新文件寫入下面這一行：

https://google.com
複製代碼

而後轉到命令面板(CTRL + SHIFT + P)，單擊Rest Client: Send request，它會在一瞬間彈出一個包含請求響應詳細信息的新選項卡，很是有用：

甚至還能夠傳遞參數，或將請求體數據請求到POST，而下面僅需幾行代碼：

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "someemail@gmail.com", "password": 1 }
複製代碼

就會發送POST請求，參數爲 { "email": "someemail@gmail.com", "password": 1 }。

17. Settings Sync

vscode上有各類各樣不一樣的插件，若是要在不一樣的電腦上使用 vscode 配置是件比較麻煩的事情，使用 Settings Sync 將 vscode 配置備份起來，當須要在其餘電腦使用 vscode 時只需下載備份的配置就能夠了。

我們只須要一個 GitHub 賬戶，而且每次要保存配置（包括按鍵綁定，代碼片斷，擴展名等）時，只需按SHIFT + ALT + U將私有設置上傳到 GitHub 賬戶便可。 而後，下次登陸或從新格式化爲另外一臺計算機時，能夠按SHIFT + ALT + D組合鍵當即下載配置。

18. Todo Tree

Todo Tree 將幫助我們找到在整個應用程序代碼中建立的全部待辦事項。它將把它們放到一個單獨的樹中，還能夠在面板的左側同時查看它們

19. Toggle Quotes

Toggle Quotes是一個有趣的實用工具擴展，它容許我們在引號之間進行切換。當須要在使用字符串插入時切換到反引號時，它就派上用場了。

20. Better Align

Better Align 對齊賦值符號和註釋。要使用它，將光標放在想要對齊的代碼中，使用CTRL + SHIFT + P打開命令面板(或者使用自定義快捷方式打開命令面板)，而後調用Align 命令。

21. Auto Close Tag

Auto Close Tag自動閉合html標籤。

22. Sort Lines

Sort lines 能夠幫助我們排序選中行。

23. VSCode Google Translate

若是是參與多語言開發的項目，VSCode Google Translate 能夠幫助我們快速切換語言。

24. Prettier

Prettier是VSCode的擴展，可自動格式化JavaScript/TypeScript 等等，使代碼更漂亮。

25. Material Icon Theme

與其餘圖標主題相比，我更喜歡 Material Icon Theme，由於文件類型更爲明顯，尤爲是在使用深色主題。

26. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS Class Names in HTML，基於在工做空間中找到的定義性，並提供了CSS 類名補全。

27. Path Intellisense

Path Intellisense 自動路勁補全。

---

原文：dev.to/jsmanifest/…

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

github.com/qq449245884…

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。

每次整理文章，通常都到2點才睡覺，一週4次左右，挺苦的，還望支持，給點鼓勵