配置

{"workbench.colorTheme": "One Dark Pro","workbench.iconTheme": "vscode-icons",// 配置文件关联，以便启用对应的智能提示，比如wxss使用css"files.associations": {"*.vue": "vue","*.wxss": "css"},// git显示推送提示"git.showPushSuccessNotification": true,// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 编辑器默认缩进"editor.tabSize": 2,// 配置emmet是否启用tab展开缩写"emmet.triggerExpansionOnTab": true,// 配置emmet对文件类型的支持，比如vue后缀文件按照html文件来进行emmet扩写"emmet.syntaxProfiles": {"vue-html": "html","vue": "html","javascript": "javascriptreact",// xml类型文件默认都是单引号，开启对非单引号的emmet识别"xml": {"attr_quotes": "single"}},// 在react的jsx中添加对emmet的支持"emmet.includeLanguages": {"jsx-sublime-babel-tags": "javascriptreact"},// 默认开启eslint"eslint.enable": true,// 文件保存时，是否自动根据eslint进行格式化"eslint.autoFixOnSave": true,// eslint vue支持，并且支持自动格式化"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": true}],//  设置标签属性不自动换行"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "aligned-multiple"},"prettyhtml": {"printWidth": 100,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}},// #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",//  设置js代码不自动换行"vetur.format.defaultFormatter.js": "vscode-typescript",// prettier进行格式化时是否安装eslint配置去执行，建议false"prettier.eslintIntegration": true,// 如果为true，将使用单引号而不是双引号"prettier.singleQuote": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"explorer.confirmDragAndDrop": false,"editor.formatOnPaste": true,"editor.formatOnSave": true,"editor.formatOnType": true,"git.path": "D:/cmder/vendor/git-for-windows/bin/git.exe","git.confirmSync": false,"git.enableSmartCommit": true,"powermode.enabled": true,"powermode.enableShake": false, //这个代表桌面是否震动"powermode.presets": "particles", //这个是样式  particles 小点点  flames 火花效果"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"workbench.startupEditor": "newUntitledFile","[vue]": {"editor.defaultFormatter": "octref.vetur"},"vsicons.dontShowNewVersionMessage": true,"git.autofetch": true,"security.workspace.trust.untrustedFiles": "open","git-graph.commitDetailsView.fileView.fileTree.compactFolders": false,// 格式化stylus, 需安装Manta's Stylus Supremacy插件"stylusSupremacy.insertColons": false, // 是否插入冒号"stylusSupremacy.insertSemicolons": false, // 是否插入分好"stylusSupremacy.insertBraces": false, // 是否插入大括号"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行"stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行//background 的相关配置"background.customImages": ["file:///D:/Backup/Downloads/wallhaven-ym1wp7_1920x1080.png"  //可以插入多张],"background.styles": [                                          //根据插入的图片进行分别设置{"content": "''","pointer-events": "none","position": "absolute","width": "100%","height": "100%","z-index": "99999","background.repeat": "no-repeat","background-size": "cover","background-position": "cover","opacity": 0.1}],"background.useFront": true,"background.useDefault": false
}

插件

1. Auto Rename Tag
2. Bracket Pair Colorizer
3. Chinese (Simplified) Language Pack for VS Code
4. ESLint
5. JavaScript (ES6) snippets
6. Npm Intellisense
7. One Dark Pro
8. Open in Browser
9. Output Colorizer
10. Path Intellisense
11. Power Mode
12. Prettier - Code formatter
13. React Native Snippet
14. Vetur
15. vscode-icons
16. Vue VSCode Snippets
17. background
18. Manta's Stylus Supremacy

代码效果展示

背景图效果展示

vsCode配置,超好看,附带背景图调试相关推荐

Android手写签名附带背景图设置
android手写签名的demo网上其实有很多,但是大多没考虑到签名用在哪里的问题,所以就需要背景图设置,保存电子签名的时候会连同背景图一起保存这才达到了电子签名的效果,背景可以放置合同,请 ...
Go安装、配置和vsCode配置Go
go的安装与配置 go下载 go语言官方下载地址:https://golang.org/dl/ go安装安装过程省略,默认安装路径C:\Go即可. go环境变量配置 1. 配置GOROOT: C:\ ...
echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。
echarts柱状图,不同颜色,立体,lable不同颜色,lable有背景图. 文章目录 echarts柱状图,不同颜色,立体,lable不同颜色,lable有背景图. 配置上下椭圆配置柱状图,和配 ...
安卓button设置背景图_这些安卓源码调试技巧，不懂的人月薪绝对不过 30k ！
今天我要跟你分享的是Framework的学习和调试的方法. 首先,Android是一种基于Linux的开放源代码软件栈,为广泛的设备和机型而创建.下图是Android平台的主要组件. 从图中你可以看到 ...
怎么更换vscode背景图，放入自己喜欢的图片
安装background插件 vscode插件市场下载插件然后配置这里配置给大家 // 是否开启背景图显示"background.enabled": true,// true- ...
2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
文章目录 1.效果展示 2.设置背景图的详细步骤 2.1 .下载background插件 2.2 .选择扩展设置 2.3 .在setting.json中编辑 2.4.对应的配置文件 2.5 .重启电脑 ...
vscode设置背景图，并解决【不受支持】的问题
一.设置背景图 1. 在扩展程序中搜索[background]插件进行安装 2. 打开设置,在搜索中输入background,选择扩展中的plugin background,选择在setting.js ...
vscode主题背景插件_vscode 全透明背景图
一.前言 08.02更新:已魔改插件可以直接下载插件使用了 10.18跟新:已发布到vscode扩展,直接搜索"background-cover"进行安装使用下载地址下载后 ...
VSCode配置PHP Debug插件调试PHP
文章目录一.首先需要架设Windows下的PHP运行环境二.VSCode中下载配置PHP Debug插件 1.下载XDebug 2.配置PHP.ini a.配置zend_extension b.打 ...

vsCode配置,超好看,附带背景图调试

配置

插件

代码效果展示

背景图效果展示

vsCode配置,超好看,附带背景图调试相关推荐

最新文章

热门文章