適用于 JavaScript 開發(fā)者的 12 款 VSCode 擴(kuò)展工具

淙湘0603 >《python》

2019.01.30

關(guān)注

正文共：2582 字

預(yù)計(jì)閱讀時(shí)間：7 分鐘?

VSCode是一個(gè)開源的跨平臺(tái)編輯器，目前已經(jīng)成為程序員們的最愛，特別是在Web開發(fā)社區(qū)。它速度快，可擴(kuò)展，可定制，并且功能強(qiáng)大。

這里有一些可以日常使用的擴(kuò)展工具：

（這些工具都配有鏈接，由于微信不支持外鏈，請(qǐng)點(diǎn)擊閱讀原文下載）

1.Quokka.js

Quokka.js是一個(gè)用于JavaScript和TypeScript的快速原型開發(fā)平臺(tái)。它會(huì)在你輸入代碼后立即運(yùn)行，并且在代碼編輯器中顯示各種執(zhí)行結(jié)果。

在安裝此擴(kuò)展之后，按Ctrl/Cmd() Shift P來顯示編輯器的命令面板，然后鍵入Quokka查看可用的命令列表。選擇并運(yùn)行New JavaScript File命令，(? K J)直接打開文件。

相似的擴(kuò)展工具 –

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

2.Bracket Pair Colorizer 和Indent Rainbow

Bracket Pair Colorizer和Indent Rainbow是兩種不同的擴(kuò)展，運(yùn)用這些擴(kuò)展可以讓你的編輯器變得非常好看，并使代碼塊更容易識(shí)別。一旦你習(xí)慣了使用它們，你就會(huì)覺得VSCode沒有它們會(huì)非常單調(diào)。

3.Snippets

Snippet你可以輸imr并按Tab鍵來展開此代碼段

import React from 'react';

同樣，console.log變成clg。

很多語言都有片段：Javascript（或任何其他語言），React，Redux，Angular，Vue，Jest。

相似的擴(kuò)展工具 –

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

4.Todo Highlighter

Todo Highlighter以明亮的顏色突出顯示TODO / FIXME或其他注釋。List Highlighted annotations可以列出輸出控制臺(tái)中的所有TODO。

相似的擴(kuò)展工具 –

Todo ?—功能更加強(qiáng)大。
Todo Parser

5.Import Cost

該擴(kuò)展允許你查看導(dǎo)入模塊的大小。這對(duì)像Webpack這樣的bundler來說很有幫助。你可以看到你是在導(dǎo)入整個(gè)庫還是只是一個(gè)特定的工具。

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

6.REST Client

Web開發(fā)人員經(jīng)常需要使用REST API。 REST Client允許發(fā)送HTTP請(qǐng)求并直接在Visual Studio代碼中查看響應(yīng)。

7.Auto Close Tag 和 Auto Rename Tag

隨著React的出現(xiàn)以及它在近幾年的吸引力，類似JSX的HTML的語法現(xiàn)在非常流行。我們又重新使用JavaScript標(biāo)簽進(jìn)行編碼。輸入標(biāo)簽是一件很痛苦的事情，所以需要一種可以快速輕松生成及其子項(xiàng)的工具，Auto Close Tag 和 Auto Rename Tag這兩個(gè)擴(kuò)展工具就非常適合。

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

相似的擴(kuò)展工具 –

Auto Complete Tag—?結(jié)合了自動(dòng)重命名和自動(dòng)關(guān)閉標(biāo)簽功能
Close HTML/XML tag

8.GitLens

GitLens可以增強(qiáng)Visual Studio Code內(nèi)置的Git功能。它還有一些強(qiáng)大的功能。安裝這個(gè)插件后可以幫助你用git做任何工作。

相似的擴(kuò)展工具 –

Git History?—?用好看的圖形顯示提交歷史。
Git Blame—允許在當(dāng)前所選行的狀態(tài)欄中看到Git Blame信息。GitLens也提供了類似的功能。
Git Indicators—允許查看受影響的文件，以及在狀態(tài)欄中添加或刪除的行數(shù)情況。
Open in GitHub / Bitbucket / Gitlab / Visual Studio IDE, Code Editor, VSTS, & App Center !—允許使用單個(gè)命令在瀏覽器中打開repo。

9.Git Project Manager

Git Project Manager (GPM)允許直接從VSCode窗口打開一個(gè)針對(duì)Git存儲(chǔ)庫的新窗口。你可以直接打開另一個(gè)存儲(chǔ)庫而不必離開VSCode。

安裝此擴(kuò)展之后，你需要設(shè)置:

gitProjectManager.baseProjectsFolders

到包含repos的URL列表。

舉例：

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

相似的擴(kuò)展工具 –

Project Manager

10.Indenticator

它可以直觀地突出當(dāng)前縮進(jìn)深度。所以你可以很容易區(qū)分不同層次縮進(jìn)的各個(gè)代碼塊。

相似的擴(kuò)展工具 –

Guides

11.VSCode Icons

使你的編輯更有吸引力。

相似的擴(kuò)展工具 –

VSCode Great Icons
Studio Icons

12.Dracula (Theme)

其他的推薦工具：

Live Server
Prettier for VSCode—?一個(gè)代碼格式化程序。
Settings Sync?—?允許保存用戶設(shè)置、擴(kuò)展和關(guān)鍵字綁定，這樣就可以在幾分鐘內(nèi)設(shè)置一個(gè)新的VSCode。
Multiple clipboards for VSCode?—?覆蓋常規(guī)的“復(fù)制”和“剪切：命令，以保留剪貼板中的選擇。還添加了將多個(gè)文本塊復(fù)制到一個(gè)副本緩沖區(qū)的功能。
Path Intellisense—?自動(dòng)完成文件名的Visual Studio代碼插件。
Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet core的包版本信息。