Next.js搭配VSCode的index.js标签识别难题及解决方案咨询

1. 直接调整页面文件结构（最省心） #

Next.js根本不强制要求页面必须放在index.js里，完全可以把文件直接命名为对应路由的名字：

• 把pages/users/index.js改成pages/users.js，对应路由/users
• 嵌套路由比如pages/users/profile/index.js改成pages/users/profile.js，对应/users/profile
• 动态路由pages/users/[id]/index.js改成pages/users/[id].js，路由还是/users/[id]
  这样每个文件都有专属名称，VSCode标签直接显示文件名，不用折腾插件或者配置。

2. 用VSCode插件自定义标签标题 #

如果不想改项目结构，装个标签重命名插件就行，比如Tab Renamer或者Custom Editor Titles：

• 以Tab Renamer为例，设置规则把父文件夹名加到标签里，比如让pages/users/index.js显示成users - index.js
• 插件支持自定义匹配规则，能批量处理所有pages下的index文件。

3. 配置VSCode工作区自定义标签 #

不用装插件，直接在项目的.vscode/settings.json里加配置：

{
  "workbench.editor.customLabels.enabled": true,
  "workbench.editor.customLabels.patterns": {
    "**/pages/**/index.js": "${dirname} - index.js"
  }
}

这个配置会自动把pages目录下所有index.js的标签显示成「父文件夹名 - index.js」，比如pages/posts/index.js就显示posts - index.js，一眼就能区分。

内容的提问来源于stack exchange，提问作者Islam Y-