這就是我想要的 VSCode 插件!

簡評:VSCode 是一個開源的跨平臺編輯器,是我最滿意的 IDE 之一。本文介紹了幾種使用的插件,確實解決了不少的痛點。

Quokka.jsjavascript

Quokka.js 會在您鍵入代碼編輯器中顯示各類執行結果時當即運行您的代碼。支持 JavaScript 和 TypeScript。java

https://pic1.zhimg.com/v2-c2a...
clipboard.pngreact

相似的 Extension:git

  • Code Runner  --- 支持多種語言例如: C,C++,Java,JavaSript,PHP,Python,Perl,Perl6 等
  • Runner

Bracket Pair Colorizer 和 Indent Rainbowes6

大部分的語言都須要使用括號,可是括號之間的嵌套會讓代碼看得很難受。 Bracket Pair Colorizer 和 Indent Rainbow,這兩個插件可讓不一樣縮減的括號顯示不一樣的顏色。瀏覽器

https://pic1.zhimg.com/80/v2-...
clipboard.png編輯器

https://pic4.zhimg.com/80/v2-...
clipboard.pngide

Snippets工具

Snippets 是一些經常使用的代碼片斷,好比說 import React from 'react'; 這些經常使用的代碼,咱們只須要打 imr 而後按下 tab 鍵就能自動幫咱們補全。一樣的 clg 會變成 console.log。測試

一些不錯的 extension 有

  • JavaScript (ES6) code snippets
  • React-Native/React/Redux snippets for es6/es7
  • React Standard Style code snippets - Visual Studio Marketplace
  • React Standard Style code snippets - Visual Studio Marketplace

TODO 高亮

一般咱們編寫代碼的時候,會以爲當前實現不優雅,有更好的實現方式。咱們會習慣性的加上// TODO: Needs Refactoring 或者其餘內容。不過期間久了咱們就習得一個技能自動忽略 TODO。 Todo Highlighter 這個插件能夠督促你趕忙把這個問題處理了。他會在還有 TODOs / FIXMEs 的地方出現高亮提示。(插件都已經幫到這份上了,以後修行就靠我的了)

https://pic2.zhimg.com/80/v2-...
clipboard.png

相似的 Extension:

  • Todo+
  • Todo Parser

成本提示

Import Cost 這個擴展簡直驚豔到我了,以前寫代碼的時候不多有關注導入包的大小。只有在後期優化的時候才考慮這些問題。可是這個插件能夠在你導入包的時候就提示這個包有多大。

https://pic4.zhimg.com/v2-3a0...
clipboard.png

REST 客戶端

做爲一個 Web 開發,咱們常常須要使用 REST API。爲了檢測 URL 並檢測響應,咱們通常會使用 Postman 這類工具來測試。可是若是使用了 REST Client 這個插件咱們就能夠直接在 VSCode 中來測試咱們的 API 了。

https://pic4.zhimg.com/v2-66f...
clipboard.png

自動補全標籤和聯動重名標籤

在 VSCode 中輸入一半的標籤會自動幫忙補全另外一半,可是若是我後期想修改的話須要就須要兩邊都要改了。 Auto Close Tag 和 Auto Rename Tag 插件能夠很好的解決這個問題。

https://pic4.zhimg.com/v2-85f...
clipboard.png

https://pic4.zhimg.com/v2-983...
clipboard.png

相似的插件:

  • Auto Complete Tag
  • Close HTML/XML tag - Visual Studio Marketplace

GitLens

GitLens 能夠加強 VSCode 內置 Git 的功能。例如 commits 搜索,歷史記錄和顯示的代碼做者身份具體功能能夠查看 Feature List。

https://pic2.zhimg.com/v2-0d2...

相似的 Extension:

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

Git Project Manager

Git Project Manager 容許你直接從 VSCode 窗口打開一個新的窗口。這樣咱們就能夠在 VSCode 中切換倉庫了。

在安裝這個 插件 後,須要設置 gitProjectManager.baseProjectsFolders 包含咱們須要的倉庫。

例如 :

clipboard.png

https://pic3.zhimg.com/v2-277...
clipboard.png

相似的 Extension:

  • Project Manager

Indenticator

indenticator 能夠直觀的突出當前的縮進深度。能夠容易區分不一樣層次的縮進。
https://pic4.zhimg.com/v2-8f3...
clipboard.png

相似的 Extension:

  • Guides
  • Guides - Visual Studio Marketplace

VSCode 圖標

能夠美化編輯器。

https://pic4.zhimg.com/v2-3ed...
clipboard.png

相似的 Extension:

  • VSCode Great Icons
  • Studio Icons
  • Studio Icons - Visual Studio Marketplace

Dracula(主題)

我喜歡的一個主題。

https://pic1.zhimg.com/80/v2-...
clipboard.png

原文: Top JavaScript VSCode Extensions for Faster Development
推薦閱讀: JavaScript 中的優雅模式:RORO
相關文章
相關標籤/搜索