如何调整VS Code中打开文件的标签页显示宽度？

该需求无需自定义编码，直接通过VS Code内置设置即可实现，不需要安装第三方插件或修改程序源码。

图形化设置步骤 #

• 打开VS Code设置面板：Windows/Linux系统按快捷键 Ctrl+,，Mac系统按快捷键 Cmd+,
• 在面板顶部的搜索框输入 workbench.editor.tabSizing，找到标签尺寸配置项：
  • 选项值为fit时是默认模式：标签会自动拉伸至能显示完整文件名，也就是你当前遇到的单栏仅能展示5-6个标签的状态
  • 选项值为shrink时是紧凑收缩模式：标签会自动压缩宽度，同一标签栏可展示更多打开的文件
• 如果需要自定义固定的标签最大宽度，继续在搜索框输入 workbench.editor.tabWidth，直接填入你想要的像素数值即可，比如填入120即代表单个标签最大宽度为120像素，超出长度的文件名将自动截断显示省略号，刚好满足隐藏冗余后缀、多展示标签的需求。
• 针对不想显示.component.ts/.html这类长后缀的需求，可以额外搜索配置项 workbench.editor.labelFormat，将值改为short，标签会优先展示文件名核心识别部分，进一步减少冗余文字占用的宽度。

配置文件直接修改方式 #

如果习惯直接编辑配置项，可以按以下步骤操作：

• 按快捷键 Ctrl+Shift+P（Windows/Linux）/Cmd+Shift+P（Mac）调出命令面板
• 输入 Preferences: Open User Settings (JSON) 回车，打开用户配置文件
• 在配置的JSON对象中添加如下配置项，可根据自己的显示需求调整宽度数值：

{
  // 其余已有配置保持不变
  "workbench.editor.tabSizing": "shrink",
  "workbench.editor.tabWidth": 120,
  "workbench.editor.labelFormat": "short"
}

注意：所有配置修改保存后即时生效，不需要重启VS Code。

内容的提问来源于stack exchange，提问作者Abdulah Proho