VSCode怎么配置快捷键一键在同名文件(如index.js和index.css)间极速切换

千墨同学_9289

千墨同学_9289

2026-04-16

1011人浏览

原创

vscode默认不支持同名不同后缀文件一键切换,需安装file switcher插件并配置快捷键(如ctrl+alt+o),该插件基于文件名(不含后缀)匹配当前工作区内的同名文件并快速切换。

vscode怎么配置快捷键一键在同名文件(如index.js和index.css)间极速切换

VSCode 默认不支持同名不同后缀文件一键切换

VSCode 原生没有 workbench.action.nextEditorBySameName 这类命令,所以按 Ctrl+Tab 或 Alt+← 都不会自动在 index.js 和 index.css 之间跳转。它只按「打开顺序」或「编辑位置历史」切换,和文件名是否相似无关。

用 Ctrl+P + @ 搜索 symbol 不解决同名文件问题

Ctrl+P 输入 @ 是跳转到当前文件内的 symbol(函数、类),不是跨文件;输入文件名关键词(如 index)虽然能列出所有匹配文件,但需要手动上下键选择——不算「一键」,尤其当项目里有 index.test.js、index.module.css 等多个变体时,容易选错。

真正可行的方案:安装插件 + 自定义快捷键

目前最稳定的方式是使用 File Switcher 插件(作者:muuvmuuv),它提供 file-switcher.switch 命令,可基于当前文件名(不含后缀)查找并切换到同名其他文件。

Aria2 Json Rpc
Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载
  • 安装插件后,在命令面板 Ctrl+Shift+P 中输入 Preferences: Open Keyboard Shortcuts (JSON),打开 keybindings.json
  • 添加如下绑定(示例为 Windows/Linux):
    [
      {
        "key": "ctrl+alt+o",
        "command": "file-switcher.switch",
        "when": "editorTextFocus"
      }
    ]
  • 该命令默认匹配规则是「去掉扩展名后完全相同」,所以 index.js 当前打开时,触发后会列出 index.css、index.ts、index.scss 等,回车即可切换
  • 注意:它不匹配 index.test.js 或 Index.js(大小写敏感),也不处理路径嵌套(比如不会从 src/pages/index.js 自动找 src/styles/index.css)

为什么不用正则替换或自定义命令模拟?

有人尝试用 Ctrl+P + 正则表达式(如 ^index\..*$)配合插件扩展,但 VSCode 的 Ctrl+P 不支持运行时正则匹配文件系统;而纯 JS 自定义命令需读取工作区文件列表、过滤、排序、唤出 QuickPick——开发成本高、启动慢、且每次更新 VSCode 版本都可能因 API 变更失效。插件已封装好这些逻辑,稳定性远高于 DIY 方案。

实际用下来,最易被忽略的是:插件只扫描当前工作区根目录下已知的文件(即被 VSCode 索引到的),如果 index.css 在 gitignore 里、或位于未加入工作区的子文件夹中,就不会出现在候选列表里。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.15

4236

6

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.27

937

5

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.28

1778

6

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

2023.08.01

3326

7

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

2023.08.10

6625

11

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

2023.08.10

5651

7

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

2023.08.21

1937

9

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

2023.08.22

2671

5

css禁止点击事件
css禁止点击事件

实现css禁止点击事件的方法有使用CSS的pointer-events属性和使用JavaScript禁用点击事件。本专题为大家提供点击事件相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2313

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.8万人学习

CSS教程
CSS教程

共754课时 | 95.8万人学习