原文：提高 JavaScript 開發(fā)效率的高級 VSCode 擴(kuò)展旭斥！
作者：前端小智
Quokka.js
Quokka.js 是一個(gè)用于 JavaScript 和 TypeScript 的實(shí)時(shí)運(yùn)行代碼平臺医咨。這意味著它會實(shí)時(shí)運(yùn)行你輸入后的代碼搪搏，并在編輯器中顯示各種執(zhí)行結(jié)果洪碳，建議親自嘗試一下。
安裝此擴(kuò)展后叼屠，可以按Ctrl / Cmd（?）+ Shift + P顯示編輯器的命令選項(xiàng)板瞳腌，然后鍵入 Quokka 以查看可用命令的列表。選擇并運(yùn)行 “New JavaScript File”命令镜雨。你也可以按（?+ K + J）直接打開文件纯趋。在此文件中輸入的任何內(nèi)容都會立即執(zhí)行。
Quokka.js類似的擴(kuò)展 –
Code Runner – 支持多種語言冷离，如C，C ++纯命，Java西剥，JavaScript，PHP亿汞，Python瞭空，Perl，Perl 6等疗我。
Runner
括號配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)
花括號和圓括號是許多編程語言不可分割的部分咆畏，在 JavaScript 等語言中，在一屏代碼中花括號和園括號可能有多層嵌套吴裤，有些括號不太容易識別哪個(gè)對應(yīng)哪個(gè)旧找，然而卻沒有簡單的方法來識別這些括號前后的對應(yīng)關(guān)系。
括號配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)麦牺。這是兩個(gè)不同的擴(kuò)展钮蛛。然而，他們就像是一對情侶剖膳，可以完美的配合使用魏颓。這些擴(kuò)展將為你的編輯器添加一系列顏色，并使代碼塊易于辨別吱晒，一旦你習(xí)慣了它們甸饱，如果 VSCode 沒有它們就會讓人覺得很平淡。
不使用括號配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)
使用括號配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)后
snippets(代碼片段)
代碼片段是編輯器中的短代碼仑濒。因此叹话，可以輸入 imr 并按Tab 來展開該代碼片段，而不是'import React from '躏精。類似地渣刷，clg 變成了 console.log。
各種各樣的框架和類庫都有很多代碼片段：Javascript矗烛，React辅柴，Redux箩溃，Angular，Vue碌嘀，Jest涣旨。 我個(gè)人認(rèn)為 Javascript 代碼片段非常有用，因?yàn)槲抑饕褂?JS 股冗。
一些很好的代碼片段擴(kuò)展 –
JavaScript (ES6) code snippets
React-Native/React/Redux snippets for es6/es7
React Standard Style code snippets
TODO高亮
通常在進(jìn)行編碼時(shí)霹陡，你認(rèn)為可能有更好的方法來執(zhí)行相同的操作。這時(shí)你留下注釋// TODO: 需要重構(gòu) 或其他相關(guān)的東西止状。但是你很容易忘記了這個(gè)注釋烹棉，并將你的代碼推送到主版本庫(master) 或者生產(chǎn)環(huán)境(production)。 但是你如果使用 Todo Highlighter（高亮）怯疤，它會高亮的顯示并讓你容易看到這個(gè)注釋浆洗。
它以明亮的顏色突出代碼中的 “TODO/FIXME” 或代碼任何其他注釋，以便始終清晰可見集峦。另外還有一個(gè)很好的功能是 List Highlighted annotations 伏社，它會在控制臺中列出了所有 TODO。
使用 Todo Highlighter（高亮）類似的擴(kuò)展 –
Todo+?—??更強(qiáng)大的 Todo 高亮擴(kuò)展塔淤，具有更多功能摘昌。
Todo Parser
Import Cost
該擴(kuò)展允許您查看導(dǎo)入模塊的大小，它對 Webpack 中的 bundlers 有很大幫助高蜂，你可以查看是導(dǎo)入整個(gè)庫還是只導(dǎo)入特定的實(shí)用程序聪黎。
REST Client
作為 web 開發(fā)人員，我們經(jīng)常需要使用 REST api备恤。為了檢查url和檢查響應(yīng)挺举，使用了 Postman 之類的工具。但是烘跺，既然編輯器可以輕松地完成相同的任務(wù)湘纵，為什么還要使用不同的應(yīng)用程序呢? REST Client 它允許你發(fā)送 HTTP 請求并直接在 Visual Studio 代碼中查看響應(yīng)。
自動(dòng)閉合標(biāo)記(Auto Close Tag)和自動(dòng)重命名標(biāo)記(Auto Rename Tag)
自從React的出現(xiàn)以及它在過去幾年獲得的吸引力以來滤淳，以 JSX 形式出現(xiàn)的類似 html 的語法現(xiàn)在非常流行梧喷。我們還必須使用 JavaScript 標(biāo)簽進(jìn)行編碼。任何web開發(fā)人員都會告訴你脖咐，輸入標(biāo)簽是一件痛苦的事情铺敌。在大多數(shù)情況下，我們需要一個(gè)能夠快速屁擅、輕松地生成標(biāo)簽及其子標(biāo)簽的工具偿凭。Emmet 是 VSCode 中一個(gè)很好的例子，然而派歌，有時(shí)候弯囊，你只是想要一些簡單明了的東西痰哨。例如自動(dòng)更新標(biāo)簽，它在你輸入開始標(biāo)簽時(shí)自動(dòng)生成結(jié)束標(biāo)簽匾嘱。當(dāng)你更改相同的標(biāo)簽時(shí)斤斧，關(guān)閉標(biāo)記會自動(dòng)更改，這兩個(gè)擴(kuò)展就是這樣做的霎烙。
它還適用于JSX和許多其他語言撬讽，如XML，PHP悬垃，Vue游昼，JavaScript，TypeScript尝蠕，TSX酱床。
在這里獲取這兩個(gè)擴(kuò)展 – 自動(dòng)閉合標(biāo)記(Auto Close Tag) 和 自動(dòng)重命名標(biāo)記(Auto Rename Tag)。
類似的擴(kuò)展 –
Auto Complete Tag?—??結(jié)合自動(dòng)重命名和自動(dòng)閉合標(biāo)記的功能趟佃。
Close HTML/XML tag
GitLens
正如其作者所說，GitLens 增強(qiáng)了 Visual Studio Code 中內(nèi)置的 Git 功能昧捷，它包含了許多強(qiáng)大的功能闲昭，例如通過跟蹤代碼顯示的代碼作者，提交搜索靡挥，歷史記錄和GitLens資源管理器序矩。你可以在此處閱讀這些功能的完整說明。
類似的擴(kuò)展 –
Git History?—?顯示提交歷史的精美圖表等等跋破。推薦簸淀。
Git Blame??— 它允許您在狀態(tài)欄中查看當(dāng)前所選行的Git Blame信息。 GitLens也提供了類似的功能毒返。
Git Indicators — 它允許你查看受影響的文件以及狀態(tài)欄中添加或刪除的行數(shù)租幕。
Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它允許您使用單個(gè)命令在瀏覽器中打開repo。
Git項(xiàng)目管理器(Git Project Manager,GPM)
Git項(xiàng)目管理器(Git Project Manager,GPM)允許你直接從 VSCode 窗口打開一個(gè)針對Git存儲庫的新窗口拧簸。 基本上劲绪，你可以打開另一個(gè)存儲庫而無需離開VSCode。
安裝此擴(kuò)展后盆赤，您必須將 gitProjectManager.baseProjectsFolders 設(shè)置為包含 repos 的URL列表贾富。例如：
{ ? ?"gitProjectManager.baseProjectsFolders": [ ? ? ? ?"/home/user/nodeProjects", ? ? ? ?"/home/user/personal/pocs" ? ?]}
類似的擴(kuò)展 –
Project Manager – 我沒有親自使用它，但它有百萬+安裝牺六。所以建議你一定要看一下颤枪。
Indenticator(縮進(jìn)指示器)
它在視覺上突出顯示當(dāng)前的縮進(jìn)個(gè)數(shù)，因此淑际，你可以輕松區(qū)分在不同級別縮進(jìn)的各種代碼塊畏纲。
VSCode Icons
使您的編輯更具吸引力的圖標(biāo)扇住！
類似的擴(kuò)展 –
VSCode Great Icons
Studio Icons
Dracula (Theme)
Dracula 是我最喜歡的主題。
我們可以使用快捷鍵來快速的選擇更換主題霍骄；
首先：按下 Ctrl + k
然后再按下：Ctrl + t
其它推薦
Fira Code?—?帶編程連體字的等寬字體台囱。 愚人碼頭注：clone 項(xiàng)目后，找到 ttf 文件夾读整，然后安裝該文件夾中的字體文件簿训。重新啟動(dòng) VSCode ，選擇TOOLS -> Options -> Fonts and Colors 米间，選擇 Fira Code 即可强品。
Live Server?—?一個(gè)具有靜態(tài)和動(dòng)態(tài)頁面的實(shí)時(shí)重新加載功能的本地開發(fā)服務(wù)器。
EditorConfig for VS Code – 此插件嘗試使用.editorconfig文件中的設(shè)置覆蓋用戶/工作區(qū)設(shè)置屈糊，不需要其他或特定于 vscode 的文件的榛。與任何EditorConfig插件一樣，如果未指定root = true逻锐，EditorConfig將繼續(xù)在項(xiàng)目外部查找.editorconfig文件夫晌。
Prettier for VSCode?—?一個(gè)代碼格式化工具。
Bookmarks – 它可以幫助您在代碼中導(dǎo)航昧诱，輕松快速地在重要位置之間移動(dòng)晓淀。不再需要搜索代碼，它還支持一組選擇命令盏档，允許您選擇書簽線和書簽線之間的區(qū)域凶掰，它對日志文件分析非常有用。
Path Intellisense?—?Visual Studio Code插件蜈亩，可自動(dòng)填充文件名懦窘。
Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm稚配，bower畅涂，dub和dotnet核心的軟件包版本信息。
關(guān)注公眾號【grain先森】道川，回復(fù)關(guān)鍵詞 【18福利】毅戈，獲取為你準(zhǔn)備的年終福利，更多關(guān)鍵詞玩法期待你的探索~
