正文共：2582 字
預(yù)計閱讀時間：7 分鐘?
VSCode是一個開源的跨平臺編輯器，目前已經(jīng)成為程序員們的最愛，特別是在Web開發(fā)社區(qū)。它速度快，可擴展，可定制，并且功能強大。
這里有一些可以日常使用的擴展工具：
（這些工具都配有鏈接，由于微信不支持外鏈，請點擊閱讀原文下載）
1.Quokka.js
Quokka.js是一個用于JavaScript和TypeScript的快速原型開發(fā)平臺。它會在你輸入代碼后立即運行，并且在代碼編輯器中顯示各種執(zhí)行結(jié)果。
在安裝此擴展之后，按Ctrl/Cmd() Shift P來顯示編輯器的命令面板，然后鍵入Quokka查看可用的命令列表。選擇并運行New JavaScript File命令，(? K J)直接打開文件。
相似的擴展工具 –
Code Runner - 支持多種語言，如C，C ，Java，JavaScript，PHP，Python，Perl，Perl 6等。
Runner
2.Bracket Pair Colorizer 和Indent Rainbow
Bracket Pair Colorizer和Indent Rainbow是兩種不同的擴展，運用這些擴展可以讓你的編輯器變得非常好看，并使代碼塊更容易識別。一旦你習(xí)慣了使用它們，你就會覺得VSCode沒有它們會非常單調(diào)。
使用前
使用后
3.Snippets
Snippet你可以輸imr并按Tab鍵來展開此代碼段
import React from 'react';
同樣，console.log變成clg。
很多語言都有片段：Javascript（或任何其他語言），React，Redux，Angular，Vue，Jest。
相似的擴展工具 –
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可以列出輸出控制臺中的所有TODO。
Todo Highlighter
相似的擴展工具 –
Todo ?—功能更加強大。
Todo Parser
5.Import Cost
該擴展允許你查看導(dǎo)入模塊的大小。這對像Webpack這樣的bundler來說很有幫助。你可以看到你是在導(dǎo)入整個庫還是只是一個特定的工具。
Import Cost
不足之處是它不顯示自定義文件或模塊的成本。
6.REST Client
Web開發(fā)人員經(jīng)常需要使用REST API。 REST Client允許發(fā)送HTTP請求并直接在Visual Studio代碼中查看響應(yīng)。
REST Client
7.Auto Close Tag 和 Auto Rename Tag
隨著React的出現(xiàn)以及它在近幾年的吸引力，類似JSX的HTML的語法現(xiàn)在非常流行。我們又重新使用JavaScript標(biāo)簽進行編碼。輸入標(biāo)簽是一件很痛苦的事情，所以需要一種可以快速輕松生成及其子項的工具，Auto Close Tag 和 Auto Rename Tag這兩個擴展工具就非常適合。
它也適用于JSX和許多其他的語言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。
Auto Rename Tag
Auto Close Tag
相似的擴展工具 –
Auto Complete Tag—?結(jié)合了自動重命名和自動關(guān)閉標(biāo)簽功能
Close HTML/XML tag
8.GitLens
GitLens可以增強Visual Studio Code內(nèi)置的Git功能。它還有一些強大的功能。安裝這個插件后可以幫助你用git做任何工作。
相似的擴展工具 –
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 !—允許使用單個命令在瀏覽器中打開repo。
9.Git Project Manager
Git Project Manager (GPM)允許直接從VSCode窗口打開一個針對Git存儲庫的新窗口。你可以直接打開另一個存儲庫而不必離開VSCode。
安裝此擴展之后，你需要設(shè)置:
gitProjectManager.baseProjectsFolders
到包含repos的URL列表。
舉例：
{ 'gitProjectManager.baseProjectsFolders': [ '/home/user/nodeProjects', '/home/user/personal/pocs' ]}
Git Project Manager
相似的擴展工具 –
Project Manager
10.Indenticator
它可以直觀地突出當(dāng)前縮進深度。所以你可以很容易區(qū)分不同層次縮進的各個代碼塊。
Indenticator
相似的擴展工具 –
Guides
11.VSCode Icons
使你的編輯更有吸引力。
VSCode Icons
相似的擴展工具 –
VSCode Great Icons
Studio Icons
12.Dracula (Theme)
Dracula theme
其他的推薦工具：
Live Server
Prettier for VSCode—?一個代碼格式化程序。
Settings Sync?—?允許保存用戶設(shè)置、擴展和關(guān)鍵字綁定，這樣就可以在幾分鐘內(nèi)設(shè)置一個新的VSCode。
Multiple clipboards for VSCode?—?覆蓋常規(guī)的“復(fù)制”和“剪切：命令，以保留剪貼板中的選擇。還添加了將多個文本塊復(fù)制到一個副本緩沖區(qū)的功能。
Path Intellisense—?自動完成文件名的Visual Studio代碼插件。
Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet core的包版本信息。
聯(lián)系客服
