下面這篇文章跟大家介紹常用的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
#bluloco-dark

##bluloco-light



##eppz! (C# theme for Unity)	#######Eva Theme################# ################Flat UI################################# #######GitHub Theme######################
Monokai Pro
New Moon VSCode
One Dark Pro
Plastic
spacegray-vscode
Splus

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

{  "breadcrumbs.enabled": true,  "editor.tabSize": 2,  "editor.renderWhitespace": "boundary",  "editor.cursorBlinking": "smooth",  "editor.minimap.renderCharacters": false,  "editor.fontFamily": "&#39;Fira Code&#39;, &#39;Droid Sans Mono&#39;, &#39;Courier New&#39;, monospace, &#39;Droid Sans Fallback&#39;",  "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(&#39;$eSEL&#39;, $SEL)"
  },  "prettier.tslintIntegration": true,  "cSpell.userWords": [    "Unmount"
  ],  "jest.autoEnable": false,
}

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