免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

VSCode 是一個(gè)開源的跨平臺(tái)編輯器，已經(jīng)成為程序員的最愛，特別是在 Web 開發(fā)社區(qū)。 它快速，可擴(kuò)展，可定制，并具有大量功能。 如果你還沒有使用 VSCode ，你應(yīng)該了解一下。

VSCode 已經(jīng)有了數(shù)千個(gè)擴(kuò)展。 我將在這篇文章中列出我日常使用的一些擴(kuò)展。 讓我們開始！

Quokka.js

Quokka.js 是一個(gè)用于 JavaScript 和 TypeScript 的實(shí)時(shí)運(yùn)行代碼平臺(tái)。 這意味著它會(huì)在你輸入后立即運(yùn)行您的代碼，并在您的代碼編輯器中顯示各種執(zhí)行結(jié)果。 建議你親自嘗試一下。

安裝此擴(kuò)展后，可以按 Ctrl/Cmd(?) + Shift + P 顯示編輯器的命令選項(xiàng)面板，然后鍵入 Quokka 以查看可用命令的列表。 選擇并運(yùn)行 “新建JavaScript文件” 命令。 您也可以按（? + K + J）直接打開文件。 您在此文件中鍵入的任何內(nèi)容都會(huì)立即執(zhí)行。

Quokka.js類似的擴(kuò)展 –

 

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

括號(hào)配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow) 

花括號(hào)和園括號(hào)是許多編程語言不可分割的部分。在 JavaScript 等語言中，在一屏代碼中花括號(hào)和園括號(hào)可能有多層嵌套，然而缺沒有簡單的機(jī)制來識(shí)別這些括號(hào)從哪里開始，又在哪里結(jié)束對。歡迎使用 括號(hào)配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)。這是兩個(gè)不同的擴(kuò)展。然而，他們就像是一對情侶，可以完美的配合使用。這些擴(kuò)展將為您的編輯器添加一系列顏色，并使代碼塊易于辨別和令人愉悅。一旦你習(xí)慣了它們，如果 VSCode 沒有它們就會(huì)讓人覺得很平淡。

愚人碼頭注：彩虹縮進(jìn)(Indent Rainbow)擴(kuò)展為每個(gè)縮進(jìn)層級用四種不同顏色交替著色。

不使用括號(hào)配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)使用括號(hào)配對著色(Bracket Pair Colorizer) 和 彩虹縮進(jìn)(Indent Rainbow)后

代碼片段(Snippets)

代碼片段(Snippets)就是在編輯器中使用縮寫。 例如，你想在編輯中編寫 import React from 'react'; 這樣一段代碼，通過代碼片段(Snippets)，你可以輸入 imr 并按 Tab 鍵來展開此代碼段。 同樣，clg 會(huì)展開為 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（高亮），這鐘請客就不會(huì)發(fā)生。

它以鮮艷的顏色突顯您的 “TODO” / “FIXME” 或代碼中的任何其他注釋，因此它始終清晰可見。 另外還有一個(gè)很好的功能是 List Highlighted annotations 。 它會(huì)在控制臺(tái)中列出了所有 TODO 。

使用 Todo Highlighter（高亮）類似的擴(kuò)展 –

 

• Todo+?—??更強(qiáng)大的 Todo 高亮擴(kuò)展，具有更多功能。
• Todo Parser

Import Cost(花銷)

Import Cost 允許您查看導(dǎo)入模塊的大小。 這對 Webpack 等打包工具來說是一個(gè)巨大的幫助。 您可以查看是導(dǎo)入整個(gè)庫還是僅導(dǎo)入特定實(shí)用程序。

不足之處是它不顯示自定義文件或模塊的花銷。

使用 Import Cost

REST Client

作為Web開發(fā)人員，我們經(jīng)常需要使用 REST API。為了檢查URL并檢查響應(yīng)，使用 Postman 等工具。但是，當(dāng)編輯器可以輕松完成相同的任務(wù)時(shí)，為什么還要使用不同的應(yīng)用程序呢。歡迎使用 REST Client。它允許您在Visual Studio Code中直接發(fā)送 HTTP 請求并查看響應(yīng)。

