搜尋
首頁開發工具VSCode【強推】VSCode拓展最新匯總！

【強推】VSCode拓展最新匯總！

藏色散人
藏色散人
Sep 26, 2021 pm 02:59 PM
vscode

下面這篇文章跟大家介紹常用的VSCode拓展，希望對大家有幫助！

一、拓展

##Code Spell checker#單字拼字檢查快速開啟Bing並蒐索，可配置搜尋引擎Color HighlightColor InfoColor PickerCSS-in-JSDashDebugger for ChromeDocument This#GraphQL for VSCode##Guides#Gulp SnippetsHighlight Matching Tag#HTML CSS Class CompletionHTML CSS Support#HTMLHint#htmltagwrap##Todo Todo TreeToggle QuotesTS/JS postfix completion#TSLintTypes auto installerTypeScript Hero#TypeScript Import##即時測試外掛程式

姓名

簡稱

#Auto Close Tag

自動閉合HTML標籤

Auto Import

import提示

Auto Rename Tag

修改HTML標籤時，自動修改已匹配的標籤

Babel JavaScript

babel插件，語法高亮

Babelrc

.babelrc檔案高亮提示

Beautify css /sass/scss/less

css/sass/less格式化

Better Align

對齊賦值符號與註解

Better Comments

寫出更人性化的註解

Bookmarks

加入行書籤

Bracket Lens

######在閉合的括號處提示括號頭部的程式碼################## #####Bracket Pair Colorizer 2###################以不同顏色高亮顯示符合的括號############## ##########Can I Use######

HTML5、CSS3、SVG的瀏覽器相容性檢查

Code Outline

展示程式碼結構樹

Code Runner

執行選取程式碼片段（支援多數語言）

#單字拼字檢查

CodeBing

快速開啟Bing並蒐索，可設定搜尋引擎

#顏色值在程式碼中高亮顯示

#小視窗顯示顏色值，rgb,hsl,cmyk,hex等等

#拾色器

#CSS-in-JS高亮提示和轉換

整合Dash

#調試Chrome

#註解文件產生

######DotENV###################.env檔高亮#############################.env檔高亮############ ############Edit csv###################編輯CSV檔######

EditorConfig for VS Code

EditorConfig外掛程式

Emoji

##endy

#將輸入遊標跳到目前行最後面

#Error Gutters

#在行號處提示錯誤代碼

ESLint

#ESLint插件，高亮提示

File Peek

#根據路徑字串，快速定位到檔案

filesize

#狀態列顯示目前檔案大小

##################Find-Jump###################快速跳到指定單字位置### #####################Font-awesome codes for html#################FontAwesome提示程式碼片段# #######################ftp-sync##################同步檔案到ftp## ######################Git Blame###################在狀態列顯示目前行的Git訊息########################Git File History##################快速瀏覽單一文件歷史提交變動########################Git Graph##################Git圖形化視圖，方便瀏覽和操作#########################Git History(git log)######

查看git log

#Git Tree Compare

Git樹形比對，查看不同分支的差異

gitignore

.gitignore檔案語法

GitLens

##顯示檔案最近的commit與作者，顯示目前行commit資訊

graphql高亮與小秘訣

高亮縮排基準線

Gulp程式碼段

高亮符合選取的標籤

CSS class提示

css提示（支援vue）

HTML格式提示

##htmltagwrap

#########快速包裹html標籤#########################htmltagwrap##############################htmltagwrap########### #######包含HTML#########################Import Beautify############################################################################## ###import分組、排序、格式化#######

Import Cost

#在行內顯示導入（import/require）的套件的大小

Indenticator

#縮排高亮

IntelliSense for css class names

css class輸入提示

JavaScript (ES6) code snippets

ES6語法程式碼片段

JavaScript Standard Style

Standard風格

Jest Runner

#支援執行Jest單一測試檔案或單一用例

JS Refactor

程式碼重構工具，擷取函數、變數重新命名等等

#JSON to TS

JSON結構轉換為typescript的interface

#JSON Tools

格式化與壓縮JSON

#jumpy

快速跳到指定單字位置

#language-stylus

Stylus語法高亮與提示

#Less IntelliSense

##less變數與混合提示

#Lodash

Lodash程式碼片段

Log Wrapper#

生產列印選取變數的程式碼

#markdownlint

Markdown格式提示

#MochaSnippets

Mocha程式碼片段

#Node modules resolve

快速導覽至Node模組

#npm

執行npm指令

npm Intellisense

匯入模組時，提示已安裝模組名稱

#Output Colorizer

彩色輸出訊息

#Partial Diff

比較兩段程式碼或檔案

#Parameter Hints

#在函數呼叫處指示參數名稱

#Path Autocomplete

##########################Path Autocomplete################# #路徑完成提示########################Path Intellisense##################另一個路徑完成提示########################Polacode######################Polacode##################將程式碼產生圖片########################PostCss Sorting##################css排序######### ####################Prettier - Code formatter##################prettier官方外掛###### #

Prettify JSON

#格式化JSON

Project Manager

#快速切換專案

Quokka.js

#不需要手動執行，行內顯示變數結果

Rainbow CSV

#CSV檔案使用彩虹色渲染不同欄位

React Native Storybooks

#storybook預覽插件，支援react

#React Playground

#為編輯器提供一個react元件運行環境，方便調試

React Standard Style code snippets

react standar風格程式碼區塊

REST Client

發送REST風格的HTTP請求

Sass

sass外掛

Settings Sync

VSCode設定同步到Gist

Sort lines

排序選取行

Sort Typescript Imports

typescript的import排序

#String Manipulation

#字串轉換處理（駝峰、大寫開頭、底線等等）

stylelint

#css/sass/less程式碼風格

SVG Viewer

