vscode 修改标签栏样式为换行全部展示
目前vscode的标签栏是滚动式的,选择查看都不是很方便,于是想要搞成andriod studio那种换行全部展示的标签栏。
因为vscode是electron写的,因此修改css就可以实现。
修改方法
1. 安装Custom CSS and JS Loader插件
2. 添加文件/Users/zmj/.vscode/tabs-wrapper.css
.title {
height: auto !important;
}
.tabs-and-actions-container {
display: block !important;
height: auto !important;
}
.tabs-and-actions-container .monaco-scrollable-element {
height: auto !important;
}
.tabs-container {
overflow: initial !important;
height: auto !important;
display: flex !important;
flex-wrap: wrap !important;
}
.tabs-and-actions-container .editor-actions {
position: fixed !important;
right: 0 !important;
z-index: 20 !important;
bottom: 20px !important;
background: #222 !important;
}
3. 在settings.json中添加:
"vscode_custom_css.imports": [
"file:///Users/zmj/.vscode/tabs-wrapper.css"
],
"vscode_custom_css.policy": true,
4. cmd+shift+p呼出命令框,输入命令Reload Custom CSS and JS
5. 重启vscode
6. 完成!
vscode 修改标签栏样式为换行全部展示的更多相关文章
- Android spinner默认样式不支持换行和修改字体样式的解决方法
在spinner中显示的数据过多,需要换行,而Android自身提供的android.R.layout.simple_spinner_dropdown_item样式不支持换行,因此参考android提 ...
- echars line 底部图例强制不换行(滚动),修改图例样式
{ grid: { left: '5px', right: '10px', top: '10px', bottom: '40px', containLabel: true }, tooltip: { ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C# 动态修改CSS样式 wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...
- MFC学习 修改窗口样式
1. 在PreCreateWindow中可用CREATESTRUCT cs, cs.lpszName修改窗口标题, cs.lpszClass = AfxRegisterWndClass 修改图标与样式 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- vue-cli —— 局部修改Element样式
最近在做vue项目时用到了Element,发现这玩意儿用起来很舒服,很新颖,上手也很快,而且效果足够酷炫.但是后面发现一个很大的问题,那就是Element的样式有限,这极大地限制了项目的应用广度,所以 ...
- vue修改框架样式/deep/
/deep/ 父元素的样式名 /deep/ 要修改的样式名 使用 ... 貌似不行
- 【转】如何修改 video 样式
我们这里说的“修改 video 样式”并不是要自己实现一套 controls,而是尝试修改 video 的默认样式 隐藏全屏按钮 这个很容易查到 video::-webkit-media-contro ...
随机推荐
- Spring AOP实现接口验签
因项目需要与外部对接,为保证接口的安全性需要使用aop进行方法的验签; 在调用方法的时候,校验外部传入的参数进行验证, 验证通过就执行被调用的方法,验证失败返回错误信息: 不是所有的方法都需要进行验签 ...
- 用STM32的UART实现DMX512
写在最前面: DMX512(digital multiplex) 其实就是主机向从机整包单向广播发送的协议(protocol),从机自取所需. 一.链接拓扑(network topology) 根据后 ...
- 存储系列之 LUN 和 LVM
一.LUN 1.LUN的由来 上一篇文章已经介绍了RAID技术的原理,那么RAID的实现呢?有两种方式,RAID软件和RAID硬件.但是因软件RAID占用主机CPU和主机内存,而且RAID功能不易实现 ...
- (二)vue的生命周期及相关的运行流程
@ 目录 1. vue的生命周期 经过一系列的初始化过程 需要设置数据监听 编译模板 将实例花在到DOM 并在数据变化时更新DOM 等 这是相应的生命周期函数 在用的时候直接写上, 其实很多人都这样, ...
- SPL基础接口
Iterator 迭代器接口 SPL规定,所有实现了Iterator接口的class,都可以用在foreach Loop中.Iterator接口中包含5个必须实现的方法: interface Iter ...
- Python中出现 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 12-13: truncated \UXXXXXXXX escape
Python中出现 SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 12-13: t ...
- 选择器&隔行换色
选择器的使用理解为:执行jQuery核心函数,传入选择器的字符串 $( ... ) 基本选择器 <!DOCTYPE html> <html> <head> & ...
- TechEmpower Web 框架性能第19轮测试结果正式发布,ASP.NET Core在主流框架中拔得头筹
TechEmpower 第19轮编程语言框架性能排行榜2020年5月28日正式发布,详见官方博客:https://www.techempower.com/blog/2020/05/28/framewo ...
- Rocket - devices - PLIC
https://mp.weixin.qq.com/s/FR3yeLLBqy0n-fflw-ATgg 简单介绍TLPLIC的实现. 1. GatewayPLICIO PLIC是Platform-Leve ...
- break 与 continue 的作用 详解
1.break 用break语句可以使流程跳出switch语句体,也可以用break语句在循环结构终止本层循环体,从而提前结束本层循环. 使用说明: (1)只能在循环体内和switch语句体内使用br ...