使用頂級 VSCode 擴展來加快開發(fā) JavaScript

ZhouAndrew 2019-04-21

展開全文

VSCode 是一個開源的跨平臺編輯器，已經(jīng)成為程序員的最愛，特別是在 Web 開發(fā)社區(qū)。它快速，可擴展，可定制，并具有大量功能。如果你還沒有使用 VSCode ，你應該了解一下。

VSCode 已經(jīng)有了數(shù)千個擴展。我將在這篇文章中列出我日常使用的一些擴展。讓我們開始！

Quokka.js

Quokka.js 是一個用于 JavaScript 和 TypeScript 的實時運行代碼平臺。這意味著它會在你輸入后立即運行您的代碼，并在您的代碼編輯器中顯示各種執(zhí)行結果。建議你親自嘗試一下。

安裝此擴展后，可以按 Ctrl/Cmd(?) + Shift + P 顯示編輯器的命令選項面板，然后鍵入 Quokka 以查看可用命令的列表。選擇并運行 “新建JavaScript文件” 命令。您也可以按（? + K + J）直接打開文件。您在此文件中鍵入的任何內容都會立即執(zhí)行。

Quokka.js

Quokka.js類似的擴展 –

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

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

花括號和園括號是許多編程語言不可分割的部分。在 JavaScript 等語言中，在一屏代碼中花括號和園括號可能有多層嵌套，然而缺沒有簡單的機制來識別這些括號從哪里開始，又在哪里結束對。歡迎使用括號配對著色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)。這是兩個不同的擴展。然而，他們就像是一對情侶，可以完美的配合使用。這些擴展將為您的編輯器添加一系列顏色，并使代碼塊易于辨別和令人愉悅。一旦你習慣了它們，如果 VSCode 沒有它們就會讓人覺得很平淡。

愚人碼頭注：彩虹縮進(Indent Rainbow)擴展為每個縮進層級用四種不同顏色交替著色。

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

使用括號配對著色(Bracket Pair Colorizer) 和彩虹縮進(Indent Rainbow)后

代碼片段(Snippets)

代碼片段(Snippets)就是在編輯器中使用縮寫。例如，你想在編輯中編寫 import React from 'react'; 這樣一段代碼，通過代碼片段(Snippets)，你可以輸入 imr 并按 Tab 鍵來展開此代碼段。同樣，clg 會展開為 console.log。

各種各樣的框架和類庫都有很多代碼片段：Javascript（或任何其他語言），React，Redux，Angular，Vue，Jest。我個人認為 Javascript 代碼片段非常有用，因為我主要使用 JS 。

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

TODO高亮

通常在進行編碼時，你認為可能有更好的方法來執(zhí)行相同的操作。這時你留下注釋// TODO: 需要重構 或其他相關的東西。但是你很容易忘記了這個注釋，并將你的代碼推送到主版本庫(master) 或者生產(chǎn)環(huán)境(production)。但是你如果使用 Todo Highlighter（高亮），這鐘請客就不會發(fā)生。

它以鮮艷的顏色突顯您的 “TODO” / “FIXME” 或代碼中的任何其他注釋，因此它始終清晰可見。另外還有一個很好的功能是 List Highlighted annotations 。它會在控制臺中列出了所有 TODO 。

TODO高亮

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

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

Import Cost(花銷)

Import Cost 允許您查看導入模塊的大小。這對 Webpack 等打包工具來說是一個巨大的幫助。您可以查看是導入整個庫還是僅導入特定實用程序。

不足之處是它不顯示自定義文件或模塊的花銷。

Import Cost

使用 Import Cost

REST Client

作為Web開發(fā)人員，我們經(jīng)常需要使用 REST API。為了檢查URL并檢查響應，使用 Postman 等工具。但是，當編輯器可以輕松完成相同的任務時，為什么還要使用不同的應用程序呢。歡迎使用 REST Client。它允許您在Visual Studio Code中直接發(fā)送 HTTP 請求并查看響應。

REST Client

使用 REST Client

自動閉合標記(Auto Close Tag)和自動重命名標記(Auto Rename Tag)