使用 REST Client

自動(dòng)閉合標(biāo)記(Auto Close Tag)和自動(dòng)重命名標(biāo)記(Auto Rename Tag)

自從 React 問世以及它在過去幾年中獲得的關(guān)注度，類 HTML 的 JSX 語法現(xiàn)在很風(fēng)靡。我們再次在 JavaScript 代碼中使用使用標(biāo)記。任何 Web 開發(fā)人員都會(huì)告訴您輸入標(biāo)記很麻煩。在大多數(shù)情況下，我們需要一種能夠快速輕松地生成標(biāo)簽及其子代的工具。VSCode 中內(nèi)置的 Emmet 就是一個(gè)非常好的例子。但是，有時(shí)候，你只想要一些簡單而簡潔的東西。例如自動(dòng)更新標(biāo)記，它在您鍵入開始標(biāo)記時(shí)自動(dòng)生成結(jié)束標(biāo)記。當(dāng)您更改同一個(gè)標(biāo)記對時(shí)，結(jié)束標(biāo)記會(huì)自動(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)

使用 Auto Rename Tag使用 Auto Close 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資源管理器。 您可以在 此處 閱讀這些功能的完整說明。 我只想說你應(yīng)該安裝這個(gè)插件，如果你使用git做任何事情的話。

使用GitLens還有其他擴(kuò)展專注于特定功能。 如果 GitLens 感到臃腫或者你不會(huì)使用GitLens 的許多功能，那么你可以安裝其他類似的擴(kuò)展。

 

類似的擴(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存儲(chǔ)庫的新窗口。 基本上，你可以打開另一個(gè)存儲(chǔ)庫而無需離開VSCode。

安裝此擴(kuò)展后，您必須將 gitProjectManager.baseProjectsFolders 設(shè)置為包含 repos 的URL列表。例如：

1. {
2. "gitProjectManager.baseProjectsFolders": [
3. "/home/user/nodeProjects",
4. "/home/user/personal/pocs"
5. ]
6. }

使用 Git Project Manager類似的擴(kuò)展 –

 

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

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

Indenticator(縮進(jìn)指示器) 在視覺上突出顯示當(dāng)前的縮進(jìn)深度。因此，現(xiàn)在您可以輕松區(qū)分在不同層次縮進(jìn)的各種代碼塊。

使用 Indenticator類似的擴(kuò)展 –

 

• Guides

VSCode Icons

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

使用 VSCode Icons類似的擴(kuò)展 –

 

• VSCode Great Icons
• Studio Icons

Dracula (主題)

Dracula 是我最喜歡的主題。

Dracula 主題

---

其它推薦

• 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ū)域。它對日志文件分析非常有用。
• Settings Sync?—?允許您在 Gist 中保存用戶設(shè)置，擴(kuò)展名和快捷鍵綁定，以便您可以在幾分鐘內(nèi)設(shè)置新的 VSCode。
• Multiple clipboards for VSCode?—?覆蓋常規(guī)的“復(fù)制”和“剪切”命令，以將選擇保留在剪貼板中。還增加了將幾個(gè)文本塊復(fù)制到單個(gè)復(fù)制緩沖區(qū)的功能。
• Path Intellisense?—?Visual Studio Code插件，可自動(dòng)填充文件名。
• Version Lens?—?在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息。

這些是我經(jīng)常使用的一些VSCode擴(kuò)展。您還喜歡其他哪些擴(kuò)展和主題？歡迎留言告訴我，非常感謝！

Visual Studio Code 相關(guān)熱文

• Visual Studio Code 最好的功能、插件和設(shè)置
• 使用頂級 VSCode 擴(kuò)展來加快開發(fā) JavaScript
• Visual Studio Code 必備插件，主題及語法提示

原文鏈接：https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5