Auto Rename Tag
自动更新相对应的开始标签或结束标签的标签名
Babel ES6/ES7
可实现在jsx语法快捷键'cttl+/'实现多行复制
Bracket Pair Colorizer 2
给代码的{}增加不同彩色,便于区分不同行代码
Chinese (Simplified) Language Pack for Visual Studio Code
vscode汉化
Code Runner
在js文件中,可以对选中的代码右键点击'Run code'执行运行
Dracula Official
主题
ESLint
代码规范
indent-rainbow
可以使代码换行对齐更加具有可读性
Live Server
对html文件,右键点'Open with Live Server'实现本地服务地方式启动文件
markdownlint
可实现对maekdown文件,右键点击'打开预览'在编辑器中查看效果
open in browser
配置默认浏览器打开文件
Power Mode
可设置编辑器上光标效果
Prettier - Code formatter
格式化你的代码,是代码更加美观
Simple React Snippets
开发react插件
Sublime Text Keymap and Settings Importer
代码超长时,右上键有快速拖动代码功能
vscode-icons
项目Icon集合,是项目在编辑上目录及文件加上icon更加美化
Vetur
开发vue插件
CSS Peek
可实现按住ctrl键再鼠标移至CSS的id或则class上,来查看其样式属性
Import Cost
导入库时,可查看包的大小
Settings Sync
同步vscode所有配置
settings.json文件配置
{
"editor.fontSize": 16,
"editor.tabSize": 2,
"open-in-browser.default": "chrome",
"search.followSymlinks": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.run": "onSave",
// #使用带引号替代双引号
"prettier.singleQuote": true,
"prettier.semi": false,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned"
}
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"files.eol": "\n",
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"files.autoSave": "off",
"files.associations": {
"*.vue": "vue"
},
"eslint.options": {
"extensions": [
".js",
".ts",
".tsx",
".vue",
".jsx",
".dart"
]
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"git.confirmSync": false,
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"editor.renderIndentGuides": false,
"code-runner.runInTerminal": true,
"code-runner.defaultLanguage": "JS",
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/tmp": true,
// "**/node_modules": true,
"**/bower_components": true,
// "**/dist": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true
},
"prettier.disableLanguages": [],
"editor.renderWhitespace": "boundary",
"editor.suggest.snippetsPreventQuickSuggestions": false,
"dart.debugExternalLibraries": true,
"dart.debugSdkLibraries": true,
"dart.enableCompletionCommitCharacters": true,
"dart.flutterHotRestartOnSave": true,
"dart.lineLength": 120,
"dart.previewFlutterUiGuides": true,
"dart.triggerSignatureHelpAutomatically": true,
"dart.flutterSdkPath": "/Users/xucongmac/code/flutter",
"workbench.iconTheme": "vscode-icons",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"workbench.colorTheme": "Dracula",
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0,
// Live Server以服务器方式打开文件
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.NoBrowser": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",
"liveServer.settings.host": "127.0.0.1",
"liveServer.settings.port": 5500,
// prettier格式化代码工具配置
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.implicitProjectConfig.experimentalDecorators": true,
//powser mode书写代码时特效
"powermode.enabled": true,
// 火焰
// "powermode.presets": "flames",
// 爆炸
"powermode.presets": "simple-rift",
// 粒子
// "powermode.presets": "particles",
// 烟花
// "powermode.presets": "fireworks",
// 时间间隔
"powermode.comboTimeout": 0,
"explorer.confirmDelete": false,
// 随字体颜色变化
// "powermode.backgroundMode": "mask",
}