wie man Regionen / Code-Kollaps in Javascript implementiert

Wie können Sie Regionen, auch bekannt als Code Collapse, für JavaScript in Visual Studio implementieren?

Wenn Javascript Hunderte von Zeilen enthält, ist es verständlicher, wenn Code mit Regionen wie in vb / C # gefaltet wird.

#region My Code

#endregion

Der Blogeintrag hier erklärt es und diese MSDN-Frage .

Sie müssen Visual Studio 2003/2005/2008 Makros verwenden.

Kopieren + Einfügen aus dem Blogeintrag aus Gründen der Wiedergabetreue:

1. Öffnen Sie den Makro-Explorer
2. Erstellen Sie ein neues Makro
3. Nennen Sie es OutlineRegions
4. Klicken Sie auf Makro bearbeiten und fügen Sie den folgenden VB-Code ein:

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. Speichern Sie das Makro und schließen Sie den Editor
6. Weisen wir nun dem Makro eine Verknüpfung zu. Gehen Sie zu Extras-> Optionen-> Umgebung-> Tastatur und suchen Sie im Textfeld "Befehle mit" anzeigen nach Ihrem Makro
7. Jetzt können Sie im Textfeld unter "Tastenkombinationen drücken" die gewünschte Tastenkombination eingeben. Ich benutze Strg + M + E. Ich weiß nicht warum - ich habe es gerade zum ersten Mal eingegeben und benutze es jetzt :)

Microsoft hat jetzt eine Erweiterung für VS 2010 , die diese Funktionalität bietet:

JScript Editor-Erweiterungen

Gute Nachrichten für Entwickler, die mit der neuesten Version von Visual Studio arbeiten

Die Web Essentials werden mit dieser Funktion geliefert.

Überprüfen Sie dies heraus

Hinweis: Verwenden Sie für VS 2017 JavaScript-Regionen: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

Das ist einfach!

Markieren Sie den Abschnitt, den Sie reduzieren möchten, und,

Strg + M + H.

Zum Erweitern verwenden Sie links die Markierung '+'.

Für diejenigen, die Visual Studio 2012 verwenden möchten, gibt es das Web Essentials 2012

Für diejenigen, die Visual Studio 2015 verwenden möchten , gibt es das Web Essentials 2015.3

Die Verwendung ist genau wie bei @prasad gefragt

Durch Markieren eines Codeabschnitts (unabhängig von logischen Blöcken) und Drücken von STRG + M + H definieren Sie die Auswahl als einen Bereich, der zusammenklappbar und erweiterbar ist.

Das JSEnhancements- Plugin für Visual Studio spricht dies gut an.

Vielen Dank an 0A0D für eine tolle Antwort. Ich habe viel Glück damit gehabt. Darin Dimitrov macht auch ein gutes Argument für die Begrenzung der Komplexität Ihrer JS-Dateien. Trotzdem finde ich Fälle, in denen das Reduzieren von Funktionen auf ihre Definitionen das Durchsuchen einer Datei erheblich erleichtert.

In Bezug auf #region im Allgemeinen deckt diese SO-Frage dies recht gut ab.

Ich habe einige Änderungen am Makro vorgenommen, um einen erweiterten Code-Zusammenbruch zu unterstützen. Mit dieser Methode können Sie eine Beschreibung nach dem Schlüsselwort // # region ala C # einfügen und diese wie folgt im Code anzeigen:

Beispielcode:

//#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

Aktualisiertes Makro:

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

Dies ist jetzt nativ in VS2017:

//#region fold this up

//#endregion

Leerzeichen zwischen // und # spielen keine Rolle.

Ich weiß nicht, in welcher Version dies hinzugefügt wurde, da ich in den Änderungsprotokollen keine Erwähnung finden kann. Ich kann es in Version 15.7.3 verwenden.

Installieren Sie unter VS 2012 und VS 2015 das WebEssentials-Plugin, und Sie können dies tun.

http://vswebessentials.com/features/javascript

Wenn Sie Resharper verwenden

Brach die Stufen in diesem Bild

Schreiben Sie dies dann in den Vorlageneditor

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

und benenne es #regionwie auf diesem Bild

hoffe das hilft dir

Keine dieser Antworten hat bei Visual Studio 2017 bei mir nicht funktioniert.

Das beste Plugin für VS 2017: JavaScript-Regionen

Beispiel 1:

Beispiel 2:

Getestet und genehmigt:

Für Visual Studio 2017.

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

Dies funktionierte früher nicht, also habe ich die Erweiterung von hier heruntergeladen

Die Region sollte funktionieren, ohne die Einstellungen zu ändern

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

So aktivieren Sie das Reduzieren des Kommentarbereichs / ** /

/* Collapse this

*/

Einstellungen -> Suche nach "Falten" -> Editor: Faltstrategie -> Von "Auto" zu "Einrückung".

TAGS: Node.js Nodejs Node js Javascript ES5 ECMAScript Kommentar Faltversteckbereich Visual Studio Code vscode 2018 Version 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

Nicht nur für VS, sondern fast für alle Editoren.

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

Warnung: hat Nachteile wie Umfang.