come implementare il collasso di regioni / codice in javascript


132

In che modo è possibile implementare la compressione del codice regioni per JavaScript in Visual Studio?

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

#region My Code

#endregion

1
Nessuna di queste soluzioni ha funzionato altrettanto bene per me come questa. stackoverflow.com/questions/46267908/…
Michael Drum,

Risposte:


25

Il post di blog qui lo spiega e questa domanda MSDN .

Devi usare Visual Studio 2003/2005/2008 Macro.

Copia + Incolla dalla voce Blog per amor di fedeltà:

  1. Apri Esplora macro
  2. Crea una nuova macro
  3. Nominalo OutlineRegions
  4. Fai clic su Modifica macro e incolla 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
  1. Salvare la macro e chiudere l'editor
  2. Ora assegniamo il collegamento alla macro. Vai su Strumenti-> Opzioni-> Ambiente-> Tastiera e cerca la tua macro nella casella di testo "mostra comandi contenenti"
  3. ora nella casella di testo sotto "Premere i tasti di scelta rapida" è possibile inserire il collegamento desiderato. Uso Ctrl + M + E. Non so perché - l'ho appena inserito la prima volta e lo uso ora :)

Questo è utile e il punto importante da notare dai commenti del sito è "Devi controllare il nome del modulo nel codice sopra con il nome della tua nuova Macro. Entrambi i nomi devono corrispondere!"
Prasad,

Funziona su VS2010? Non ci riesco. La macro non viene visualizzata durante la ricerca.
Mr. Flibble,

@Sig. Flibble: Non sono sicuro .. Ho solo VS2005.

OK. Ho chiesto in una nuova domanda qui: stackoverflow.com/questions/2923177/...
Mr. Flibble

Microsoft ora ha un'estensione per VS2010 che fornisce questa funzionalità (vedere la mia risposta di seguito per il collegamento).
BrianFinkel,

52

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

Estensioni dell'editor JScript


È fantastico! Spero che includano questo nel prossimo aggiornamento VS. Grazie per la condivisione!
William Niu,

Estensione davvero meravigliosa, persino migliore dell'estensione delineata da terze parti.
Hovis Biddle,

2
nulla di tutto ciò accade per VS 2012 e 2013?
Jacques,

1
Questo è fantastico! Esiste una versione per VS 2012 o 2013?
Axel,

50

Buone notizie per gli sviluppatori che stanno lavorando con l'ultima versione di Visual Studio

The Web Essentials sono venuta con questa funzione.

Controllalo

inserisci qui la descrizione dell'immagine

Nota: per VS 2017 utilizzare le regioni JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions


@William un giorno la gente ne avrà sicuramente bisogno;)
Kaushik Thanki,

2
col passare del tempo, questo sarà sicuramente accettato risposta.
Hakan Fıstık,

Funziona perfettamente con l'ultima versione di VSCode - Typescript al 6/10/2019.
Eddy Howard,

40

Questo è facile!

Contrassegna la sezione che vuoi comprimere e,

Ctrl + M + H

E per espandere usa il segno '+' alla sua sinistra.


3
Ha funzionato!. Mi ha salvato perché ha reso il mio codice più snello in quanto ho un sacco di chiamate ajax in un'unica chiamata ajax.
Sorangwala Abbasali,

3
È una soluzione temporanea. Se chiudi e riapri il file, l'area selezionata scompare.
oneNiceFriend

32

Per coloro che stanno per utilizzare Visual Studio 2012, esiste Web Essentials 2012

Per coloro che stanno per utilizzare Visual Studio 2015, esiste Web Essentials 2015.3

L'utilizzo è esattamente come richiesto da @prasad


4
+1: questa dovrebbe essere la risposta, dato che la maggior parte delle persone utilizzerà ormai 2012/2013! (funziona anche per il 2013)
Peter Albert,

26

Contrassegnando una sezione di codice (indipendentemente da eventuali blocchi logici) e premendo CTRL + M + H definirai la selezione come una regione che è pieghevole ed espandibile.


GRAZIE! Puoi dirmi come annullare questa operazione se creo accidentalmente una regione che desidero rimuovere o modificare?
Tingo,

3
È possibile annullare con CTRL + M + U - più scorciatoie c'è: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
Laurian


9

Grazie a 0A0D per un'ottima risposta. Ho avuto fortuna con questo. Darin Dimitrov fa anche una buona argomentazione sulla limitazione della complessità dei file JS. Tuttavia, trovo occasioni in cui il collasso delle funzioni alle loro definizioni rende molto più semplice la navigazione in un file.

Per quanto riguarda #regione in generale, questa domanda SO copre abbastanza bene.

Ho apportato alcune modifiche alla Macro per supportare il collasso del codice più avanzato. Questo metodo consente di inserire una descrizione dopo la parola chiave // ​​# ala C # e la mostra nel codice come mostrato:

Codice di esempio:

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

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 ha un framework di estensioni aggiornato e qualcuno è stato abbastanza gentile da creare un plug-in di code -ugging
Michael La Voie,

2
Possiamo scrivere la macro in C # anziché in VB?
xport,

6

Questo è ora nativamente in VS2017:

//#region fold this up

//#endregion

Gli spazi bianchi tra // e # non contano.

Non so in quale versione sia stata aggiunta, in quanto non ne trovo alcuna menzione nei log delle modifiche. Sono in grado di usarlo in v15.7.3.



0

se stai usando Resharper

muovere i passi in questa foto

inserisci qui la descrizione dell'immagine quindi scrivilo nell'editor dei modelli

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

e chiamalo #regioncome in questa immagine inserisci qui la descrizione dell'immagine

spero che questo ti aiuti


0

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

Il miglior plugin per VS 2017: JavaScript Regions

Esempio 1:

inserisci qui la descrizione dell'immagine

Esempio 2:

inserisci qui la descrizione dell'immagine

Testato e approvato:

inserisci qui la descrizione dell'immagine


la tua risposta ha appena duplicato questo
Pavlo Zhukov il

Come vedo nella cronologia delle modifiche, non ci sono stati cambiamenti nell'URL dell'immagine dopo l'invio iniziale nel 2016
Pavlo Zhukov,

0

Per Visual Studio 2017.

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

Non funzionava prima, quindi ho scaricato l'estensione da qui


-2

La 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 abilitare la compressione dell'area commenti / ** /

/* Collapse this

*/

Impostazioni -> Cerca "pieghevole" -> Editor: strategia di piegatura -> Da "auto" a "rientro".

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


-3

Non solo per VS ma quasi per tutti gli editor.

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

Attenzione: presenta degli svantaggi come l'ambito.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.