提升 JavaScript 開發效率的高級 VSCode 擴展！

時間 2019-11-29

標籤提升 javascript 開發效率高級 vscode 擴展欄目 JavaScript 简体版

原文原文鏈接

原文：提升 JavaScript 開發效率的高級 VSCode 擴展！
做者：前端小智

Fundebug經受權轉載，版權歸原做者全部。javascript

Quokka.js

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

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

Quokka.js相似的擴展 –java

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

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

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

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

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

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

snippets(代碼片斷)

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

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

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

TODO高亮

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

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

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

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

Import Cost

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

REST Client

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

自動閉合標記(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

GitLens

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

相似的擴展 –

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

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 – 我沒有親自使用它，但它有百萬+安裝。因此建議你必定要看一下。

Indenticator(縮進指示器)

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

VSCode Icons

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

相似的擴展 –

Dracula (Theme)

Dracula 是我最喜歡的主題。

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

首先：按下 Ctrl + k

而後再按下：Ctrl + t

其它推薦

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核心的軟件包版本信息。