提升JavaScript開發(fā)效率的VSCode插件有哪些-創(chuàng)新互聯(lián)

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

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

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

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

2. 括號配對著色(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)后

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

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

5. Import Cost

該擴(kuò)展允許您查看導(dǎo)入模塊的大小，它對 Webpack 中的 bundlers 有很大幫助，你可以查看是導(dǎo)入整個(gè)庫還是只導(dǎo)入特定的實(shí)用程序。

6. REST Client

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

7. 自動閉合標(biāo)記(Auto Close Tag)和自動重命名標(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í)候，你只是想要一些簡單明了的東西。例如自動更新標(biāo)簽，它在你輸入開始標(biāo)簽時(shí)自動生成結(jié)束標(biāo)簽。當(dāng)你更改相同的標(biāo)簽時(shí)，關(guān)閉標(biāo)記會自動更改，這兩個(gè)擴(kuò)展就是這樣做的。

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

在這里獲取這兩個(gè)擴(kuò)展 – 自動閉合標(biāo)記(Auto Close Tag) 和 自動重命名標(biāo)記(Auto Rename Tag)。

類似的擴(kuò)展 –

• Auto Complete Tag?—??結(jié)合自動重命名和自動閉合標(biāo)記的功能。

• Close HTML/XML tag

8. 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。

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

10. Indenticator(縮進(jìn)指示器)

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

11. VSCode Icons

使您的編輯更具吸引力的圖標(biāo)！

類似的擴(kuò)展 –

• VSCode Great Icons

• Studio Icons

12. Dracula (Theme)

Dracula 是我最喜歡的主題。

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

首先：按下 Ctrl + k

然后再按下：Ctrl + t

13. 其它推薦

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

• Live Server?—?一個(gè)具有靜態(tài)和動態(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)航，輕松快速地在重要位置之間移動。不再需要搜索代碼，它還支持一組選擇命令，允許您選擇書簽線和書簽線之間的區(qū)域，它對日志文件分析非常有用。

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

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

14. Material Theme & Icons

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

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

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

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

打開方式：文件 > 選項(xiàng) > 設(shè)置 > 用戶設(shè)置 > 工作臺 > 禪模式

16. 具有連字的字體

文字的風(fēng)格使閱讀變得簡單方便，你可以使用好看連字的字體使編輯器看起來更友好。 這里是支持連字的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. 彩虹縮進(jìn) （indent-rainbow）

縮進(jìn)風(fēng)格，這個(gè)擴(kuò)展為文本前面的縮進(jìn)著色，在每個(gè)步驟中交替使用四種不同的顏色。

當(dāng)然如果需要自定義自己喜歡的顏色，請將以下代碼段復(fù)制并粘貼到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. 自定義標(biāo)題欄

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

設(shè)置方式：打開方式：文件 > 選項(xiàng) > 設(shè)置 > 工作區(qū)設(shè)置

19. Tag Wrapping

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

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

20. 內(nèi)外平衡

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

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

21. Turbo Console.log()

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

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

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

22. Live server

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

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

23. 使用多個(gè)游標(biāo) 復(fù)制/粘貼

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（面包屑）

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

25. Code CLI

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

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

26. Polacode

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

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

27. Quokka (JS/TS ScratchPad)

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

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

28. WakaTime

如果你想記錄每天編程所花的時(shí)間，WakaTime 是一個(gè)擴(kuò)展，它可以幫助記錄和存儲有關(guān)編程活動的指標(biāo)和分析。

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

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

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

廣告

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