摘要：使用高亮類似的擴展更強大的高亮擴展，具有更多功能。為了檢查和檢查響應(yīng)，使用了之類的工具。在這里獲取這兩個擴展自動閉合標記和自動重命名標記。類似的擴展顯示提交歷史的精美圖表等等。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

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

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

Quokka.js類似的擴展 –

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

Runner

花括號和圓括號是許多編程語言不可分割的部分，在 JavaScript 等語言中，在一屏代碼中花括號和園括號可能有多層嵌套，有些括號不太容易識別哪個對應(yīng)哪個，然而卻沒有簡單的方法來識別這些括號前后的對應(yīng)關(guān)系。

括號配對著色(Bracket Pair Colorizer) 和 彩虹縮進(Indent Rainbow)。這是兩個不同的擴展。然而，他們就像是一對情侶，可以完美的配合使用。這些擴展將為你的編輯器添加一系列顏色，并使代碼塊易于辨別，一旦你習(xí)慣了它們，如果 VSCode 沒有它們就會讓人覺得很平淡。

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

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

代碼片段是編輯器中的短代碼。因此，可以輸入 imr 并按Tab 來展開該代碼片段，而不是"import React from "。類似地，clg 變成了 console.log。

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

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

JavaScript (ES6) code snippets

React-Native/React/Redux snippets for es6/es7

React Standard Style code snippets

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

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

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

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

Todo Parser

該擴展允許您查看導(dǎo)入模塊的大小，它對 Webpack 中的 bundlers 有很大幫助，你可以查看是導(dǎo)入整個庫還是只導(dǎo)入特定的實用程序。

作為 web 開發(fā)人員，我們經(jīng)常需要使用 REST api。為了檢查url和檢查響應(yīng)，使用了 Postman 之類的工具。但是，既然編輯器可以輕松地完成相同的任務(wù)，為什么還要使用不同的應(yīng)用程序呢? REST Client 它允許你發(fā)送 HTTP 請求并直接在 Visual Studio 代碼中查看響應(yīng)。

自從React的出現(xiàn)以及它在過去幾年獲得的吸引力以來，以 JSX 形式出現(xiàn)的類似 html 的語法現(xiàn)在非常流行。我們還必須使用 JavaScript 標簽進行編碼。任何web開發(fā)人員都會告訴你，輸入標簽是一件痛苦的事情。在大多數(shù)情況下，我們需要一個能夠快速、輕松地生成標簽及其子標簽的工具。Emmet 是 VSCode 中一個很好的例子，然而，有時候，你只是想要一些簡單明了的東西。例如自動更新標簽，它在你輸入開始標簽時自動生成結(jié)束標簽。當你更改相同的標簽時，關(guān)閉標記會自動更改，這兩個擴展就是這樣做的。

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

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

類似的擴展 –

Auto Complete Tag?—??結(jié)合自動重命名和自動閉合標記的功能。

Close HTML/XML tag

正如其作者所說，GitLens 增強了 Visual Studio Code 中內(nèi)置的 Git 功能，它包含了許多強大的功能，例如通過跟蹤代碼顯示的代碼作者，提交搜索，歷史記錄和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)允許你直接從 VSCode 窗口打開一個針對Git存儲庫的新窗口。 基本上，你可以打開另一個存儲庫而無需離開VSCode。

安裝此擴展后，您必須將 gitProjectManager.baseProjectsFolders 設(shè)置為包含 repos 的URL列表。例如：

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

類似的擴展 –

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

它在視覺上突出顯示當前的縮進個數(shù)，因此，你可以輕松區(qū)分在不同級別縮進的各種代碼塊。

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

類似的擴展 –

VSCode Great Icons

Studio Icons

Dracula 是我最喜歡的主題。

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

首先：按下 Ctrl + k

然后再按下：Ctrl + t

Fira Code?—?帶編程連體字的等寬字體。 愚人碼頭注：clone 項目后，找到 ttf 文件夾，然后安裝該文件夾中的字體文件。重新啟動 VSCode ，選擇TOOLS -> Options -> Fonts and Colors ，選擇 Fira Code 即可。

Live Server?—?一個具有靜態(tài)和動態(tài)頁面的實時重新加載功能的本地開發(fā)服務(wù)器。

EditorConfig for VS Code – 此插件嘗試使用.editorconfig文件中的設(shè)置覆蓋用戶/工作區(qū)設(shè)置，不需要其他或特定于 vscode 的文件。與任何EditorConfig插件一樣，如果未指定root = true，EditorConfig將繼續(xù)在項目外部查找.editorconfig文件。

Prettier for VSCode?—?一個代碼格式化工具。

Bookmarks – 它可以幫助您在代碼中導(dǎo)航，輕松快速地在重要位置之間移動。不再需要搜索代碼，它還支持一組選擇命令，允許您選擇書簽線和書簽線之間的區(qū)域，它對日志文件分析非常有用。

Path Intellisense?—?Visual Studio Code插件，可自動填充文件名。

Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息。

編輯中可能存在的bug沒法實時知道，事后為了解決這些bug,花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具Fundebug。

原文：https://codeburst.io/top-java...

你的點贊是我持續(xù)分享好東西的動力，歡迎點贊！

干貨系列文章匯總?cè)缦拢X得不錯點個Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術(shù)保持學(xué)習(xí)愛好者。我會經(jīng)常分享自己所學(xué)所看的干貨，在進階的路上，共勉！

關(guān)注公眾號，后臺回復(fù)福利，即可看到福利，你懂的。