come implementare il collasso delle regioni/codice in JavaScript

Question

Come puoi implementare le regioni, a.k.a.collasso del codice per JavaScript in Visual Studio?

Se ci sono centinaia di righe in JavaScript, sarà più comprensibile utilizzare la piegatura del codice con regioni come in vb/C#.

#region My Code

#endregion

Answer 1

Blog entry qui spiega e questo MSDN domanda .

È necessario utilizzare Visual Studio 2003/2005/2008 Macro.

Copia + Incolla dal post di blog per l'amor di fedeltà:

1. Apri Esplora macro
2. creare una nuova macro
3. Nome esso OutlineRegions
4. Fare clic su Modifica macro e incollare il seguente codice VB:

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. Salvare la macro e chiudere l'editor
6. Ora diamo assegnare scelta rapida alla macro. Vai a Strumenti> Opzioni> Ambiente-> Tastiera e cercare il tuo macro in "comandi show contenenti" box
7. ora nel testo sotto il "tasti di scelta rapida Premere" è possibile inserire il collegamento desiderato. Io uso Ctrl + M + E. Non so perché - ho appena entrai prima volta e lo uso ora:)

Answer 2

Microsoft ha ora un'estensione per VS 2010 che fornisce questa funzionalità:

JScript Editor estensioni

Answer 3

Una buona notizia per gli sviluppatori che sta lavorando con l'ultima versione di Visual Studio

Gli elementi essenziali Web sono venuta con questa funzione.

Check this out

Nota: per VS 2017 l'uso Regioni JavaScript: https: //marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

Answer 4

Questo è facile!

Mark sezione che si desidera al collasso e,

  

Ctrl + M + H

E per espandere l'uso '+' segno sulla sua sinistra.

Answer 5

Per chi sta per utilizzare il Visual Studio 2012, esiste il Essentials Web 2012

Per chi sta per utilizzare il Visual Studio 2015, esiste Essentials Web 2.015,3

L'utilizzo è esattamente come @prasad chiesto

Answer 6

tracciato con una sezione di codice (indipendentemente da eventuali blocchi logici) e premendo CTRL + M + H Potrai definire la selezione come una regione che è comprimibile ed espandibile.

Answer 7

JSEnhancements plug-in per Visual Studio indirizzi questo bene.

Answer 8

Grazie alla 0A0D per una grande risposta. Ho avuto buona fortuna con esso. Darin Dimitrov fa anche un buon argomento di limitare la complessità dei file JS. Eppure, io trovo occasioni in cui crollare le funzioni per le loro definizioni rende la navigazione attraverso un file molto più facile.

Per quanto riguarda #region in generale, questo SO Domanda ricopre abbastanza bene.

Ho fatto alcune modifiche alla macro per sostenere crollo codice più avanzato. Questo metodo consente di mettere una descrizione dopo la // # regione di parola chiave ala C # e lo mostra nel codice come mostrato:

Esempio di codice:

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

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

Answer 9

Questo è ora in modo nativo in VS2017:

//#region fold this up

//#endregion

Lo spazio bianco tra il // e # non ha importanza.

Non so quale versione questa è stata aggiunta in, in quanto non riesco a trovare alcuna menzione di esso nel changelog. Sono in grado di utilizzarlo in v15.7.3.

Answer 10

Il VS 2012 e VS 2015 installare WebEssentials plug-in e sarà in grado di farlo.

http://vswebessentials.com/features/javascript

Answer 11

se si utilizza ReSharper

maggese la procedura descritta in questo pic

poi scrivere questo editor di template

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

e il nome #region come in questa immagine

speranza questo aiuterà

Answer 12

Nessuna di queste risposte non ha funzionato per me con Visual Studio 2017.

Il miglior plug-in per VS 2017: Regioni JavaScript

Esempio 1:

Esempio 2:

Testato ed approvato:

Answer 13

Per Visual Studio 2017.

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

Questo non funzionava in precedenza così ho scaricato estensione da qui

Answer 14

Regione dovrebbe funzionare senza modificare le impostazioni

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

Per consentire collasso commento zona / ** /

/* Collapse this

*/

Impostazioni -> Cerca "folding" -> Editor: pieghevole Strategia -> Da "auto" a "rientro"

.

TAGS: Node.js Nodejs Nodo js Javascript ES5 ECMAScript regione nascondiglio commento pieghevole codice Visual Studio 2018 vscode versione 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

Answer 15

Non solo per VS ma quasi per tutti gli editori.

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

Avvertimento: presenta degli svantaggi come la portata.