這篇文章主要介紹了提升JavaScript開發(fā)效率的VSCode插件有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的網(wǎng)站設計、成都做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有啟東免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

Visual Studio Code（也稱為VSCode）是一種輕量級但功能強大的跨平臺源代碼編輯器,  借助對TypeScript 和Chrome調試器等開發(fā)工具的內置支持，越來越多的開發(fā)都都喜歡使用它。

1. Quokka.js

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

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

Quokka.js類似的擴展 –

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

• Runner

2. 括號配對著色(Bracket Pair Colorizer) 和 彩虹縮進(Indent Rainbow)

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

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

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

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

3. 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

4. TODO高亮

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

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

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

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

• Todo Parser

5. Import Cost

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

6. REST Client

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

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

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

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

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

類似的擴展 –

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

• Close HTML/XML tag

8. GitLens

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

類似的擴展 –

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

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

• Git Indicators — 它允許你查看受影響的文件以及狀態(tài)欄中添加或刪除的行數(shù)。

• Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它允許您使用單個命令在瀏覽器中打開repo。

9. 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 – 我沒有親自使用它，但它有百萬+安裝。所以建議你一定要看一下。

10. Indenticator(縮進指示器)

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

11. VSCode Icons

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

類似的擴展 –

• VSCode Great Icons

• Studio Icons

12. Dracula (Theme)

Dracula 是我最喜歡的主題。

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

首先：按下 Ctrl + k

然后再按下：Ctrl + t

13. 其它推薦

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

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

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

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

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

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

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

14. Material Theme & Icons

這是 VS Code 主題中的重要角色。 作者認為重要的主題是在編輯器中用筆和紙書寫最接近的東西（特別是在使用無對比變體主題時）。 從集成的工具到文本編輯器，你的編輯器看起來幾乎是平的和無縫的。

想象一個史詩般的主題加上史詩般的圖標。 Material Theme Icons 是替換默認 VSCode 圖標的絕佳選擇。設計的大型圖標目錄與主題融為一體，使其更加美觀，這有助于你在資源管理器中輕松找到你的文件。

15. 具有居中布局的禪模式或者勿擾模式 (Zen Mode)

為了讓廣大苦逼碼農(nóng)能夠在coding/docing 時有清晰的思路，代表最廣大碼農(nóng)利益的 VSCode 也加入了“禪模式”。該模式可以在你在頁面編輯文件時啟用，效果是全屏化你的編輯框，然后帶有若隱若現(xiàn)的云霧效果。

打開方式：文件 > 選項 > 設置 > 用戶設置 > 工作臺 > 禪模式

16. 具有連字的字體

文字的風格使閱讀變得簡單方便，你可以使用好看連字的字體使編輯器看起來更友好。 這里是支持連字的6種很好字體 (根據(jù)www.slant.co)

你可以嘗試Fira Code，它非常棒而且是開源的。 以下是引入 Fira Code 后在 VSCode 輥更改該字體的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

具體使用方法可以參考：

vscode中修改字體,使用 Fira Code

提高visual studio使用逼格的連體字(Fira code)以及多行編輯(MixEdit)

17. 彩虹縮進 （indent-rainbow）

縮進風格，這個擴展為文本前面的縮進著色，在每個步驟中交替使用四種不同的顏色。

當然如果需要自定義自己喜歡的顏色，請將以下代碼段復制并粘貼到settings.json 中

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

18. 自定義標題欄

這是一個很棒的視覺調整，改變了不同項目的標題欄顏色，以便輕松識別它們。 如果你處理可能具有相同代碼或文件名的應用程序（例如react-native 應用程序和 React Web應用程序），這非常有用

設置方式：打開方式：文件 > 選項 > 設置 > 工作區(qū)設置

19. Tag Wrapping

如果你不認識 Emmet，那么你可能是一個喜歡打字的人。Emmet 允許你寫入縮寫代碼并返回的相應標記，目前 VSCode 已經(jīng)內置，所以不用配置了。

如果你想了解更多的 Emmet 的簡寫，可以查看 Emmet Cheatsheet

20. 內外平衡

這條建議來自 https://vscodecandothat.com/，作者非常推薦它。

你可以使用balance inward 和balance outward 的 Emmet 命令在 VS 代碼中選擇整個標記。 將這些命令綁定到鍵盤快捷鍵是有幫助的，例如Ctrl + Shift + 向上箭頭用于平衡向外，而Ctrl + Shift +向下箭頭 用于平衡向內。

21. Turbo Console.log()

沒有人喜歡輸入非常長的語句，比如console.log()。這真的很煩人，尤其是當你只想快速輸出一些東西，查看它的值，然后繼續(xù)編碼的時候。如果我告訴你，你可以像 Lucky Luke一樣快速地控制臺記錄任何東西呢?

這是通過名為 Turbo Console Log 的擴展來完成的。它支持對下面一行中的任何變量進行日志記錄，并在代碼結構之后自動添加前綴。你還可以 取消注釋/注釋alt+shift+u / alt+shift+c 為所有由這個擴展添加的console.log()。

此外，你也可以通過alt+shift+d 刪除所有：

22. Live server

這是一個非常棒的擴展，可以幫助你啟動一個本地開發(fā)服務器，為靜態(tài)和動態(tài)頁面提供實時重新加載功能，它對 HTTPS、CORS、自定義本地主機地址和端口等主要特性提供了強大的支持。

如果與 VSCode LiveShare 一起使用，它甚至可以讓你共享本地主機。

23. 使用多個游標 復制/粘貼

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

24. Breadcrumbs（面包屑）

編輯器的內容上方現(xiàn)在有一個被稱為Breadcrumbs 的導航欄，它顯示你的當前位置，并允許在符號和文件之間快速導航。要使用該功能，可使用View > Toggle Breadcrumbs 命令或通過breadcrumbs.enabled 設置啟用。要與其交互，請使用 Focus Breadcrumbs 命令或按Ctrl + Shift + 。

25. Code CLI

代碼有一個強大的命令行界面，允許你控制如何啟動編輯器。你可以通過命令行選項打開文件、安裝擴展名、更改顯示語言和輸出診斷信息。

想象一下，你通過git clone <repo-url> 克隆一個遠程庫，你想要替換你正在使用的當前 VS Code實例。 通過命令code . -r 將在不必離開 CLI 界面的情況下完成這一操作 (在此處了解更多信息)。

26. Polacode

你經(jīng)常會看到帶有定制字體和主題的代碼截屏，如下所示。這是在VS代碼與 x 擴展

我知道 Carbon 也是一種更好，更可定制的替代品。 但是，Polacode 允許你保留在代碼編輯器中并使用你可能已購買的任何專用字體，這些字體在 Carbon 中無法使用。

27. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的快速原型開發(fā)平臺。在你輸入代碼時，它將立即運行你的代碼，并在代碼編輯器中顯示各種執(zhí)行結果。

Quokka 的一個很棒的擴展插件，當你準備技術面試時，你可以輸出每個步驟，而不必在調試器中設置斷點。它還可以幫助您在實際使用之前研究庫的函數(shù)，如 Lodash 或 MomentJS，它甚至可以用于異步調用。

28. WakaTime

如果你想記錄每天編程所花的時間，WakaTime 是一個擴展，它可以幫助記錄和存儲有關編程活動的指標和分析。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“提升JavaScript開發(fā)效率的VSCode插件有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設公司，，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

文章標題：提升JavaScript開發(fā)效率的VSCode插件有哪些-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article8/dgceip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、品牌網(wǎng)站設計、靜態(tài)網(wǎng)站、微信小程序、虛擬主機、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)