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