下面本篇文章給大家介紹一下常用的vscode拓展,希望對大家有所幫助!
一、拓展
名稱 |
簡述 |
Auto Close Tag |
自動閉合HTML標(biāo)簽 |
Auto Import |
import提示 |
Auto Rename Tag |
修改HTML標(biāo)簽時,自動修改匹配的標(biāo)簽 |
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 |
展示代碼結(jié)構(gòu)樹 |
Code Runner |
運(yùn)行選中代碼段(支持多數(shù)語言) |
Code Spell checker |
單詞拼寫檢查 |
CodeBing |
快速打開Bing并搜索,可配置搜索引擎 |
Color Highlight |
顏色值在代碼中高亮顯示 |
Color Info |
小窗口顯示顏色值,rgb,hsl,cmyk,hex等等 |
Color Picker |
拾色器 |
CSS-in-JS |
CSS-in-JS高亮提示和轉(zhuǎn)換 |
Dash |
集成Dash |
Debugger for Chrome |
調(diào)試Chrome |
Document This |
注釋文檔生成 |
DotENV |
.env文件高亮 |
Edit csv |
編輯CSV文件 |
EditorConfig for VS Code |
EditorConfig插件 |
Emoji |
在代碼中輸入emoji |
endy |
將輸入光標(biāo)跳轉(zhuǎn)到當(dāng)前行最后面 |
Error Gutters |
在行號處提示錯誤代碼 |
ESLint |
ESLint插件,高亮提示 |
File Peek |
根據(jù)路徑字符串,快速定位到文件 |
filesize |
狀態(tài)欄顯示當(dāng)前文件大小 |
Find-Jump |
快速跳轉(zhuǎn)到指定單詞位置 |
Font-awesome codes for html |
FontAwesome提示代碼段 |
ftp-sync |
同步文件到ftp |
Git Blame |
在狀態(tài)欄顯示當(dāng)前行的Git信息 |
Git File History |
快速瀏覽單文件歷史提交變動 |
Git Graph |
Git圖形化視圖,方便瀏覽和操作 |
Git History(git log) |
查看git log |
Git Tree Compare |
Git樹形比對,查看不同分支的差異 |
gitignore |
.gitignore文件語法 |
GitLens |
顯示文件最近的commit和作者,顯示當(dāng)前行commit信息 |
GraphQL for vscode |
graphql高亮和提示 |
Guides |
高亮縮進(jìn)基準(zhǔn)線 |
Gulp Snippets |
Gulp代碼段 |
Highlight Matching Tag |
高亮匹配選中的標(biāo)簽 |
HTML CSS Class Completion |
CSS class提示 |
HTML CSS Support |
css提示(支持vue) |
HTMLHint |
HTML格式提示 |
htmltagwrap |
快捷包裹html標(biāo)簽 |
htmltagwrap |
包括HTML |
Import Beautify |
import分組、排序、格式化 |
Import Cost |
行內(nèi)顯示導(dǎo)入(import/require)的包的大小 |
Indenticator |
縮進(jìn)高亮 |
IntelliSense for css class names |
css class輸入提示 |
JavaScript (ES6) code snippets |
ES6語法代碼段 |
JavaScript Standard Style |
Standard風(fēng)格 |
Jest Runner |
支持執(zhí)行Jest單個測試文件或單個用例 |
JS Refactor |
代碼重構(gòu)工具,提取函數(shù)、變量重命名等等 |
JSON to TS |
JSON結(jié)構(gòu)轉(zhuǎn)化為typescript的interface |
JSON Tools |
格式化和壓縮JSON |
jumpy |
快速跳轉(zhuǎn)到指定單詞位置 |
language-stylus |
Stylus語法高亮和提示 |
Less IntelliSense |
less變量與混合提示 |
Lodash |
Lodash代碼段 |
Log Wrapper |
生產(chǎn)打印選中變量的代碼 |
markdownlint |
Markdown格式提示 |
MochaSnippets |
Mocha代碼段 |
Node modules resolve |
快速導(dǎo)航到Node模塊 |
npm |
運(yùn)行npm命令 |
npm Intellisense |
導(dǎo)入模塊時,提示已安裝模塊名稱 |
Output Colorizer |
彩色輸出信息 |
Partial Diff |
對比兩段代碼或文件 |
Parameter Hints |
在函數(shù)調(diào)用處指示參數(shù)名稱 |
Path Autocomplete |
路徑完成提示 |
Path Intellisense |
另一個路徑完成提示 |
Polacode |
將代碼生成圖片 |
PostCss Sorting |
css排序 |
Prettier – Code formatter |
prettier官方插件 |
Prettify JSON |
格式化JSON |
Project Manager |
快速切換項(xiàng)目 |
Quokka.js |
不需要手動運(yùn)行,行內(nèi)顯示變量結(jié)果 |
Rainbow CSV |
CSV文件使用彩虹色渲染不同列 |
React Native Storybooks |
storybook預(yù)覽插件,支持react |
React Playground |
為編輯器提供一個react組件運(yùn)行環(huán)境,方便調(diào)試 |
React Standard Style code snippets |
react standar風(fēng)格代碼塊 |
REST Client |
發(fā)送REST風(fēng)格的HTTP請求 |
Sass |
sass插件 |
Settings Sync |
VSCode設(shè)置同步到Gist |
Sort lines |
排序選中行 |
Sort Typescript Imports |
typescript的import排序 |
String Manipulation |
字符串轉(zhuǎn)換處理(駝峰、大寫開頭、下劃線等等) |
stylelint |
css/sass/less代碼風(fēng)格 |
SVG Viewer |
SVG查看器 |
Syncing |
vscode設(shè)置同步到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文件顯示模塊當(dāng)前版本和最新版本 |
vetur |
Vue插件 |
Volar |
Vue插件,支持Vue3 |
View Node Package |
快速打開選中模塊的主頁和代碼倉庫 |
Visual Studio IntelliCode |
基于AI的代碼提示 |
VS Live Share |
實(shí)時多人協(xié)助 |
VSCode Great Icons |
文件圖標(biāo)拓展 |
vscode-database |
操作數(shù)據(jù)庫,支持mysql和postgres |
vscode-icons |
文件圖標(biāo),方便定位文件 |
vscode-random |
隨機(jī)字符串生成器 |
vscode-spotify |
集成spotify,播放音樂 |
vscode-styled-components |
styled-components高亮支持 |
vscode-styled-jsx |
styled-jsx高亮支持 |
Vue Peek |
支持跳轉(zhuǎn)到Vue組件定義文件 |
Vue TypeScript Snippets |
Vue Typescript代碼段 |
VueHelper |
Vue2代碼段(包括Vue2 api、vue-router2、vuex2) |
Wallaby.js |
實(shí)時測試插件 |
Wrap Console Log Lite |
對選中代碼快速console.log |
二、主題
名稱 |
預(yù)覽 |
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 |
@@##@@
|
三、個人首選項(xiàng)配置(僅供參考)
{??"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?FilesGitcmdgit.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, }