...

2021「VSCode选项卡多行显示」打开文件多Tab一行显示不下怎么办?

VSCode选项卡多行显示Tab太多怎么办

有时候打开的文件多了会发现选项卡一行撑不下了。貌似其他IDE有这个多行显示功能。比如一行显示10个,10个以上就开始第二行。但是VSCode貌似截止到现在2021年还没有。所以就在网上找了一下。

其实本质就是给IDE的Tab写了个CSS并且加载

参考链接

GitHubVSCode的issue

详细步骤

步骤1 下载插件 Custom CSS and JS Loader

Custom CSS and JS Loader

步骤2 需要在本地写一个custom.css文件

我这个是在网上扒的,有能力的可以自己写。

/* Following CSS to wrap the tab-bar into multiple rows: */  

.tabs-and-actions-container > .monaco-scrollable-element {  
  height: auto !important;  
}  

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {  
  height: auto !important;  
  flex-wrap: wrap;  
}  

/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */  

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {  
        height: 25px;  
        padding-left: 4px;  
        font-size: 0.9em;  /* smaller font-size for tab icons and label */  
}  

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {  
        font-size: inherit !important;  /* inherit updated font-size for label */  
}  

/* Following CSS for smaller close button on tabs: */  

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {  
        width: 20px;  
}  

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {  
        height: 12px;  
        width: 12px;  
        background-size: 12px;  
}  

步骤3 设置 setting.json

需要在 CMD+SHIFT+P 输入 setting.json

在最后几行添加一下下面的代码

"vscode_custom_css.imports": [  
        "file:///Users/custom.css"  
    ],  
"vscode_custom_css.policy": true,  

步骤4 重启VSCode

需要在CMD+SHIFT+P 输入 Reload Custom CSS and JS

这时候VSCode会重启,多开几个选项卡就发现变化了。

这样就大功告成了。如果觉得样式不好看可以自己微调,祝愿官方早日提供这个功能吧。✿✿ヽ(°▽°)ノ✿

共有评论(0)

登陆即可评论哦