comment implémenter les régions / le code de réduction en javascript


132

Comment pouvez-vous implémenter des régions aka la réduction du code pour JavaScript dans Visual Studio?

S'il y a des centaines de lignes en javascript, ce sera plus compréhensible en utilisant le pliage de code avec des régions comme dans vb / C #.

#region My Code

#endregion

1
Aucune de ces solutions n'a fonctionné aussi bien pour moi que celle-ci. stackoverflow.com/questions/46267908/…
Michael Drum

Réponses:


25

L'entrée de blog ici l'explique et cette question MSDN .

Vous devez utiliser les macros Visual Studio 2003/2005/2008.

Copier + Coller à partir de l'entrée du blog par souci de fidélité:

  1. Ouvrez l'explorateur de macros
  2. Créer une nouvelle macro
  3. Nomme le OutlineRegions
  4. Cliquez sur Modifier la macro et collez le code VB suivant:
Option Strict Off
Option Explicit Off

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports System.Diagnostics
Imports System.Collections

Public Module JsMacros

    Sub OutlineRegions()
        Dim selection As EnvDTE.TextSelection = DTE.ActiveDocument.Selection

        Const REGION_START As String = "//#region"
        Const REGION_END As String = "//#endregion"

        selection.SelectAll()
        Dim text As String = selection.Text
        selection.StartOfDocument(True)

        Dim startIndex As Integer
        Dim endIndex As Integer
        Dim lastIndex As Integer = 0
        Dim startRegions As Stack = New Stack()

        Do
            startIndex = text.IndexOf(REGION_START, lastIndex)
            endIndex = text.IndexOf(REGION_END, lastIndex)

            If startIndex = -1 AndAlso endIndex = -1 Then
                Exit Do
            End If

            If startIndex <> -1 AndAlso startIndex < endIndex Then
                startRegions.Push(startIndex)
                lastIndex = startIndex + 1
            Else
                ' Outline region ...
                selection.MoveToLineAndOffset(CalcLineNumber(text, CInt(startRegions.Pop())), 1)
                selection.MoveToLineAndOffset(CalcLineNumber(text, endIndex) + 1, 1, True)
                selection.OutlineSection()

                lastIndex = endIndex + 1
            End If
        Loop

        selection.StartOfDocument()
    End Sub

    Private Function CalcLineNumber(ByVal text As String, ByVal index As Integer)
        Dim lineNumber As Integer = 1
        Dim i As Integer = 0

        While i < index
            If text.Chars(i) = vbCr Then
                lineNumber += 1
                i += 1
            End If

            i += 1
        End While

        Return lineNumber
    End Function

End Module
  1. Enregistrez la macro et fermez l'éditeur
  2. Attribuons maintenant un raccourci à la macro. Allez dans Outils-> Options-> Environnement-> Clavier et recherchez votre macro dans la zone de texte "Afficher les commandes contenant"
  3. maintenant dans la zone de texte sous "Appuyez sur les touches de raccourci", vous pouvez entrer le raccourci souhaité. J'utilise Ctrl + M + E. Je ne sais pas pourquoi - je viens de le saisir pour la première fois et de l'utiliser maintenant :)

Celui-ci est utile et le point important à noter dans les commentaires du site est "Vous devez vérifier le nom du module dans le code ci-dessus avec le nom de votre nouvelle Macro. Les deux noms doivent correspondre!"
Prasad

Cela fonctionne-t-il sur VS2010? Je ne peux pas y arriver. La macro n'apparaît pas lors de sa recherche.
M. Flibble

@Monsieur. Flibble: Pas sûr .. Je n'ai que VS2005.

D'ACCORD. J'ai posé une nouvelle question ici: stackoverflow.com/questions/2923177/...
Mr. Flibble

Microsoft a maintenant une extension pour VS2010 qui fournit cette fonctionnalité (voir ma réponse ci-dessous pour le lien).
BrianFinkel

52

Microsoft a maintenant une extension pour VS 2010 qui fournit cette fonctionnalité:

Extensions de l'éditeur JScript


C'est fantastique! J'espère qu'ils incluront cela dans la prochaine mise à jour VS. Merci d'avoir partagé!
William Niu

Extension vraiment merveilleuse, encore meilleure que l'extension de présentation tierce.
Hovis Biddle

