Comment réduire des sections de code dans Visual Studio Code pour Windows?

772

Comment puis-je plier ou réduire des sections de code dans Visual Studio Code?

Cette fonctionnalité est-elle prise en charge?

pseudo
la source

Réponses:

1353

Le pliage a été déployé et est désormais implémenté depuis Visual Studio Code version 0.10.11 . Ces raccourcis clavier sont disponibles:

  • Plier replie la région la plus intérieure non effondrée du curseur:

    • Ctrl+ Shift+ [sur Windows et Linux
    • + + [sur macOS
  • Déplier déplie la région réduite au niveau du curseur:

    • Ctrl+ Shift+ ]sur Windows et Linux
    • + + ]sur macOS
  • Tout replier replie toutes les régions dans l'éditeur:

    • Ctrl+ ( K=> 0) (zéro) sous Windows et Linux
    • + ( K=> 0) (zéro) sur macOS
  • Déplier tout déplie toutes les régions dans l'éditeur:

    • Ctrl+ ( K=> J) sur Windows et Linux
    • + ( K=> J) sur macOS

Références: https://code.visualstudio.com/docs/getstarted/keybindings

Brocco
la source
2
@DouglasGaskell J'ai fait la même erreur. C'est un zéro et non un o, la Fold Levelréponse de Michael Fulton était plus logique pour moi.
Dan Marshall
1
Je ne sais pas si c'est un problème de version de code, un problème de version Windows ou autre chose, mais sur mon PC, cela ne fonctionne qu'avec Right-Ctrl. Vous voudrez peut-être le noter!
Mars
7
Son essentiellement Ctrl + K, Ctrl + [n] où n est le numéro de niveau jusqu'à ce que vous souhaitez plier. Par conséquent, si vous recherchez un équivalent de Ctrl + M, Ctrl + O de VS (C #) sur VSCode, ce sera Ctrl + K, Ctrl + 3.
Yashash Gaurav
3
@ Preza8 Appuyez F1et tapez Fold or Unfold
AlexG
2
@ Preza8 Il vous montre également le raccourci clavier actuellement assigné, si aucun n'est assigné, vous pouvez l'attribuer vous-même. En outre, il pourrait y avoir une extension pour ajouter des boutons GUI personnalisés
AlexG
222

À partir de Visual Studio Code version 1.12.0, avril 2017, consultez Édition de base> Pliage section dans la documentation.

Les clés par défaut sont:

Tout plier: CTRL+ K, CTRL+0 (zéro)

Niveau de pliage [n]: CTRL+ K, CTRL+[n] *

Déplier tout: CTRL+ K, CTRL+J

Région de pliage: CTRL+ K, CTRL+[

Déplier la région: CTRL+ K, CTRL+]

* Niveau de pliage: pour plier toutes les classes sauf les plus extérieures, essayez CTRL+ K, CTRL+1

Mac: utilisez plutôt CTRL(merci Prajeet)

Michael Fulton
la source
Enregistre-t-il et restaure-t-il l'état des plis entre le démarrage / l'arrêt IDE?
Vert
Une raison quelconque ctrl+k,ctrl+numne fonctionne que sur les nombres supérieurs à qwerty et non sur pavé numérique
MotKohn
2
Plier au niveau [n] ne plie pas la section où se trouve le curseur. Cela me fait toujours penser qu'il n'a pas fait ce que j'attendais. Existe-t-il une option pour désactiver ce comportement?
RonnBlack
92

Le pliage de code par régions est arrivé avec la v1.17. Documentation pliante par régions . Et v1.19 et 1.23 .

