Vscode----熱門插件超實用插件匯總

• • 一、 漢化Vscode
  • 二、Vue配件
  • • 1. Vetur
    • 2. Vue 3 Snippets
  • 三、配置類插件
  • • 1. Auto Rename Tag
    • 2. Auto Close Tag
    • 3. Beautify
    • 4. Debugger for Chrome
    • 5. Debugger for Java
    • 6. ESLint
    • 7. Highlight Matching Tag
    • 8. Image Preview
    • 9. Image Snippets
    • 10. Live Server
    • 11. Open in Browser
    • 12. Prettier-Code formatter
    • 13.Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
    • 14. Visual Studio IntelliCode
  • 四、Vscode主題裝飾類插件
  • • 1. Dracula Official
    • 2. Fluent Icons
    • 3. One Dark Pro
    • 4. vscode-icons
  • 五、代碼提示類
  • • 1. HTML CSS Support
    • 2. JavaScript (ES6) code snippets
    • 3. jQuery Code Snippets
    • 4. Path Intellisense
    • 5. stylus

一、 漢化Vscode

安裝完成后重啟軟件

二、Vue配件

1. Vetur

2. Vue 3 Snippets

這個擴展將Vue 2片段和Vue 3片段添加到Visual Studio代碼。

三、配置類插件

1. Auto Rename Tag

自動重命名成對的HTML/XML標記，修改 html 標簽，自動幫你完成頭部和尾部閉合標簽的同步修改，與Visual Studio IDE一樣。

2. Auto Close Tag

自動添加HTML/XML關閉標簽，與Visual Studio IDE或Sublime Text一樣。

3. Beautify

格式化代碼工具，在Visual Studio Code中美化javascript, JSON, CSS, Sass和HTML。

4. Debugger for Chrome

從VS Code調試在Google Chrome中運行的JavaScript代碼。
用于在Google Chrome瀏覽器或支持Chrome DevTools協議的其他目標中調試JavaScript代碼的VS Code擴展

5. Debugger for Java

一個基于Java調試服務器的輕量級Java調試器，它擴展了Red Hat對Java的語言支持。它允許用戶使用Visual Studio code (VS code)調試Java代碼

6. ESLint

查找并修復 JavaScript 代碼中的問題

7. Highlight Matching Tag

這個擴展突出顯示匹配的開始和/或結束標記。它還可以在狀態欄中顯示到標簽的路徑。雖然VSCode有一些基本的標簽匹配，但它只是——基本的。這個擴展將嘗試匹配任何地方的標簽:從標簽屬性，字符串內部，任何文件，同時還提供廣泛的樣式選項來定制如何突出顯示標簽。

8. Image Preview

顯示圖像預覽在排水溝和懸停

9. Image Snippets

“圖像片段”可以檢測你的圖像源路徑在最后一行，自動完成一些片段，如寬度/高度

10. Live Server

啟動一個開發本地服務器，為靜態和動態頁面提供實時加載功能

11. Open in Browser

這允許您在默認瀏覽器或應用程序中打開當前文件。

MAC版本
Windows版本
使用Alt + B快捷鍵在默認瀏覽器中打開當前html文件，或者Shift + Alt + B選擇瀏覽器。你也可以像圖片一樣右鍵點擊:

12. Prettier-Code formatter

Prettier是一個固執己見的代碼格式化器。它通過解析您的代碼，并使用自己的規則重新打印它，這些規則將最大行的長度考慮在內，并在必要時包裝代碼，從而強制實現一致的樣式。

13.Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro

輕松編譯ts, tsx, scss, less, stylus, jade, pug和es6+保存，而無需使用構建任務

14. Visual Studio IntelliCode

四、Vscode主題裝飾類插件

1. Dracula Official

Visual Studio Code的黑暗主題

2. Fluent Icons

產品圖標主題允許主題作者自定義在VS Code的內置視圖中使用的圖標:除了文件圖標(由文件圖標主題覆蓋)和擴展貢獻的圖標以外的所有圖標。這個擴展使用流利圖標。

3. One Dark Pro

Atom的Visual Studio Code標志性的一個黑暗主題

4. vscode-icons

Visual Studio代碼圖標

五、代碼提示類

1. HTML CSS Support

Visual Studio代碼的HTML id和類屬性補全。

2. JavaScript (ES6) code snippets

這個擴展包含Vs code編輯器的ES6語法的JavaScript代碼片段(同時支持JavaScript和TypeScript)。

3. jQuery Code Snippets

jQuery代碼提示，超過130個用于JavaScript代碼的jQuery代碼片段。
只需鍵入字母’jq’即可獲得所有可用jQuery代碼片段的列表。

4. Path Intellisense

Visual Studio Code插件，自動完成文件名

5. stylus

將語法高亮顯示和代碼完成添加到Visual Studio code中的Stylus文件。

總結

以上是生活随笔為你收集整理的Vscode----热门插件超实用插件汇总（史上最全）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。