VSCode Vertical Tabs
一个专为VSCode/Cursor设计的纵向标签页管理插件,解决打开大量文件时横向标签栏拥挤的问题。
🚀 功能特性
核心功能 (MVP)
- ✅ 纵向标签显示: 在侧边栏以列表形式显示所有打开的文件
- ✅ 点击切换: 点击标签即可快速切换到对应文件
- ✅ 智能折叠: 支持面板折叠/展开,节省屏幕空间
- ✅ 文件图标: 根据文件类型显示相应图标
- ✅ 活动状态: 清晰标识当前活动文件
- ✅ 未保存提示: 显示文件修改状态
增强功能
- ✅ 智能排序: 基于使用频率的智能标签排序
- ✅ 路径显示: 支持显示文件相对路径
- ✅ 快捷键支持: 键盘快速切换标签
- ✅ 配置选项: 丰富的用户自定义设置
📦 安装
从源码安装
- 克隆项目到本地
git clone https://github.com/username/vscode-vertical-tabs.git
cd vscode-vertical-tabs
- 安装依赖
npm install
- 编译插件
npm run compile
- 在VSCode中按
F5
启动调试模式,或者打包安装:
npm install -g vsce
vsce package
🎯 使用方法
基本操作
- 安装插件后,在VSCode左侧活动栏会出现"Vertical Tabs"面板
- 点击任意标签可切换到对应文件
- 右键标签可访问上下文菜单(关闭文件等)
- 点击面板标题栏的折叠按钮可隐藏/显示面板
快捷键
Ctrl+Alt+T
(Mac: Cmd+Alt+T
): 切换面板显示/隐藏
Ctrl+Alt+↓
(Mac: Cmd+Alt+↓
): 切换到下一个标签
Ctrl+Alt+↑
(Mac: Cmd+Alt+↑
): 切换到上一个标签
⚙️ 配置选项
在VSCode设置中搜索"Vertical Tabs"可找到以下配置选项:
{
// 启用插件
"verticalTabs.enable": true,
// 面板位置 (left | right)
"verticalTabs.position": "left",
// 自动折叠面板
"verticalTabs.autoCollapse": false,
// 智能排序
"verticalTabs.smartSorting": false,
// 显示文件图标
"verticalTabs.showFileIcons": true,
// 显示文件路径
"verticalTabs.showFilePath": true,
// 文件名最大显示长度
"verticalTabs.maxDisplayLength": 30
}
🛠️ 开发
环境要求
开发脚本
# 安装依赖
npm install
# 编译
npm run compile
# 监听模式编译
npm run watch
# 代码检查
npm run lint
# 打包
vsce package
调试
- 在VSCode中打开项目
- 按
F5
启动Extension Development Host
- 在新窗口中测试插件功能
📋 待办事项
- [ ] 支持拖拽排序
- [ ] 文件搜索过滤功能
- [ ] 更多文件图标支持
- [ ] 主题适配优化
- [ ] 性能优化
🤝 贡献
欢迎提交 Issue 和 Pull Request!
📄 许可证
MIT License - 详见 LICENSE 文件
🙏 致谢
感谢VSCode团队提供的强大扩展API。