2021「VSCode选项卡多行显示」打开文件多Tab一行显示不下怎么办?
VSCode选项卡多行显示Tab太多怎么办
有时候打开的文件多了会发现选项卡一行撑不下了。貌似其他IDE有这个多行显示功能。比如一行显示10个,10个以上就开始第二行。但是VSCode貌似截止到现在2021年还没有。所以就在网上找了一下。
其实本质就是给IDE的Tab写了个CSS并且加载
参考链接
详细步骤
步骤1 下载插件 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)