提高 JavaScript 開發效率的高級 VSCode 擴展！

zhigoo 發布于2019-08-23 14:00 / 1088人閱讀

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

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

Quokka.js

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

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

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 沒有它們就會讓人覺得很平淡。

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

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

snippets(代碼片段)

代碼片段是編輯器中的短代碼。因此，可以輸入 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

TODO高亮

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

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

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

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

Todo Parser

Import Cost

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

REST Client

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

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

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

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

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

類似的擴展 –

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

Close HTML/XML tag

GitLens

正如其作者所說，GitLens 增強了 Visual Studio Code 中內置的 Git 功能，它包含了許多強大的功能，例如通過跟蹤代碼顯示的代碼作者，提交搜索，歷史記錄和GitLens資源管理器。你可以在此處閱讀這些功能的完整說明。

類似的擴展 –

Git History?—?顯示提交歷史的精美圖表等等。推薦。

Git Blame??— 它允許您在狀態欄中查看當前所選行的Git Blame信息。 GitLens也提供了類似的功能。

Git Indicators — 它允許你查看受影響的文件以及狀態欄中添加或刪除的行數。

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列表。例如：

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

類似的擴展 –

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

Indenticator(縮進指示器)

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

VSCode Icons

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

類似的擴展 –

VSCode Great Icons

Studio Icons

Dracula (Theme)

Dracula 是我最喜歡的主題。

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

首先：按下 Ctrl + k

然后再按下：Ctrl + t

其它推薦

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

Live Server?—?一個具有靜態和動態頁面的實時重新加載功能的本地開發服務器。

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

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

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

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

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

編輯中可能存在的bug沒法實時知道，事后為了解決這些bug,花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具Fundebug。

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

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

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎加群互相學習。

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

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

關注公眾號，后臺回復福利，即可看到福利，你懂的。

云服務器 GPU云服務器 javascript高級開發提高效率提高編程效率提高工作效率

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99915.html

提高 JavaScript 開發效率的高級 VSCode 擴展之二！

摘要：將這些命令綁定到鍵盤快捷鍵是有幫助的，例如向上箭頭用于平衡向外，而向下箭頭用于平衡向內。是和的快速原型開發平臺。本系列的第一篇可以在這里看到：提高 JavaScript 開發效率的高級 VSCode 擴展！ showImg(https://segmentfault.com/img/bVbnn2j?w=1254&h=768); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質...

cyrils 2019-08-23 14:48 評論0 收藏0
一些你所不知道的VS Code插件

摘要：摘要你所不知道的系列。允許你寫入縮寫代碼并返回的相應標記，目前已經內置，所以不用配置了。自從年雙十一正式上線，累計處理了億錯誤事件，付費客戶有金山軟件百姓網等眾多品牌企業。摘要：你所不知道的系列。原文：提高 JavaScript 開發效率的高級 VSCode 擴展之二！作者：前端小智 Fundebug經授權轉載，版權歸原作者所有。作為一名業余愛好者、專業人員，甚至是每月只有一次編...

Near_Li 2019-05-22 12:00 評論0 收藏0
能讓你開發效率翻倍的 VSCode 插件配置（上）

摘要：如果編輯器在編碼時實時給出反饋，對開發者個人而言才是最高效的，在提交時做強制檢查只是從團隊的視角保證編碼風格的規范性和一致性。工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來，先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現在...

feng409 2019-08-21 17:36 評論0 收藏0
能讓你開發效率翻倍的 VSCode 插件配置（上）

摘要：如果編輯器在編碼時實時給出反饋，對開發者個人而言才是最高效的，在提交時做強制檢查只是從團隊的視角保證編碼風格的規范性和一致性。工欲善其事必先利其器，軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來，先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現在...

AlanKeene 2019-06-28 10:24 評論0 收藏0
如何更有效率和質量地開發Vue項目

摘要：前言自總結完了上篇前端工程化的思想，并在全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發項目，以及其中踩過的一個個坑。。。前言自總結完了上篇前端工程化的思想，并在vue全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發vue項目，以及其中踩過的一個個坑。。。基于vue-cli的自定義模板（Custom Templates）小伙伴們的vue項目應該都...

ShevaKuilin 2019-08-20 18:15 評論0 收藏0