#SVG檢視器

Syncing

#vscode設定同步到gist

Test Spec Generator

#測試案例產生（支援chai、should、jasmine）

#TODO Parser

#Todo管理

#收集程式碼中的TODO註釋，支援快速搜尋

#切換JS中的引號，" -> ' -> `

#ts/js後綴提示

TypeScript語法檢查

##自動安裝@types聲明依賴

TypeScript輔助插件，管理import、outline等等

##TS自動import

##################TypeScript Import Sorter################# import整理排序########################Typescript React code snippets######

React Typescript程式碼片段

#TypeSearch

TS宣告檔搜尋

#Version Lens

package.json檔案顯示模組目前版本和最新版本

vetur

Vue外掛

Volar

##Volar

Vue插件，支援Vue3

#View Node Package

##快速開啟選取模組的主頁和程式碼倉庫

#Visual Studio IntelliCode

#基於AI的程式碼提示

####VS Live Share######### ##########即時多人協助########################VSCode Great Icons###################VSCode Great Icons######### #########檔案圖示拓展#########################vscode-database########### #######操作資料庫，支援mysql和postgres#########################vscode-icons######### #########檔案圖標，方便定位檔案#########################vscode-random######## ##########隨機字串產生器#########################vscode-spotify######## ##########整合spotify，播放音樂########################vscode-styled-components####### ############styled-components高亮支援######

vscode-styled-jsx

styled-jsx高亮支援

Vue Peek

#支援跳到Vue元件定義檔

Vue TypeScript Snippets

Vue Typescript程式碼片段

VueHelper

#Vue2程式碼片段（包括Vue2 api、vue -router2、vuex2）

#Wallaby.js

###############Wrap Console Log Lite#################對選取程式碼快速console.log##################

二、主題

Enki Theme


#名稱

#預覽

Atom One Light Theme
【強推】VSCode拓展最新匯總！

#bluloco-dark
【強推】VSCode拓展最新匯總！


##bluloco-light
【強推】VSCode拓展最新匯總！


【強推】VSCode拓展最新匯總！
##eppz! (C# theme for Unity)
【強推】VSCode拓展最新匯總！
#######Eva Theme################# ################Flat UI################################# #######GitHub Theme######################

Monokai Pro

New Moon VSCode

One Dark Pro

Plastic

spacegray-vscode
【強推】VSCode拓展最新匯總！

Splus
【強推】VSCode拓展最新匯總！

三、个人首选项配置（仅供参考）

{  "breadcrumbs.enabled": true,  "editor.tabSize": 2,  "editor.renderWhitespace": "boundary",  "editor.cursorBlinking": "smooth",  "editor.minimap.renderCharacters": false,  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",  "editor.fontLigatures": true,  "explorer.confirmDragAndDrop": false,  "extensions.autoUpdate": false,  "files.insertFinalNewline": true,  "git.autofetch": true,  "git.path": "F:\\Program Files\\Git\\cmd\\git.exe",  "search.exclude": {    "**/node_modules": true,    "**/dist": true
  },  "typescript.locale": "en",  "window.titleBarStyle": "custom",  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",  "window.zoomLevel": 1,  "workbench.activityBar.visible": true,  "workbench.colorTheme": "Plastic - deprioritised punctuation",  "workbench.iconTheme": "vscode-great-icons",  "workbench.startupEditor": "newUntitledFile",  "eslint.autoFixOnSave": true,  "eslint.validate": ["javascript", "javascriptreact", "vue"],  "vsicons.projectDetection.autoReload": true,  "vsicons.dontShowNewVersionMessage": true,  "tslint.autoFixOnSave": true,  "debugwrapper.wrappers": {    "default": "console.log('$eSEL', $SEL)"
  },  "prettier.tslintIntegration": true,  "cSpell.userWords": [    "Unmount"
  ],  "jest.autoEnable": false,
}

以上是【強推】VSCode拓展最新匯總！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文轉載於：toutiao。如有侵權，請聯絡admin@php.cn刪除
相關文章
Visual Studio和VS代碼：了解其關鍵差異Visual Studio和VS代碼：了解其關鍵差異Apr 19, 2025 am 12:16 AM

VisualStudio適合大型項目和企業級應用開發，VSCode則適合快速開發和多語言支持。 1.VisualStudio提供全面的IDE環境，支持微軟技術棧。 2.VSCode是輕量級編輯器，強調靈活性和擴展性，跨平台支持。

視覺工作室仍然免費嗎？了解可用性視覺工作室仍然免費嗎？了解可用性Apr 18, 2025 am 12:05 AM

是的，VisualStudio某些版本是免費的。具體來說，VisualStudioCommunityEdition對個人開發者、開源項目、學術研究和小型組織免費。然而，也有付費版本如VisualStudioProfessional和Enterprise，適用於大型團隊和企業，提供額外功能。

使用Visual Studio：跨平台開發軟件使用Visual Studio：跨平台開發軟件Apr 17, 2025 am 12:13 AM

使用VisualStudio進行跨平台開發是可行的，通過支持.NETCore和Xamarin等框架，開發者可以編寫一次代碼並在多個操作系統上運行。 1)創建.NETCore項目並使用其跨平台能力，2)使用Xamarin進行移動應用開發，3)利用異步編程和代碼重用來優化性能，確保應用的高效運行和可維護性。

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 中雙擊已保存的連接

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 無盡。

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
節省R.E.P.O.解釋（並保存文件）
1 個月前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影 - 如何找到鐵匠，解鎖武器和裝甲定制
4 週前ByDDD
顯示更多

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

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

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7569
15
CakePHP 教程
1386
52
steam的賬戶名稱是什麼格式
87
11
win11激活密鑰永久
61
19
NYT連接提示和答案
28
107
顯示更多