精選！15個必備的VSCode插件

来源:https://www.cnblogs.com/jasonlai2016/archive/2018/09/13/9640135.html
-Advertisement-
Play Games

Visual Studio Code 是由微軟開發的一款免費、跨平臺的文本編輯器。由於其卓越的性能和豐富的功能，它很快就受到了大家的喜愛。 就像大多數 IDE 一樣，VSCode 也有一個擴展和主題市場，包含了數以千計質量不同的插件。為了幫助大家挑選出值得下載的插件，我們針對性的收集了一些實用、有趣 ...


Visual Studio Code 是由微軟開發的一款免費、跨平臺的文本編輯器。由於其卓越的性能和豐富的功能，它很快就受到了大家的喜愛。

就像大多數 IDE 一樣，VSCode 也有一個擴展和主題市場，包含了數以千計質量不同的插件。為了幫助大家挑選出值得下載的插件，我們針對性的收集了一些實用、有趣的插件與大家分享。

1. Open-In-Browser

精選！15個必備的VSCode插件

由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在預設瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項。

插件地址：

https://marketplace.visualstudio.com/items?itemName=coderfee.open-html-in-browser

2. Quokka

精選！15個必備的VSCode插件

Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變數的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用。

插件地址：https://quokkajs.com/

3. Faker

精選！15個必備的VSCode插件

使用流行的 JavaScript 庫 – Faker，能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，並且每個類別還包含了各種子類別，你可以根據自身的需求來使用這些數據。

插件地址：

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker

4. CSS Peek

精選！15個必備的VSCode插件

使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。

插件地址：

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

5. HTML Boilerplate

精選！15個必備的VSCode插件

通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，即可生成乾凈的文檔結構。

插件地址：

https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate

6. Prettier

精選！15個必備的VSCode插件

Prettier 是目前 Web 開發中最受歡迎的代碼格式化程式。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那麼還有個 Prettier – Eslint 插件，你可不要錯過咯！

插件地址：

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

7. Color Info

精選！15個必備的VSCode插件

這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。

插件地址：

https://marketplace.visualstudio.com/items?itemName=bierner.color-info

8. SVG Viewer

精選！15個必備的VSCode插件

此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程式，你無需離開編輯器，便可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。

插件地址：

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

9. TODO Highlight

精選！15個必備的VSCode插件

這個插件能夠在你的代碼中標記出所有的 TODO 註釋，以便更容易追蹤任何未完成的業務。在預設的情況下，它會查找 TODO 和 FIXME 關鍵字。當然，你也可以添加自定義表達式。

插件地址：

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

10. Icon Fonts

精選！15個必備的VSCode插件

這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

插件地址：

https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts

11. Minify

精選！15個必備的VSCode插件

這是一款用於壓縮合併 JavaScript 和 CSS 文件的應用程式。它提供了大量自定義的設置，以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。

插件地址：

https://marketplace.visualstudio.com/items?itemName=HookyQR.minify

12. Change Case

精選！15個必備的VSCode插件

雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。

插件地址：

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

13. Regex Previewer

精選！15個必備的VSCode插件

這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上，並高亮所有的匹配項。

插件地址：

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

14. Language and Framework Packs

精選！15個必備的VSCode插件

VSCode 預設支持大量的主流編程語言，但如果你所使用的編程語言不包括在內，也可以通過下載擴展包來自動添加。同時，你還可以添加一些像 React Native 與Vue 的相關 Web 開發插件包。

插件地址：

https://marketplace.visualstudio.com/search?target=VSCode&category=Languages&sortBy=Downloads

15. Themes

精選！15個必備的VSCode插件

當然，在眾多的實用插件中，豈能少了漂亮的主題呢？你每天都會與你的 VSCode 編輯器進行“親密的接觸”，為何不把它打扮得更漂亮些呢？這裡有一些幫助你更改側邊欄的配色方案，以及圖標的相關主題，與大家分享：

• One Monokai

• Aglia

• One Dark

• Material Icon

 

轉載：https://blog.csdn.net/qq_38906523/article/details/77278403


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 根據用戶名的輸入顯示密碼（用了<String>泛型）
    /*介面List分為LinkedList和ArrayList；泛型<String>規定該類new出的對象或聲明的引用只能存放String類的對象 eg:List<String> map = new LinkedList<String>(); List<Integer> map = new Linke ...
  • 矩陣快速冪小結
    矩陣 並不想扯什麼高端線代的內容因為我也不會 定義 由$n \times m$個數$a_{ij}$排成的$n$行$m$列的數表稱為$n$行$m$列的矩陣，簡稱$n \times m$矩陣。 $$A =\begin{bmatrix}a_{11} & a_{12} & \dots a_{1m} \\ a ...
  • Python爬蟲項目--爬取自如網房源信息
    本次爬取自如網房源信息所用到的知識點: 1. requests get請求 2. lxml解析html 3. Xpath 4. MongoDB存儲 正文 1.分析目標站點 1. url: http://hz.ziroom.com/z/nl/z3.html?p=2 的p參數控制分頁 2. get請求 ...
  • python 終極篇 --- django 視圖系統
    Django的View（視圖） 一個視圖函數（類），簡稱視圖，是一個簡單的Python 函數（類），它接受Web請求並且返回Web響應。 響應可以是一張網頁的HTML內容，一個重定向，一個404錯誤，一個XML文檔，或者一張圖片。 無論視圖本身包含什麼邏輯，都要返迴響應。代碼寫在哪裡也無所謂，只要它 ...
  • 解決ASP.NET MVC 接受Request Playload參數問題
    今天與跟前端小伙伴對介面，發現微信小程式的POST帶參數傳值HttpContent.Request[]接收不到參數。 拿小程式官網文檔舉例 這樣訪問介面壓根收不到參數。解決辦法有兩種一種修改“application/json”為“application/x-www-form-urlencoded”這 ...
  • Bootstrap開發框架界面的調整處理
    我在之前介紹了很多關於Boostrap的框架方面的文章，主要是介紹各種插件的使用居多，不過有時候覺得基於Metronic的Boostrap框架的界面效果不夠緊湊，希望對它進行一定的調整，那麼我們應該如何進行相應的樣式調整呢，其實找到對應的CSS進行處理即可。同時也可以結合Chrome瀏覽器的開發者模... ...
  • C# 中 equals( ) 和 == 的區別和用法
    Equals: 下麵的語句中，x、y 和 z 表示不為 null 的對象引用。* 除涉及浮點型的情況外，x.Equals(x) 都返回 true。 * x.Equals(y) 返回與 y.Equals(x) 相同的值。 * 如果 x 和 y 都為 NaN，則 x.Equals(y) 返回 true。 ...
  • C#基礎委托回顧
    C 基礎委托回顧 前言 快忘記了。 委托的特點 委托類似於 C++ 函數指針，但它們是類型安全的。 委托允許將方法作為參數進行傳遞。 委托可用於定義回調方法。 委托可以鏈接在一起；例如，可以對一個事件調用多個方法。 方法不必與委托簽名完全匹配。 委托是事件的基礎。 "官網介紹" 用法 1. dele ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類