[En général, vous pouvez ajouter un espace, par exemple // region and // endregionà //region and //endregionet cela fonctionnera également.]

TypeScript/JavaScript: //#region and //#endregion or // #region and // #endregion
C#:                    #region and #endregion
C/C++:                 #pragma region and #pragma endregion
F#:                    //#region and //#endregion
PowerShell:            #region and #endregion
Python:                #region and #endregion
VB:                    #Region and #End Region
PHP:                   #region and #endregion
Bat:                   ::#region and ::#endregion or REM #region and REM #endregion
Markdown:              <!-- #region --> and <!-- #endregion -->
Golang                 //region and //endregion or //#region and //#endregion
Java                   //#region and //#endregion
CSS/SCSS/Less:         /* #region */ and /* #endregion */ or /*#region*/ and /*#endregion*/
SCSS/Less:             // #region and // #endregion
Go:                    // region, // endregion and // #region, // #endregion
shellscript:           # region and # endregion
Perl5                  #region and #endregion or =pod and =cut`

Important: Si vous ne voyez pas votre langue dans la liste:

Chaque langue a également des extraits disponibles pour les marqueurs. Tapez '#' et invoquez l'achèvement du code pour les voir. Pour que les marqueurs de région soient configurés pour votre langue, contactez le fournisseur d'extension de langue.

Tapez donc #puis Ctrl+ Spacepour voir les marqueurs de région pour n'importe quelle langue.


marque
la source
1
// regionet // endregionne fonctionnent pas avec VS Code version 1.22 (je n'ai pas testé les versions inférieures ou supérieures à cela cependant). Mais // #regionet // #endregionfonctionne (notez le «#» et l'espace dans les deux). De cette façon, ESLint (si vous utilisez) n'affichera pas d'erreur si la spaced-commentrègle est activée (c'est-à-dire qu'elle n'est pas définie sur «off» ou 0).
ozanmuyes
En CSS, c'est en fait /* #region Foo Bar */et/* #endregion */
toddmo
1
@ozanmuyes cela dépend du type de fichier (langue). //regionet //endregionsont pour JavaScript.
lealceldeiro
Fonctionne aussi bien dans les fichiers Docker .yaml, si vous installez le docker ext de Microsoft: marketplace.visualstudio.com/…
Robert
v1.41: J'ai essayé XML et cela a fonctionné! <!-- #region --> elements <!-- #endregion -->. Il affiche le texte suivant la # région sur la section pliée. Il se replie correctement de la # région actuelle vers la # région géographique correspondante, même s'il y en a d'autres imbriquées - tout comme les parenthèses dans n'importe quelle équation. Il se souvient du paramètre de pliage pour les régions imbriquées. Ctrl + k + Ctrl + [et Ctrl + k + Ctrl +] ferme / ouvre correctement les plis au niveau du curseur. (qui me semble un peu en arrière, mais whatevah) Super truc!
TonyG
73

Cette fonctionnalité est désormais disponible dans la version standard. Pour faire apparaître les contrôles de réduction / expansion, vous devez passer la souris sur la zone juste à droite des numéros de ligne, comme indiqué dans cette capture d'écran:

Entrez la description de l'image ici

BraveNewMath
la source
31

Vous devez ajouter des paramètres utilisateur:

{
    "editor.showFoldingControls": "always",
    "editor.folding": true,
    "editor.foldingStrategy": "indentation", 
}
Minh Tien Tran
la source
"editor.foldingStrategy" était de loin le conseil le plus utile pour moi. Je modifie le code Liquid (Shopify) et je n'ai pas pu plier mon code. Une fois que je suis passé de 'auto' à 'indentation', VS Code a regardé l'indentation et non le langage spécifique que j'utilisais, très utile, merci
Benjamin
24

Les raccourcis par défaut pour réduire / étendre sont:

Ctrl+ Shift+ [: "Plier"

Ctrl+ Shift+ Alt+ [: "Tout plier"

Ctrl+ Shift+ ]: "Déplier"

Ctrl+ Shift+ Alt+] : "Déplier tout"

Ou allez sur keybindings.json et changez comme vous le souhaitez.

Par exemple:

{
    "key": "cmd+k cmd+m",
    "command": "editor.foldAll",
    "when": "editorFocus"
},
{
    "key": "cmd+m cmd+k",
    "command": "editor.unfoldAll",
    "when": "editorFocus"
},
Samuel Pinto
la source
est-ce limité à certaines langues? ne fonctionne pas pour moi sur OSX / typescript.
dcsan
1
Veuillez vérifier ceci: ctrl+shift+alt+[ "Unfold all"vous avez écrit [au lieu de ]. Corrigez-moi si je me trompe.
fWd82
@dcsan ça ne marche pas non plus pour moi en python / linux. Ctrl + K, Ctrl + 0 (zéro) et Ctrl + K, Ctrl + J fonctionnent bien selon la réponse acceptée
clairement le
cela ne fonctionne pas
KansaiRobot
19

Si aucun des raccourcis ne fonctionne (comme pour moi), vous pouvez également ouvrir la palette de commandes ( Ctrl+ 3ou Affichage -> Palette de commandes ...) et saisir fold all:

entrez la description de l'image ici

Jorn Vernee
la source
Je pense avoir compris ce qui se passe ... il ne plie le bloc que s'il y a le [+] disponible, en python par exemple il ne plie pas ce qui suit: github.com/heldersepu/GMapCatcher/blob/master/gmapcatcher/…
Helder Sepulveda
@HelderSepulveda Eh bien, il plie soi-disant les commentaires de bloc, mais python n'en a pas. Le code que vous avez lié utilise plusieurs commentaires sur une seule ligne.
Jorn Vernee
16

ctrl+ k+ 0: Pliez tous les niveaux (espace de noms, classe, méthode, bloc)

ctrl+ k+ 1: namspace

ctrl+ k+ 2: classe

ctrl+ k+ 3: méthodes

ctrl+ k+ 4: blocs

ctrl+ k+ [ou ]: bloc de curseur actuel

ctrl+ k+ j: Déplier

M Komaei
la source
12

La réduction est désormais prise en charge dans la version 1.0 :

Raccourcis repliables du code source

Il existe de nouvelles actions de pliage pour réduire les régions de code source en fonction de leur niveau de pliage.

Il existe des actions pour replier le niveau 1 ( Ctrl+ K Ctrl+ 1) au niveau 5 ( Ctrl+ K Ctrl+ 5). Pour déplier, utilisez Déplier tout ( Ctrl+ Shift+ Alt+ ]).

Les actions de pliage de niveau ne s'appliquent pas à la région contenant le curseur actuel.

J'ai eu un problème pour trouver le ]bouton de mon clavier (disposition norvégienne), et dans mon cas, c'était le Åbouton. (Ou deux boutons à gauche et un vers le bas à partir du bouton de retour arrière.)

Stian Standahl
la source
8

Avec JavaScript:

//#region REGION_NAME
   ...code here
//#endregion
Rafael Grilli
la source
4

Depuis la version 1.3.1 (17/07/2016), la réduction de bloc est beaucoup plus pratique.

Toute ligne suivie d'une ligne en retrait aura un caractère «-» pour permettre la réduction. Si le bloc est réduit, il sera alors remplacé par un caractère «+» qui ouvrira le bloc réduit.

Le ( Ctrl+ Shift+ Alt+ ]) affectera toujours tous les blocs, fermant un niveau. Chaque utilisation répétée fermait un niveau de plus. Le ( Ctrl+ Shift+ Alt+[ ) fonctionne dans le sens inverse.

Hourra, l'effondrement des blocs fonctionne enfin utilement.

Miguelito
la source
Ajout à cela - si vous devancez un commentaire autour d'une région de code, vous pouvez utiliser des commentaires pour créer des régions personnalisées dans votre code et réduire des segments personnalisés entiers! Grande fonctionnalité!
Tim Cederquist
Cela ne fonctionne pas à partir du 13 juillet 2019. Y a-t-il un autre raccourci clavier qui le remplace? (effondrement / expansion d'un niveau à la fois? {
Martin
3

Contrôles de pliage de code à l'intérieur de l'éditeur pour développer les nœuds de documents structurés XML et le code source dans VsCode

Pas de conseils techniques ici, juste de simples ajustements des préférences de VsCode.

J'ai réussi à afficher les contrôles de pliage de code toujours dans VsCode en allant dans les préférences et en recherchant «pliage». Maintenant, sélectionnez simplement pour toujours afficher ces commandes. Cela fonctionne avec le code Typescript et le HTML des modèles dans la solution Angular 8 avec laquelle je l'ai testé.

Cela a été testé avec VsCode Insiders 1.37.0 fonctionnant sur un système d'exploitation Windows 10.

Afficher les contrôles de pliage de code toujours dans VsCode

Tore Aurstad
la source
3

La v1.42 ajoute de belles améliorations à l'apparence et au fonctionnement des plis. Voir https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#folded-range-highlighting :

Mise en évidence de la plage pliée

Les gammes pliées sont désormais plus faciles à découvrir grâce à une couleur de fond pour toutes les gammes pliées.

pli en surbrillance

Couleur de surbrillance de pli Thème: Dark +

La fonction est contrôlée par le paramètre editor.foldingHighlight et la couleur peut être personnalisée avec l'éditeur de couleur.foldBackground.

"workbench.colorCustomizations": { "editor.foldBackground": "#355000" }

Améliorations pliantes

Shift + Clicksur l'indicateur de pliage ne plie que les plages intérieures. Shift + Clickà nouveau (lorsque toutes les plages internes sont déjà pliées), le parent sera également plié. Shift + Clickdéplie à nouveau tout.

clic de décalage de pli

Lorsque vous utilisez la commande Plier (kb ( editor.fold))] sur une plage déjà pliée, la plage parent dépliée suivante sera pliée.

marque
la source
2

Sur un Mac, c'est la touche de commande RHS K, pas la gauche pour les commandes de pliage de code.

Sinon , la main gauche touche Commande supprimera la ligne en cours, K.

ReaddyEddy
la source
2

Cette fonctionnalité est désormais prise en charge, depuis Visual Studio Code 1.17 . Pour plier / réduire votre bloc de code, ajoutez simplement les balises de région, telles que //#region my block nameet //#endregionsi vous codez en TypeScript / JavaScript.

Exemple:

Région pliante

Murilo Perrone
la source
1

Extension VSCode: Fold Level , un pli clé au niveau souhaité.

entrez la description de l'image ici

vikyd
la source
0

Je souhaite que Visual Studio Code puisse gérer:

#region Function Write-Log
Function Write-Log {
    ...
}
#endregion Function Write-Log

À l'heure actuelle, Visual Studio Code l'ignore et ne le réduit pas. Pendant ce temps, Notepad ++ et PowerGUI gèrent cela très bien.

Mise à jour: je viens de remarquer une mise à jour pour Visual Studio Code. Ceci est désormais pris en charge!

M. ennuyé
la source
0

Remarque: ces raccourcis fonctionnent uniquement comme prévu si vous modifiez votre keybindings.json

Je n'étais pas satisfait des raccourcis par défaut, je voulais qu'ils fonctionnent comme suit:

  • Pli: Ctrl+ Alt+]
  • Pliez récursivement: Ctrl+ ⇧ Shift+ Alt+]
  • Tout plier: Ctrl+ kpuis Ctrl+]
  • Déplier: Ctrl+ Alt+[
  • Déplier récursivement: Ctrl+ ⇧ Shift+ Alt+[
  • Déplier tout: Ctrl+ kpuis Ctrl+[

Pour le configurer:

  • Ouvert Preferences: Open Keyboard Shortcuts (JSON)( Ctrl+ ⇧ Shift+ p)
  • Ajoutez l'extrait suivant à ce fichier

    Vous avez déjà des raccourcis clavier personnalisés pour le pliage / dépliage? Ensuite, vous devrez les remplacer.

    {
        "key": "ctrl+alt+]",
        "command": "editor.fold",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+alt+[",
        "command": "editor.unfold",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+alt+]",
        "command": "editor.foldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+alt+[",
        "command": "editor.unfoldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+[",
        "command": "editor.unfoldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+]",
        "command": "editor.foldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
JesusIniesta
la source