2
tout cela se passe-t-il pour VS 2012 et 2013?
Jacques

1
C'est bien! Existe-t-il une version pour VS 2012 ou 2013?
Axel

50

Bonne nouvelle pour les développeurs qui travaillent avec la dernière version de Visual Studio

Les Web Essentials sont livrés avec cette fonctionnalité.

Regarde ça

entrez la description de l'image ici

Remarque: pour VS 2017, utilisez les régions JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions


@William un jour, les gens en auront certainement besoin;)
Kaushik Thanki

2
avec le temps, ce sera la réponse acceptée de facto.
Hakan Fıstık

Fonctionne parfaitement avec la dernière version de VSCode - Typescript à partir du 10/06/2019.
Eddy Howard

40

C'est facile!

Marquez la section que vous souhaitez réduire et,

Ctrl + M + H

Et pour développer, utilisez la marque «+» sur sa gauche.


3
Ça a marché!. Cela m'a sauvé car cela a rendu mon code plus mince car j'ai beaucoup d'appels ajax sous un seul appel ajax.
Sorangwala Abbasali

3
C'est une solution temporaire. Si vous fermez et rouvrez le fichier, la zone sélectionnée disparaît.
oneNiceFriend

32

Pour ceux qui sont sur le point d'utiliser le studio visuel 2012, existe le Web Essentials 2012

Pour ceux qui s'apprêtent à utiliser le studio visuel 2015, existe le Web Essentials 2015.3

L'utilisation est exactement comme @prasad a demandé


4
+1 - cela devrait être la réponse, car la plupart des gens utiliseront maintenant 2012/2013! (ça marche aussi pour 2013)
Peter Albert

26

En marquant une section de code (quels que soient les blocs logiques) et en appuyant sur CTRL + M + H, vous définissez la sélection comme une région qui est pliable et extensible.


MERCI! Pouvez-vous me dire comment annuler cette opération si je crée accidentellement une région que je souhaite supprimer ou modifier?
Tingo

3
Vous pouvez annuler avec CTRL + M + U - plus de raccourcis là-bas: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurien


9

Merci à 0A0D pour une excellente réponse. J'ai eu de la chance avec ça. Darin Dimitrov fait également un bon argument pour limiter la complexité de vos fichiers JS. Pourtant, je trouve des occasions où la réduction des fonctions à leurs définitions facilite la navigation dans un fichier beaucoup plus facile.

Concernant la #région en général, cette question SO la couvre assez bien.

J'ai apporté quelques modifications à la macro pour prendre en charge une réduction de code plus avancée. Cette méthode vous permet de mettre une description après le mot clé // # region ala C # et de l'afficher dans le code comme indiqué:

Exemple de code:

//#region InputHandler
var InputHandler = {
    inputMode: 'simple', //simple or advanced

    //#region filterKeys
    filterKeys: function(e) {
        var doSomething = true;
        if (doSomething) {
            alert('something');
        }
    },
    //#endregion filterKeys

    //#region handleInput
    handleInput: function(input, specialKeys) {
        //blah blah blah
    }
    //#endregion handleInput

};
//#endregion InputHandler

Macro mise à jour:

Option Explicit On
Option Strict On

Imports System
Imports EnvDTE
Imports EnvDTE80
Imports EnvDTE90
Imports System.Diagnostics
Imports System.Collections.Generic

