![vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/article/000/000/024/5f5597229755a526.jpg)
VSCode 全名為 Visual Studio Code,是微軟出的輕量級程式碼編輯器,免費、開源且功能強大。它支援幾乎所有主流的程式語言的語法高亮、智慧程式碼補全、自訂熱鍵、括號匹配、程式碼片段、程式碼對比 Diff、GIT 等特性,支援外掛程式擴充。
相關推薦:《vscode基礎教學》
一、怎麼安裝外掛?
方法一:
按F1或Ctrl Shift p,輸入extensions,選擇「擴充功能:安裝擴充功能」
![159944453086680vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/665/535/301/159944453086680vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
方法二:
ctrl P 然後輸入>ext install
![1599444535185690.png vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/586/139/652/1599444535185690.png)
#方法三:
點擊圖中位置
![159944454037888vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/895/420/354/159944454037888vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
二、常用外掛?
(1)Auto Close Tag
自動關閉HTML/XML標籤
![159944454494150vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/683/433/304/159944454494150vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(2 )Auto Rename Tag
自動完成另一側標籤的同步修改
![159944454999823vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/418/153/972/159944454999823vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(3)Bracket Pair Colorizer
![159944455861024vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/798/809/889/159944455861024vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
![159944456111030vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/709/375/750/159944456111030vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
##為括號加上不同的顏色,以便區分不同的區塊,使用者可以定義不同括號類型和不同顏色![159944456728286vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/261/668/260/159944456728286vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(4)中文(簡體)語言套件- Chinese (Simplified) Language Pack for Visual Studio Code![1599444581962600.png vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/369/631/231/1599444581962600.png)
將編譯器轉換成中文模式
![159944458532035vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/469/435/866/159944458532035vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
![159944459399602vscode如何安裝插件?常用插件介紹 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/579/381/620/159944459399602vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
![159944459835716vscode如何安裝插件?常用插件介紹 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/175/327/365/159944459835716vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
![1599444607488660.png 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/361/672/666/1599444607488660.png)
#(5)Vetur![159944461041230vscode如何安裝插件?常用插件介紹 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/913/987/680/159944461041230vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
Vue多功能整合插件,包括:語法高亮,智慧提示,emmet,錯誤提示,格式化,自動補全,debugger。 vscode官方欽定Vue插件,Vue開發者必備。
![1599444617603900.png 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/900/892/772/1599444617603900.png)
![1599444621845840.png 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/882/120/165/1599444621845840.png)
#(6)Git History Diff
如果你的VSCode開啟了一個Git管理的程式碼,則在VSCode編輯視窗中,可以看到所有的提交記錄、改動文件,包括每一行程式碼的提交時間、提交人,非常方便。
![159944462815231vscode如何安裝插件?常用插件介紹 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/493/781/541/159944462815231vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
![159944463127058vscode如何安裝插件?常用插件介紹 1vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/354/217/280/159944463127058vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
#(7)GitLens — Git supercharged
####方便查看git日誌,git多人協作的時候需要查看日誌,能在當前程式碼中查看########################(8)Path Intellisense# #####自動提示檔案路徑,支援各種快速引入檔案#########################(9)markdownlint####### markdown語法糾錯########################(10)Markdown Preview Enhanced######即時預覽markdown,markdown使用者必備# ###########
![159944464181686vscode如何安裝插件?常用插件介紹 vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/614/796/689/159944464181686vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(11)Debugger for Chrome
映射vscode上的斷點到chrome上,方便偵錯
![159944465095635vscode如何安裝插件?常用插件介紹 2vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/815/741/966/159944465095635vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
##(12)ESLint
自動格式化程式碼,以便在整個團隊中保持一致的格式。 ESLint 也可以設定為自動格式化你的程式碼,每當你出現錯誤,它都會向你發出一連串的警告。
![159944465710394vscode如何安裝插件?常用插件介紹 2vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/535/418/811/159944465710394vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(13)HTML CSS Support
HTML 中CSS Class 智慧提示
![159944466238567vscode如何安裝插件?常用插件介紹 2vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/802/136/426/159944466238567vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(14 )HTML Snippets
智慧型提示HTML標籤,以及標籤意義
![159944466618830vscode如何安裝插件?常用插件介紹 2vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/712/188/909/159944466618830vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
(15)vscode-fileheader
頂部註解模板,可定義作者、時間等信息,並會自動更新最後修改時間
快捷鍵: Ctrl Alt i
#(預設資訊可在檔案→首選項→設定中修改)
![159944467382802vscode如何安裝插件?常用插件介紹 2vscode如何安裝插件?常用插件介紹](https://img.php.cn/upload/image/655/275/849/159944467382802vscode%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9D%E6%8F%92%E4%BB%B6%EF%BC%9F%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6%E4%BB%8B%E7%B4%B9)
更多程式相關知識,請造訪:
程式設計教學! !
以上是vscode如何安裝插件?常用插件介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!