VSCode拓展有哪些

這篇文章將為大家詳細講解有關VSCode拓展有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、拓展

名稱	簡述
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	運行選中代碼段（支持多數語言）
Code Spell checker	單詞拼寫檢查
CodeBing	快速打開Bing并搜索，可配置搜索引擎
Color Highlight	顏色值在代碼中高亮顯示
Color Info	小窗口顯示顏色值，rgb,hsl,cmyk,hex等等
Color Picker	拾色器
CSS-in-JS	CSS-in-JS高亮提示和轉換
Dash	集成Dash
Debugger for Chrome	調試Chrome
Document This	注釋文檔生成
DotENV	.env文件高亮
Edit csv	編輯CSV文件
EditorConfig for VS Code	EditorConfig插件
Emoji	在代碼中輸入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 for VSCode	graphql高亮和提示
Guides	高亮縮進基準線
Gulp Snippets	Gulp代碼段
Highlight Matching Tag	高亮匹配選中的標簽
HTML CSS Class Completion	CSS class提示
HTML CSS Support	css提示（支持vue）
HTMLHint	HTML格式提示
htmltagwrap	快捷包裹html標簽
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 Intellisense	另一個路徑完成提示
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 Todo Tree	收集代碼中的TODO注釋，支持快速搜索
Toggle Quotes	切換JS中的引號，" -> ' -> `
TS/JS postfix completion	ts/js后綴提示
TSLint	TypeScript語法檢查
Types auto installer	自動安裝@types聲明依賴
TypeScript Hero	TypeScript輔助插件，管理import、outline等等
TypeScript Import	TS自動import
TypeScript Import Sorter	import整理排序
Typescript React code snippets	React Typescript代碼段
TypeSearch	TS聲明文件搜索
Version Lens	package.json文件顯示模塊當前版本和最新版本
vetur	Vue插件
Volar	Vue插件，支持Vue3
View Node Package	快速打開選中模塊的主頁和代碼倉庫
Visual Studio IntelliCode	基于AI的代碼提示
VS Live Share	實時多人協助
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

二、主題

名稱
Atom One Light Theme
bluloco-dark
bluloco-light
Enki Theme
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": "'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拓展有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。