自從 React 問世以及它在過去幾年中獲得的關注度，類 HTML 的 JSX 語法現(xiàn)在很風靡。我們再次在 JavaScript 代碼中使用使用標記。任何 Web 開發(fā)人員都會告訴您輸入標記很麻煩。在大多數(shù)情況下，我們需要一種能夠快速輕松地生成標簽及其子代的工具。VSCode 中內置的 Emmet 就是一個非常好的例子。但是，有時候，你只想要一些簡單而簡潔的東西。例如自動更新標記，它在您鍵入開始標記時自動生成結束標記。當您更改同一個標記對時，結束標記會自動更改。這兩個擴展就是這樣做的。

它還適用于JSX和許多其他語言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。

在這里獲取這兩個擴展 – 自動閉合標記(Auto Close Tag) 和自動重命名標記(Auto Rename Tag)

Auto Rename Tag

使用 Auto Rename Tag

使用 Auto Close Tag類似的擴展 –

Auto Complete Tag?—??結合自動重命名和自動閉合標記的功能。
Close HTML/XML tag

GitLens

正如其作者所說，GitLens增強了Visual Studio Code中內置的Git功能。它包含了許多強大的功能，例如通過跟蹤代碼顯示的代碼作者，提交搜索，歷史記錄和GitLens資源管理器。您可以在此處閱讀這些功能的完整說明。我只想說你應該安裝這個插件，如果你使用git做任何事情的話。

GitLens

使用GitLens還有其他擴展專注于特定功能。如果 GitLens 感到臃腫或者你不會使用GitLens 的許多功能，那么你可以安裝其他類似的擴展。

類似的擴展 –

Git History?—?顯示提交歷史的精美圖表等等。推薦。
Git Blame — 它允許您在狀態(tài)欄中查看當前所選行的Git Blame信息。 GitLens也提供了類似的功能。
Git Indicators — 它允許您查看受影響的文件以及狀態(tài)欄中添加或刪除的行數(shù)。
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列表。例如：

JavaScript 代碼:

{
"gitProjectManager.baseProjectsFolders": [
"/home/user/nodeProjects",
"/home/user/personal/pocs"
]
}

Git Project Manager

使用 Git Project Manager類似的擴展 –

Project Manager – 我沒有親自使用它，但它有百萬+安裝。所以建議你一定要看一下。

Indenticator(縮進指示器)

Indenticator(縮進指示器) 在視覺上突出顯示當前的縮進深度。因此，現(xiàn)在您可以輕松區(qū)分在不同層次縮進的各種代碼塊。

Indenticator

使用 Indenticator類似的擴展 –

Guides

VSCode Icons

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

VSCode Icons

使用 VSCode Icons類似的擴展 –

Dracula (主題)

Dracula 是我最喜歡的主題。

Dracula 主題

其它推薦

Fira Code?—?帶編程連體字的等寬字體。愚人碼頭注：clone 項目后，找到 ttf 文件夾，然后安裝該文件夾中的字體文件。重新啟動 VSCode ，選擇TOOLS -> Options -> Fonts and Colors ，選擇 Fira Code 即可
Live Server?—?一個具有靜態(tài)和動態(tài)頁面的實時重新加載功能的本地開發(fā)服務器。
EditorConfig for VS Code – 此插件嘗試使用.editorconfig文件中的設置覆蓋用戶/工作區(qū)設置。不需要其他或特定于 vscode 的文件。與任何EditorConfig插件一樣，如果未指定root = true，EditorConfig將繼續(xù)在項目外部查找.editorconfig文件。
Prettier for VSCode?—?一個代碼格式化工具。
Bookmarks – 它可以幫助您在代碼中導航，輕松快速地在重要位置之間移動。不再需要搜索代碼。它還支持一組選擇命令，允許您選擇書簽線和書簽線之間的區(qū)域。它對日志文件分析非常有用。
Settings Sync?—?允許您在 Gist 中保存用戶設置，擴展名和快捷鍵綁定，以便您可以在幾分鐘內設置新的 VSCode。
Multiple clipboards for VSCode?—?覆蓋常規(guī)的“復制”和“剪切”命令，以將選擇保留在剪貼板中。還增加了將幾個文本塊復制到單個復制緩沖區(qū)的功能。
Path Intellisense?—?Visual Studio Code插件，可自動填充文件名。
Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息。