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

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

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

5. Enregistrez la macro et fermez l'éditeur
6. 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"
7. 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 :)

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

Extensions de l'éditeur JScript

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

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

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.

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é

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.

Le plugin JSEnhancements pour Visual Studio résout ce problème.

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

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.

Sur VS 2012 et VS 2015, installez le plugin WebEssentials et vous pourrez le faire.

http://vswebessentials.com/features/javascript

si vous utilisez Resharper

jachère les étapes de cette photo

puis écrivez ceci dans l'éditeur de modèle

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

et nommez-le #regioncomme sur cette image

j'espère que cela vous aidera

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:

Exemple 2:

Testé et approuvé:

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

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

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

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

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