在 VisualStudio 代码中在文件选项卡中显示路径

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

是否可以让 VisualStudio 代码在文件选项卡中显示父文件夹名称？或者我只能看到一堆只显示 index.js而不显示其他内容的选项卡？

Enter image description here

50074 次浏览
小开

Visual Studio Code has now improved their tab-UI to resolve this issue.

When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.

Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)

It pretty much solved the bulk of my problem.

小开
最佳答案

You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")

Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:

Screenshot of Visual Studio Code file tabs

Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:

Screenshot of breadcrumbs

PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.

小开

Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.

Choose the short option.

小开

I've created a simple Visual Studio Code plugin which accepts a list of regexes and colors and changes the titleBar/tabColor based on them. It's great for working on mono repositories or large projects with multiple packages (like Lerna, or React + React Native).

ColorTabs

小开

In VSCode 1.53 you can use thees settings:

Controls the window title based on the active editor. Variables are substituted based on the context:

${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.
小开

You can install the nice-index extension for a better experience dealing with index files.

However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.

小开

I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:

  1. Open settings (command + ,)
  2. Search for title
  3. You'll see something like activeEditorShort, replace it with activeEditorLong
  4. Save

Source: https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330

小开

Step 1: Go to File > Preferences > Settings

Step 2: search for "workbench.editor.labelFormat"

Step 3: select medium from a drop-down


提交答案