分享一些VSCode開發常用插件

本篇文章跟大家介紹分享一些VSCode開發必備常用外掛程式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《vscode教學》

Visual Studio Code必備常用外掛程式

紅色為強力推薦，不容錯過o(∩_∩)o

---

• #Chinese (Simplified) Language Pack for Visual Studio Code
  簡體中文套件

• #Prettier - Code formatter
  最強格式化，不接受反駁（在應用程式商店中卸載JS-CSS-HTML Formatter以免出現儲存時自動格式化了）

• HTML Snippets
  超實用且初級的H5程式碼片段以及提示

• Code Runner
  

• 
  

• 
  程式碼編譯運行看結果，支援眾多語言

• GitLens
  豐富的git日誌外掛

• ##vetur## vue語法高亮、智慧感知、Emmet等
  

• HTML CSS Support 讓html 標籤上寫class 智慧提示目前專案所支援的樣式。新版本已經支援scss檔案檢索，這個也是必備外掛之一
  

• #Auto Close Tag 匹配標籤，關閉對應的標籤。很實用【HTML/XML】
  

• Auto Rename Tag 修改html 標籤，自動幫你完成尾部閉合標籤的同步修改
  

• Path Intellisense # 路徑智慧提示
  

• 
  

• 
  # #JavaScript (ES6) code snippets

• 外掛程式為JavaScript、TypeScript、HTML、React和Vue提供了ES6語法支援。

  
  Live Server

• 瀏覽器即時重新整理。右鍵“Open With Live Server”開啟

  
  open in browser

• 從瀏覽器中查看html文件，使用系統的當前預設瀏覽器

  
  Bracket Pair Colorizer

• 讓括號擁有獨立的顏色，易於區分。可以配合任意主題使用。

  
  ESLint

• ESLint程式碼偵測校驗

  
  

• 
  
  

• vscode-icon 讓vscode 資源樹目錄加上圖標，必備良品！
  

• Debugger for Chrome
  # 讓vscode 映射chrome 的debug功能，靜態頁面都可以用vscode 打斷點調試，真666~

• IntelliSense for CSS class names in HTML
  

將專案中css 檔案裡的名稱智慧提示在html 中

• 
  

  minapp

• 微信小程式標籤、屬性的智慧補全（同時支援原生小程式、mpvue 和wepy 框架，並提供snippets）
  

• CSS Peek

  追蹤至樣式表中CSS 類別定義的地方
  ctrl 滑鼠左鍵點選class 或滑鼠右鍵「跳到定義（F12）」

• #Manta's Stylus Supremacy
  

  ## 格式化stylus

• jQuery Code Snippets
  

  jquery 重度病患必須是品

• Class autocomplete for HTML
  

  寫html程式碼的朋友們對html程式碼的一大體現就是重複，如果純用手敲不僅累還會影響專案進度，這款自動補全插件真的很棒;######## ######JavaScript Snippet Pack###### 針對js的插件，包含了js的常用語法關鍵字，很實用；###############Path Autocomplete# ##### 路徑智慧補全###############beautify###### 格式化程式碼的工具，可以格式化JSON|JS|HTML|CSS|SCSS,比內建格式化好用###############HTMLHint###### html程式碼偵測###############VSCode Great Icons# ##### 另一款資源樹目錄圖示###############colorize###### 會為顏色程式碼增加一個目前符合程式碼顏色的背景，非常好# ##

• Color Info
  提供你在 CSS 中使用顏色的相關資訊。你只要在顏色上懸停遊標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關資訊了。

• vscode-fileheader
  頂部註解模板，可定義作者、時間等信息，並會自動更新最後修改時間

• Document This
  js 的註解範本（注意：新版的vscode已經原生支援,在function上輸入/** tab）

• #filesize
  在底部狀態列顯示目前檔案大小，點擊後還可以看到詳細建立、修改時間

• Bootstrap 3 Sinnpet
  常用bootstrap 的可以下

• VueHelper
  vue程式碼提示

• 
  ## Bookmarks

一個書籤工具,還是很有必要的

• 
  #tortoise-svn

SVN的整合外掛程式

#推薦主題

註：

檔案-首選項-顏色主題

裡設定切換

• ## Dracula Theme

• One Dark Pro

monoka

更多程式相關知識，請訪問：###程式設計入門###！ ！ ######

以上是分享一些VSCode開發常用插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！