web-dev-qa-db-fra.com

Onglets multirangs pour VSCode

J'ai généralement plus de 10 onglets ouverts par fenêtre d'éditeur, ce qui rend fastidieux le défilement d'avant en arrière (ou utilisez ctrl + tab) pour trouver le fichier que je veux.

Existe-t-il un moyen d'avoir le tabs wrap?

Similaire à Atom's multirow-tabs .

Mise à jour: On dirait que c'est un travail en progress .

visual-studio-codevscode-settings
42
BAR

Le lien "work in progress" fourni fait référence à l'IDE de Visual Studio, qui est distinct de VSCode. La dernière que j'ai vue sur ce problème est trouvée sur la page Github du projet VSCode , qui a essentiellement dit que ce n'était pas une fonctionnalité prévue pour 2018 et a résolu le problème.

Je ne suis pas un fan d'avoir à Ctrl + Tab ou à faire défiler le menu des onglets non plus; la seule autre option que j'ai rencontrée jusqu'à présent est de tilisez la liste "Open Editors" :

Sans onglets, la section OPEN EDITORS de l'Explorateur de fichiers est un moyen rapide de parcourir les fichiers.

Cela nécessite l'utilisation de la souris, mais profiterait alors d'une disposition à onglets à plusieurs lignes. Vous pouvez le redimensionner pour vous donner plus d'espace et réorganiser les onglets si vous le souhaitez.

19
McKay G

Je fais ce qui suit pour les onglets multirangées dans visual-studio-code (jusqu'à ce qu'il y ait un support officiel ou une solution plus simple):

ÉTAPE 1: Installez l'extension VSCode Custom CSS . (Consultez la page d'extension pour les instructions d'installation appropriées. C'est un peu un hack car VSCode ne prend pas officiellement en charge la modification du CSS interne.)

ÉTAPE 2: Créez un fichier CSS (par exemple, "/ home/user/vscode/custom.css") et ajoutez le contenu suivant:

/* 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;
}

ÉTAPE 3: Pointez l'extension vers votre CSS personnalisé. Ouvrez le VSCode settings.json [Ctrl + Maj + P> "Ouvrir les paramètres (JSON)"] et ajoutez les lignes suivantes (avec votre chemin vers le fichier custom.css):

"vscode_custom_css.imports": [
    "file:///home/user/vscode/custom.css"
],
"vscode_custom_css.policy": true

ÉTAPE 4: Assurez-vous d'avoir lu le fichier Lisez-moi de l'extension VSCode Custom CSS et de l'avoir activé correctement. Vous devrez peut-être recharger VSCode. Modifiez également le CSS selon vos préférences.

CRÉDIT: Cette solution (lien vers l'extension et le CSS pour envelopper la barre d'onglets en plusieurs lignes) a été initialement publiée par Steven Laidlaw dans ce fil Github . Je viens d'étendre le CSS pour les petits onglets.

3
Abhishek

Je viens de jouer avec la console des outils de développement vscode, et on dirait que ce CSS sera suffisant pour le faire s'il est incorporé avec une extension:

.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;
}

Vous pouvez ajouter ce code à file:///C:/Users/[username]/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/workbench/workbench.main.css fichier pour l'utiliser jusqu'à la mise à jour de votre application.

Remarque: Lorsque vous ajoutez ceci à workbench.main.css fichier, VSCode avertira que l'intégrité de VScode est corrompue, ignorez ce message. VSCode fonctionnera comme avant car c'est un changement CSS (si un javascript n'utilise pas certaines positions des onglets, ou autre chose).

Sinon, comme @Bene l'a dit, il s'agit d'une zone restreinte par l'équipe de développement VSCode. Ils disent:

Restrictions

Il y a certaines restrictions que nous imposons aux extensions. Voici les restrictions et leurs objectifs.

Pas d'accès DOM

Les extensions n'ont pas accès au DOM de l'interface utilisateur de VS Code. Vous ne pouvez pas écrire une extension qui applique CSS personnalisé à VS Code ou ajoute un élément HTML à l'interface utilisateur de VS Code.

Chez VS Code, nous essayons continuellement d'optimiser l'utilisation des technologies Web sous-jacentes pour fournir un éditeur toujours disponible et très réactif et nous continuerons de régler notre utilisation du DOM à mesure que ces technologies et notre produit évoluent. Pour garantir que les extensions ne peuvent pas interférer avec la stabilité et les performances de VS Code, et que nous pouvons continuer à améliorer le DOM de VS Code sans casser les extensions existantes, nous exécutons les extensions dans un processus hôte d'extension et empêchons l'accès direct au DOM.

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

0
Taha Paksu