wie man Regionen / Code-Kollaps in Javascript implementiert

131

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
Prasad
quelle
1
Keine dieser Lösungen hat bei mir so gut funktioniert wie diese. stackoverflow.com/questions/46267908/…
Michael Drum

Antworten:

25

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
  1. Speichern Sie das Makro und schließen Sie den Editor
  2. 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
  3. 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 :)
Gilles 'SO - hör auf böse zu sein'
quelle
Dieser ist nützlich und der wichtige Punkt in den Kommentaren der Site ist: "Sie müssen den Namen des Moduls im obigen Code mit dem Namen Ihres neuen Makros überprüfen. Beide Namen müssen übereinstimmen!"
Prasad
Funktioniert das auf VS2010? Ich komme nicht dazu. Das Makro wird bei der Suche nicht angezeigt.
Mr. Flibble
@Herr. Flibble: Nicht sicher. Ich habe nur VS2005.
OK. Ich habe hier eine neue Frage gestellt: stackoverflow.com/questions/2923177/…
Mr. Flibble
Microsoft hat jetzt eine Erweiterung für VS2010, die diese Funktionalität bietet (Link siehe meine Antwort unten).
BrianFinkel
52

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

JScript Editor-Erweiterungen

BrianFinkel
quelle
Das ist fantastisch! Ich hoffe, dass sie dies in das nächste VS-Update aufnehmen. Danke für das Teilen!
William Niu
Wirklich wundervolle Erweiterung, sogar besser als die Erweiterung von Drittanbietern.
Hovis Biddle
2
Geschieht dies für VS 2012 und 2013?
Jacques
1
Das ist toll! Gibt es eine Version für VS 2012 oder 2013?
Axel
50

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

Geben Sie hier die Bildbeschreibung ein

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

Kaushik Thanki
quelle
@ William eines Tages werden die Leute das sicher brauchen;)
Kaushik Thanki
2
Im Laufe der Zeit wird dies die defacto akzeptierte Antwort sein.
Hakan Fıstık
Funktioniert perfekt mit der neuesten Version von VSCode - Typescript vom 10.06.2019.
Eddy Howard
40

Das ist einfach!

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

Strg + M + H.

Zum Erweitern verwenden Sie links die Markierung '+'.

Umit Kaya
quelle
3
Es funktionierte!. Hat mich gerettet, weil mein Code schlanker aussah, da ich viele Ajax-Aufrufe unter einem einzigen Ajax-Aufruf habe.
Sorangwala Abbasali
3
Es ist eine vorübergehende Lösung. Wenn Sie die Datei schließen und erneut öffnen, verschwindet der ausgewählte Bereich.
oneNiceFriend
32

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

MCSI
quelle
4
+1 - dies sollte die Antwort sein, da die meisten Leute jetzt 2012/2013 verwenden werden! (es funktioniert auch für 2013)
Peter Albert
26

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.

Manish Jain
quelle
DANKE! Können Sie mir sagen, wie ich dies rückgängig machen kann, wenn ich versehentlich eine Region erstelle, die ich entfernen oder ändern möchte?
Tingo
3
Sie können mit STRG + M + U rückgängig machen - weitere Verknüpfungen gibt es: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian
20

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

Joel Harris
quelle
Genau das habe ich gesucht. Vielen Dank.
Axel
9

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
Michael La Voie
quelle
6
VS 2010 hat ein aktualisiertes Erweiterungsframework und jemand war nett genug, um hier ein Code-Folding-Plugin namens "Visual Studio 2010 JavaScript Outlining" zu erstellen: jsoutlining.codeplex.com
Michael La Voie
2
Können wir das Makro in C # anstelle von VB schreiben?
xport
6

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.

friggle
quelle
0

Wenn Sie Resharper verwenden

Brach die Stufen in diesem Bild

Geben Sie hier die Bildbeschreibung ein Schreiben Sie dies dann in den Vorlageneditor

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

und benenne es #regionwie auf diesem Bild Geben Sie hier die Bildbeschreibung ein

hoffe das hilft dir

Basheer AL-MOMANI
quelle
0

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

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

Beispiel 1:

Geben Sie hier die Bildbeschreibung ein

Beispiel 2:

Geben Sie hier die Bildbeschreibung ein

Getestet und genehmigt:

Geben Sie hier die Bildbeschreibung ein

Matheus Miranda
quelle
Ihre Antwort duplizieren Sie einfach diese
Pavlo Zhukov
Wie ich im Bearbeitungsverlauf sehe, gab es nach der ersten Übermittlung im Jahr 2016 keine Änderungen in der Bild-URL
Pavlo Zhukov
0

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

Charlie
quelle
-2

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

4baad4
quelle
-3

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

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

Warnung: hat Nachteile wie Umfang.

Burak Tamtürk
quelle