搜尋
首頁開發工具VSCode【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

這篇文章為大家總結了23個各種功能的VSCode 插件,可以幫助開發者提高開發效率和美觀性,希望對大家有幫助!

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

什麼是VSCode?

VSCode(全名為:Visual Studio Code)是一款由微軟開發且跨平台的免費原始碼編輯器。該軟體支援語法高亮、程式碼自動補全、程式碼重構、檢視定義功能,並且內建了命令列工具和Git版本控制系統。使用者可以更改主題和鍵盤快捷方式實現個人化設置,也可以透過內建的擴充功能商店安裝擴充功能以拓展軟體功能。 【推薦學習:《vscode入門教學》】

VSCode預設支援非常多的程式語言,包括JavaScriptTypeScript CSSHTML;也可以透過下載擴充功能支援PythonC/C JavaGo在內的其他語言。 VSCode也支援偵錯 Node.js 程式。


【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性
VSCode支援同時開啟多個目錄,並將資訊儲存在工作區中以便重複使用。作為跨平台的編輯器,VSCode允許使用者更改檔案的程式碼頁、換行符和程式語言。

VSCode的下載安裝

  • #Windows
    開啟VSCode官網直接下載即可。

  • Linux
    Linux平台下安裝VSCode速度很慢,可以用以下方法:

  • 透過國內源下載VSCode
  • 將壓縮包解壓縮並移動到usr/local目錄:sudo mv VSCode-linux-x64 / usr/local/
  • 取得運行權限:sudo chmod x /usr/local/VSCode-linux-x64/code
  • 安裝VSCode(注意此處只能用普通使用者權限): /usr/local/VSCode-linux-x64/code
  • 建立軟連結: sudo ln -s / usr/local/VSCode-linux-x64/code /usr/local/bin/vscode, 之後在任何位置可透過終端機輸入vscode啟動軟體

#VSCode外掛程式集合

美觀類別

1 CodeSnap

##CodeSnap可以輕鬆產生高解析度,精美的程式碼圖片

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

使用方式很簡單:

  • 使用指令將Codesnap 調出

  • 複製要作為輸出的一部分的程式碼

  • #儲存影像到本機

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

2 :emojisense:

:emojisense:可以為MarkDown文件或命令列輸出表情,讓程式設計更有趣

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

#直接複製Emoji大全裡喜歡的標籤即可,例如下面我為資料集訓練過程的命令列增加了表情。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

3 Marquee

#Marquee可以將程式設計主螢幕改造得更實用或更美觀。有了這個擴展,你可以看新聞報道,天氣!此外,Marquee 支援使用者將項目新增至個人待辦事項清單中,以及一些快速筆記的暫存板。一些小但有用的插件功能。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

4 Material Theme

Material Theme 為VScode 安裝不同的主題,允許你根據自己的喜好自訂整個編輯器的外觀。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

以下是我個人使用的

FireFly Pro主題。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

5 Bookmarks

Bookmarks允許你在工作區中針對不同檔案的特定行向程式碼新增書籤。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

6 Bracket Pair Colorizer

#Bracket Pair Colorizer為括號加上不同的顏色,以便於區分不同的區塊。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

7 vscode-icons

#vscode-icons給VSCode檔案更換更好看的圖示。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

程式設計類別(前端)

1 Vetur

Vetur為Vue項目提供語法高亮、智慧感知等。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

2 Auto Close Tag

#Auto Close Tag自動閉合HTML/XML標籤。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

3 Auto Rename Tag

#Auto Rename Tag自動重新命名HTML/XML標籤。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

4 formate: CSS/LESS/SCSS formatter

formate: CSS/LESS/SCSS formatter格式化CSS/LESS/SCSS以增強可讀性。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

5 Live Server

#Live Server為靜態和動態頁面啟動具有即時重新載入功能的開發本地伺服器。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

6 Debugger for Chrome

#Debugger for Chrome將JS程式碼的偵錯嵌入Chrome瀏覽器。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

程式設計類別(C/C )

#1 C/C

C/C 為VSCode添加了對C/C 的語言支持,包括IntelliSense 和Debugging等功能。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

2 C Intellisense

#C Intellisense為VSCode添加了對C/C 的智慧感知。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

3 CMake Tools

#CMake Tools為VSCode新增了對CMake的支援與感知。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

