目前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 修改标签栏样式为换行全部展示的更多相关文章

  1. Android spinner默认样式不支持换行和修改字体样式的解决方法

    在spinner中显示的数据过多,需要换行,而Android自身提供的android.R.layout.simple_spinner_dropdown_item样式不支持换行,因此参考android提 ...

  2. echars line 底部图例强制不换行(滚动),修改图例样式

    { grid: { left: '5px', right: '10px', top: '10px', bottom: '40px', containLabel: true }, tooltip: { ...

  3. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  4. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  5. MFC学习 修改窗口样式

    1. 在PreCreateWindow中可用CREATESTRUCT cs, cs.lpszName修改窗口标题, cs.lpszClass = AfxRegisterWndClass 修改图标与样式 ...

  6. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  7. vue-cli —— 局部修改Element样式

    最近在做vue项目时用到了Element,发现这玩意儿用起来很舒服,很新颖,上手也很快,而且效果足够酷炫.但是后面发现一个很大的问题,那就是Element的样式有限,这极大地限制了项目的应用广度,所以 ...

  8. vue修改框架样式/deep/

    /deep/ 父元素的样式名 /deep/ 要修改的样式名 使用 ... 貌似不行

  9. 【转】如何修改 video 样式

    我们这里说的“修改 video 样式”并不是要自己实现一套 controls,而是尝试修改 video 的默认样式 隐藏全屏按钮 这个很容易查到 video::-webkit-media-contro ...

随机推荐

  1. Spring AOP实现接口验签

    因项目需要与外部对接,为保证接口的安全性需要使用aop进行方法的验签; 在调用方法的时候,校验外部传入的参数进行验证, 验证通过就执行被调用的方法,验证失败返回错误信息: 不是所有的方法都需要进行验签 ...

  2. 用STM32的UART实现DMX512

    写在最前面: DMX512(digital multiplex) 其实就是主机向从机整包单向广播发送的协议(protocol),从机自取所需. 一.链接拓扑(network topology) 根据后 ...

  3. 存储系列之 LUN 和 LVM

    一.LUN 1.LUN的由来 上一篇文章已经介绍了RAID技术的原理,那么RAID的实现呢?有两种方式,RAID软件和RAID硬件.但是因软件RAID占用主机CPU和主机内存,而且RAID功能不易实现 ...

  4. (二)vue的生命周期及相关的运行流程

    @ 目录 1. vue的生命周期 经过一系列的初始化过程 需要设置数据监听 编译模板 将实例花在到DOM 并在数据变化时更新DOM 等 这是相应的生命周期函数 在用的时候直接写上, 其实很多人都这样, ...

  5. SPL基础接口

    Iterator 迭代器接口 SPL规定,所有实现了Iterator接口的class,都可以用在foreach Loop中.Iterator接口中包含5个必须实现的方法: interface Iter ...

  6. 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 ...

  7. 选择器&隔行换色

    选择器的使用理解为:执行jQuery核心函数,传入选择器的字符串    $( ... ) 基本选择器 <!DOCTYPE html> <html> <head> & ...

  8. TechEmpower Web 框架性能第19轮测试结果正式发布,ASP.NET Core在主流框架中拔得头筹

    TechEmpower 第19轮编程语言框架性能排行榜2020年5月28日正式发布,详见官方博客:https://www.techempower.com/blog/2020/05/28/framewo ...

  9. Rocket - devices - PLIC

    https://mp.weixin.qq.com/s/FR3yeLLBqy0n-fflw-ATgg 简单介绍TLPLIC的实现. 1. GatewayPLICIO PLIC是Platform-Leve ...

  10. break 与 continue 的作用 详解

    1.break 用break语句可以使流程跳出switch语句体,也可以用break语句在循环结构终止本层循环体,从而提前结束本层循环. 使用说明: (1)只能在循环体内和switch语句体内使用br ...