← Tous les exemples

VS Code Web : indentations plus larges dans l'arborescence

Augmente l'indentation et ajoute des guides dans l'arborescence pour une hiérarchie plus claire.

Code à copier

/* Bigger indentation in the Explorer file tree for better hierarchy (works on github.dev too) */
.monaco-workbench [id*="workbench.view.explorer"] .monaco-tl-twistie {
  margin-left: 4px !important;
}
.monaco-workbench [id*="workbench.view.explorer"] .monaco-list-row {
  --vscode-tree-indent: 16px;
}
.monaco-workbench [id*="workbench.view.explorer"] .monaco-tl-indent {
  border-left: 1px dashed rgba(127,127,127,0.3) !important;
}

Comment utiliser cet exemple

1. Copiez le code avec le bouton ci-dessus.
2. Installez JustZix (2 minutes) et ouvrez l'extension sur la page cible.
3. Ajoutez une nouvelle règle correspondant à cette page.
4. Collez le code dans le panneau CSS de la règle et enregistrez — l'effet apparaît aussitôt.