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

作者：Jsmanifest

譯者：前端小智

來源：medium

阿裡雲

雙12

已開啟，新老使用者均可參與，2核1G雲伺服器僅需

79元

，，更多伺服器配置及價格請關注：

Hi拼團

，或點此了解

“雲上爆款1折特惠活動”

。同時，建議在購買阿裡雲相關産品前

先領取阿裡雲2000元代金券

會更優惠哦。

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使咱們可以聲明項目/工作區級别的代碼段，讓目前項目代碼段不會與其它項目沖突也不會污染其他項目。

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

在我所有的項目中都是必須的：

它有助于避免錯誤。
它加強了CSS中的樣式約定。
它與 Prettier 支援并駕齊驅。
它支援 CSS/SCSS/Sass/Less。
它支援社群編寫的插件。

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": "[email protected]", "password": 1 }

就會發送

POST

請求，參數為

{ "email": "[email protected]", "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

是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

自動路勁補全。

原文：

https://dev.to/jsmanifest/26-miraculous-vs-code-tools-for-javascript-developers-in-2019-50gg

交流

幹貨系列文章彙總如下，覺得不錯點個Star，歡迎加群互相學習。

https://github.com/qq449245884/xiaozhi

因為篇幅的限制，今天的分享隻到這裡。如果大家想了解更多的内容的話，可以去掃一掃每篇文章最下面的二維碼，然後關注咱們的微信公衆号，了解更多的資訊和有價值的内容。