程式設計類別(Python)

#1 Python

Python為VSCode添加了對Python的語言支持,包括IntelliSense 和Debugging等功能。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

2 Jupyter

#Jupyter為VSCode添加了對Jupyter Notebook的功能支援。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

效率類別

1 Git Graph

Git Graph視覺化你的Git提交流程。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

2 koroFileHeader

#koroFileHeader用於格式化產生檔案頭註解和函數註解。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

3 Code Runner

#Code Runner用於直接執行多種語言的程式碼片段或文件。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

4 Better Comments

#Better Comments為程式碼註解提供各種特定類型註解的高亮。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

5 CodeTime

CodeTime提供你每天敲程式碼時間的資料分析。

【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性

更多關於VSCode的相關知識,請造訪:vscode教學! !

以上是【吐血總結】23個VSCode 插件,幫助你提升開發效率與美觀性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:csdn。如有侵權,請聯絡admin@php.cn刪除
vscode如何格式化jsonvscode如何格式化jsonApr 16, 2025 am 07:54 AM

在 VS Code 中格式化 JSON 的方法有:1. 使用快捷鍵 (Windows/Linux:Ctrl Shift I;macOS:Cmd Shift I);2. 通過菜單(“編輯” > “格式化文檔”);3. 安裝 JSON 格式化程序擴展(如 Prettier);4. 手動格式化(使用快捷鍵縮進/縮出塊或添加花括號和分號);5. 使用外部工具(如 JSONLint 和 JSON Formatter)。

vscode如何編譯vscode如何編譯Apr 16, 2025 am 07:51 AM

在 VSCode 中編譯代碼分 5 步:安裝 C 擴展;在項目文件夾中創建 "main.cpp" 文件;配置編譯器(如 MinGW);使用快捷鍵("Ctrl Shift B")或 "Build" 按鈕編譯代碼;使用快捷鍵("F5")或 "Run" 按鈕運行編譯後的程序。

vscode如何安裝vscode如何安裝Apr 16, 2025 am 07:48 AM

要安裝 Visual Studio Code,請按以下步驟操作:訪問官方網站 https://code.visualstudio.com/;根據操作系統下載安裝程序;運行安裝程序;接受許可協議並選擇安裝路徑;安裝完成後,VSCode 將自動啟動。

vscode如何放大字體vscode如何放大字體Apr 16, 2025 am 07:45 AM

在 Visual Studio Code 中放大字體的方法有:打開設置面板(Ctrl , 或 Cmd ,)。搜索並調整“Font Size”。選擇具有適合大小的“Font Family”。安裝或選擇提供合適大小的主題。使用鍵盤快捷鍵(Ctrl 或 Cmd )放大字體。

vscode如何連接遠程服務器vscode如何連接遠程服務器Apr 16, 2025 am 07:42 AM

如何通過 VSCode 連接遠程服務器?安裝 Remote - SSH 擴展配置 SSH在 VSCode 中創建連接輸入連接信息:主機、用戶名、端口、SSH 密鑰在 Remote Explorer 中雙擊已保存的連接

vscode如何運行vuevscode如何運行vueApr 16, 2025 am 07:39 AM

在 VSCode 中運行 Vue 項目需要以下步驟:1. 安裝 Vue CLI;2. 創建 Vue 項目;3. 切換到項目目錄;4. 安裝項目依賴;5. 運行開發服務器;6. 打開瀏覽器訪問 http://localhost:8080。

vscode如何比較兩個文件vscode如何比較兩個文件Apr 16, 2025 am 07:36 AM

VSCode 中比較文件的方法:1. 打開兩個文件,2. 啟用“差異”視圖(“視圖”菜單),3. 查看差異(新增綠色、刪除紅色、修改紫色),4. 使用箭頭鍵導航,5. 接受或拒絕更改。附加功能包括合併更改、複製更改、查看詳細信息和編輯差異。

vscode如何運行js代碼vscode如何運行js代碼Apr 16, 2025 am 07:33 AM

如何在 VSCode 中運行 JS 代碼?創建.js文件並編寫代碼;安裝 Node.js 和 npm;安裝Debugger for Chrome;打開調試控制台;選擇Chrome;添加調試配置;設置調試腳本;運行代碼;調試代碼(可選)。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。