在Visual Studio代码中显示文件选项卡中的路径

Question

我的项目中有一个基于组件的文件夹结构。它是一堆组件文件夹，每个文件夹都有一个index.js文件。

是否可以使Visual Studio代码在文件选项卡中显示父文件夹名称？或者我是否仅限于看到一堆显示index.js而没有其他内容的标签？

Answer 1

现在，您可以将Visual Studio代码配置为始终在选项卡中显示父文件夹名称！

这就是文件init/views.js，init/routes.js和plugins/modal.js的样子：

将此行添加到用户设置：

"workbench.editor.labelFormat": "short"

旁注：

显示当前文件的确切文件路径的另一个有用工具是使用breadCrumbs。将其添加到您的用户设置：

"breadcrumbs.enabled": true

仅供参考：要打开Visual Studio代码的用户设置JSON文件：选择菜单文件→首选项→设置→选项卡用户设置（通过在命令面板中键入或使用文件菜单），然后单击右上角的大括号按钮以JSON格式访问“设置”文件而不是GUI。

Answer 2

Visual Studio Code现在已经改进了tab-UI来解决这个问题。

当您打开多个具有相同文件名的选项卡时，Visual Studio Code将自动在每个选项卡中显示父foldername。

以下是一个示例：我已打开event.js和两个index.js文件。 Visual Studio Code自动决定显示index.js文件的foldername是个好主意：）

它几乎解决了我的大部分问题。

Answer 3

转到主菜单→文件→首选项→设置。并搜索（在Mac上为 Cmd + F ，在Windows上为 Ctrl + F ）工作台标签格式。

选择 short 选项。

Answer 4

我创建了一个简单的Visual Studio Code插件，该插件接受正则表达式和颜色的列表，并根据它们更改titleBar / tabColor。对于在单一存储库或具有多个软件包的大型项目（例如Lerna或React + React Native）中进行工作非常有用。

ColorTabs

Answer 5

在 VSCode 1.53 中你可以使用这些设置：

根据活动编辑器控制窗口标题。根据上下文替换变量：

${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.

Answer 6

您可以安装 nice-index 扩展以获得更好的处理索引文件的体验。

然而，截至目前，它仅在您打开多个索引文件时才有效。这可以通过将 labelFormat 更改为“short”来解决，正如其他答案所建议的那样。