Multirow Tabs для VSCode

У меня обычно есть вкладки 10+, открытые для каждого окна редактора, что приводит к утомительной прокрутке назад и вперед (или использованию ctrl + tab), чтобы найти нужный файл.

Есть ли способ обернуть вкладки?

Аналогично многорядным вкладкам Atom.

Обновление: Похоже, это работа в процессе.

Ответ 1

Предоставленная ссылка "в процессе" относится к Visual Studio IDE, которая отделена от VSCode. Последнее, что я видел по этой проблеме, можно найти на странице проекта VSCode на Github, где, по сути, сказано, что это не запланированная функция на 2018 год, и закрыли проблему.

Я не фанат необходимости Ctrl + Tab или прокрутки меню вкладок; единственный другой вариант, с которым я сталкивался до сих пор, - это использовать список "Открыть редакторы":

Без вкладок раздел ОТКРЫТЫЕ РЕДАКТОРЫ File Explorer - это быстрый способ навигации по файлам.

Это требует использования мыши, но в то же время нужно использовать многострочную вкладку. Вы можете изменить его размер, чтобы освободить место, и при желании изменить порядок вкладок.

Ответ 2

Я делаю следующее для многорядных вкладок в Visual-Studio-Code (пока не будет официальной поддержки или более простого решения):

ШАГ 1: Установите расширение VSCode Custom CSS. (Проверьте страницу расширения для правильной инструкции по установке. Это немного хак, поскольку VSCode официально не поддерживает изменение внутреннего CSS.)

ШАГ 2. Создайте файл CSS (скажем, "/home/user/vscode/custom.css") и добавьте следующее содержимое:

/* Following CSS to wrap the tab-bar into multiple rows: */

.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}

/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
	height: 25px;
	padding-left: 4px;
	font-size: 0.8em;  /* smaller font-size for tab icons and label */
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
	font-size: inherit !important;  /* inherit updated font-size for label */
}

/* Following CSS for smaller close button on tabs: */

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
	width: 20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
	height: 12px;
	width: 12px;
	background-size: 12px;
}

Ответ 3

Поскольку многострочные вкладки до сих пор официально не поддерживаются в VSCode, я хотел бы обратить ваше внимание на запрос функции, который я только что разместил на их github. Вместо того, чтобы всегда переносить вкладки в новую строку, я предлагаю размещать их в строках, которые полностью независимы друг от друга. Пользователь решает, что он может смешивать короткие строки с длинными строками, которые все еще требуют прокрутки. Подробности здесь:

github.com/microsoft/vscode/issues/80510

Мое предлагаемое решение, безусловно, требует больше работы, чем бесцеремонное добавление вкладок в новую строку, но взамен оно позволяет пользователю упорядочивать свои вкладки таким образом, чтобы повысить производительность.

Ответ 4

Я только что поиграл с консолью инструментов разработчика vscode, и похоже, что этого CSS будет достаточно, чтобы сделать это, если он включен с расширением:

.tabs-and-actions-container .monaco-scrollable-element {
   height: auto;
} 
.tabs-and-actions-container .monaco-scrollable-element .tabs-container {
   flex-wrap: wrap; flex: 1 1 auto;
   height: auto;
}

Вы можете добавить этот код в файл file:///C:/Users/[username]/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css, чтобы использовать его до обновления приложения.

Примечание: Когда вы добавляете это в файл workbench.main.css, VSCode будет предупреждать о нарушении целостности VScode, игнорируя это сообщение. VSCode будет функционировать, как и раньше, потому что это изменение CSS (если какой-либо JavaScript не использует некоторые позиции вкладок или что-то еще).

В противном случае, как сказал @Bene, команда разработчиков VSCode ограничивает эту область. Они говорят:

Ограничения

Существуют определенные ограничения, которые мы накладываем на расширения. Вот ограничения и их цели.

Нет доступа к DOM

Расширения не имеют доступа к DOM VS Code UI. Вы не может написать расширение, которое применяет пользовательский CSS к VS Code или добавляет HTML-элемент для пользовательского интерфейса кода VS.

В VS Code мы постоянно пытаемся оптимизировать использование веб-технологии для предоставления всегда доступного, быстро реагирующего редактор, и мы продолжим настраивать наше использование DOM, так как они технологии и наш продукт развиваются. Чтобы убедиться, что расширения не могут мешать стабильности и производительности VS Code, и что мы может продолжать улучшать DOM VS Code, не нарушая существующие расширения, мы запускаем расширения в процессе Extension Host и предотвращаем прямой доступ к DOM.

@https://code.visualstudio.com/api/extension-capabilities/overview#no-dom-access