27 個提升開發幸福度的 VsCode 外掛

作者：Jsmanifest
譯者：前端小智
來源：medium

Visual Studio Code（也稱為VSCode）是一種輕量級但功能強大的跨平臺原始碼編輯器,  藉助對TypeScript 和Chrome偵錯程式等開發工具的內建支援，越來越多的開發都都喜歡使用它。

如果你正在尋找更多的好用的 VsCode 工具，那麼這篇或許能夠幫助你。以下是 2019年為 JS 開發者提供的26個不可思議的VSCode工具。

1. Project Snippets (程式碼片段)

project snippets，這是我最喜歡的一個工具，它來自於 VSCode 中內建的原始使用者程式碼片段。
該特性允許你建立自己的程式碼段，以便在整個專案中重用。

但是“重用”它們到底意味著什麼？

如果我們們經常要重複寫下面這樣的樣板檔案：

實際上，我們們可以直接將上面的程式碼放到的使用者程式碼片段中，因此不必寫出(或複製和貼上)整個程式碼片段，只需鍵入一個自定義字首來生成配置的程式碼片段即可。

開啟 VsCode，然後選擇 檔案 >首選項 > 使用者程式碼片段，則可以選擇通過單擊 '新建全域性程式碼片段檔案'來建立新的全域性程式碼片段。

例如，要為 TypeScript React 專案建立自己的程式碼片段檔案，可以單擊新建全域性程式碼片段檔案，輸入 入typescriptreact.json。它將引導我們們訪問一個新建立的.json檔案，可以使用該檔案來構建使用TypeScript 的 React 應用程式。

例如，要從上面的程式碼示例建立一個使用者片段，可以這樣做:

有了它，我們們可以建立一個以.tsx結尾的新TypeScript檔案，在新建立的檔案輸入rsr，然後按回車或 tab 鍵 Vscode 就會幫我們們生成程式碼片段內容。

全域性使用者程式碼片段的問題是，它將貫穿我們們所有專案(在某些情況下，這對於一般的程式碼片段來說是非常強大的)。

一些專案將以不同的方式配置，當需要區分特定的用例時，用於配置程式碼片段的全域性檔案就成了一個問題。

例如，當每個專案的專案結構不同時

這對於具有特定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 自動路勁補全。

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

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

延伸閱讀

【TS 演化史-3】標記聯合型別 與 never 型別

【TS 演化史 - 2】基於控制流的型別分析 和 只讀屬性

簡單易懂的 React useState() Hook 指南（長文建議收藏）

14 個拷貝陣列的 JS 技巧