VSCode打开多个文件时实现标签栏多行显示

本文介绍如何在VSCode中通过安装CustomCSSandJSLoader插件并自定义CSS,实现标签页多行显示,提高多文件切换效率。

默认情况下,VSCode的标签栏是滚动式的,当打开多个文件时是在同一行中显示的,想要选择查看某个文件时很不方便。
如果想要实现多行显示标签页,也是可以的,具体方法如下。

操作步骤:

1. 安装Custom CSS and JS Loader插件

2. 添加文件/Users/txy/.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即可,效果如下图所示

在这里插入图片描述

更多软件开发课程,请访问链接地址: https://edu.csdn.net/lecturer/2104 跟汤老师学开发

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT教育-汤小洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值