Public Module JsMacros


    Sub OutlineRegions()
        Dim selection As EnvDTE.TextSelection = CType(DTE.ActiveDocument.Selection, EnvDTE.TextSelection)

        Const REGION_START As String = "//#region"
        Const REGION_END As String = "//#endregion"

        selection.SelectAll()
        Dim text As String = selection.Text
        selection.StartOfDocument(True)

        Dim startIndex As Integer
        Dim endIndex As Integer
        Dim lastIndex As Integer = 0
        Dim startRegions As New Stack(Of Integer)

        Do
            startIndex = text.IndexOf(REGION_START, lastIndex)
            endIndex = text.IndexOf(REGION_END, lastIndex)

            If startIndex = -1 AndAlso endIndex = -1 Then
                Exit Do
            End If

            If startIndex <> -1 AndAlso startIndex < endIndex Then
                startRegions.Push(startIndex)
                lastIndex = startIndex + 1
            Else
                ' Outline region ...
                Dim tempStartIndex As Integer = CInt(startRegions.Pop())
                selection.MoveToLineAndOffset(CalcLineNumber(text, tempStartIndex), CalcLineOffset(text, tempStartIndex))
                selection.MoveToLineAndOffset(CalcLineNumber(text, endIndex) + 1, 1, True)
                selection.OutlineSection()

                lastIndex = endIndex + 1
            End If
        Loop

        selection.StartOfDocument()
    End Sub

    Private Function CalcLineNumber(ByVal text As String, ByVal index As Integer) As Integer
        Dim lineNumber As Integer = 1
        Dim i As Integer = 0

        While i < index
            If text.Chars(i) = vbLf Then
                lineNumber += 1
                i += 1
            End If

            If text.Chars(i) = vbCr Then
                lineNumber += 1
                i += 1
                If text.Chars(i) = vbLf Then
                    i += 1 'Swallow the next vbLf
                End If
            End If

            i += 1
        End While

        Return lineNumber
    End Function

    Private Function CalcLineOffset(ByVal text As String, ByVal index As Integer) As Integer
        Dim offset As Integer = 1
        Dim i As Integer = index - 1

        'Count backwards from //#region to the previous line counting the white spaces
        Dim whiteSpaces = 1
        While i >= 0
            Dim chr As Char = text.Chars(i)
            If chr = vbCr Or chr = vbLf Then
                whiteSpaces = offset
                Exit While
            End If
            i -= 1
            offset += 1
        End While

        'Count forwards from //#region to the end of the region line
        i = index
        offset = 0
        Do
            Dim chr As Char = text.Chars(i)
            If chr = vbCr Or chr = vbLf Then
                Return whiteSpaces + offset
            End If
            offset += 1
            i += 1
        Loop

        Return whiteSpaces
    End Function

End Module

6
VS 2010 a un framework d'extensions mis à jour et quelqu'un a été assez gentil pour créer un plugin de pliage de code appelé "Visual Studio 2010 JavaScript Outlining" ici: jsoutlining.codeplex.com
Michael La Voie

2
Pouvons-nous écrire la macro en C # au lieu de VB?
xport

6

C'est maintenant nativement dans VS2017:

//#region fold this up

//#endregion

Les espaces entre // et # n'ont pas d'importance.

Je ne sais pas dans quelle version cela a été ajouté, car je ne trouve aucune mention à ce sujet dans les journaux des modifications. Je peux l'utiliser dans la v15.7.3.



0

si vous utilisez Resharper

jachère les étapes de cette photo

entrez la description de l'image ici puis écrivez ceci dans l'éditeur de modèle

  //#region $name$
$END$$SELECTION$
  //#endregion $name$

et nommez-le #regioncomme sur cette image entrez la description de l'image ici

j'espère que cela vous aidera


0

Aucune de ces réponses n'a fonctionné pour moi avec Visual Studio 2017.

Le meilleur plugin pour VS 2017: les régions JavaScript

Exemple 1:

entrez la description de l'image ici

Exemple 2:

entrez la description de l'image ici

Testé et approuvé:

entrez la description de l'image ici


votre réponse duplique simplement celle-ci
Pavlo Zhukov

Comme je le vois dans l'historique des modifications, il n'y a eu aucun changement dans l'URL de l'image après la soumission initiale en 2016
Pavlo Zhukov

0

Pour Visual Studio 2017.

    //#region Get Deactivation JS
    .
    .
    //#endregion Get Deactivation JS

Cela ne fonctionnait pas plus tôt, j'ai donc téléchargé l'extension d' ici


-2

La région doit fonctionner sans modifier les paramètres

//#region Optional Naming
    var x = 5 -0; // Code runs inside #REGION
    /* Unnecessary code must be commented out */
//#endregion

Pour activer la zone de commentaire de réduction / ** /

/* Collapse this

*/

Paramètres -> Recherche "pliage" -> Editeur: Stratégie de pliage -> De "auto" à "indentation".

ÉTIQUETTES: Node.js Nodejs Node js Javascript ES5 ECMAScript commentaire pliage région de masquage Code Visual Studio vscode 2018 version 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions


-3

Non seulement pour VS mais presque pour tous les éditeurs.

(function /* RegionName */ () { ... })();

Attention: présente des inconvénients tels que la portée.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.