cómo implementar regiones / colapso de código en javascript

¿Cómo puede implementar regiones, también conocido como colapso de código para JavaScript en Visual Studio?

Si hay cientos de líneas en JavaScript, será más comprensible usar el plegado de código con regiones como en vb / C #.

#region My Code

#endregion

La entrada del blog aquí lo explica y esta pregunta de MSDN .

Debe usar las macros de Visual Studio 2003/2005/2008.

Copiar + Pegar desde la entrada del Blog por fidelidad:

1. Abra el Explorador de macros
2. Crear una nueva macro
3. Nombralo OutlineRegions
4. Haga clic en Editar macro y pegue el siguiente código 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. Guarde la macro y cierre el editor
6. Ahora asignemos acceso directo a la macro. Vaya a Herramientas-> Opciones-> Entorno-> Teclado y busque su macro en el cuadro de texto "mostrar comandos que contienen"
7. ahora en el cuadro de texto debajo de "Presionar teclas de acceso directo" puede ingresar el acceso directo deseado. Yo uso Ctrl + M + E. No sé por qué: lo ingresé por primera vez y lo uso ahora :)

Microsoft ahora tiene una extensión para VS 2010 que proporciona esta funcionalidad:

Extensiones del editor JScript

Buenas noticias para los desarrolladores que trabajan con la última versión de Visual Studio.

Los Web Essentials vienen con esta característica.

Mira esto

Nota: Para VS 2017, use las regiones de JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

¡Eso es fácil!

Marque la sección que desea contraer y,

Ctrl + M + H

Y para expandir use la marca '+' a su izquierda.

Para aquellos que están por usar Visual Studio 2012, existe Web Essentials 2012

Para aquellos que están por usar Visual Studio 2015, existe Web Essentials 2015.3

El uso es exactamente como @prasad preguntó

Al marcar una sección de código (independientemente de los bloques lógicos) y presionar CTRL + M + H, definirá la selección como una región que es plegable y expandible.

El complemento JSEnhancements para Visual Studio aborda esto muy bien.

Gracias a 0A0D por una excelente respuesta. He tenido buena suerte con eso. Darin Dimitrov también hace un buen argumento sobre la limitación de la complejidad de sus archivos JS. Aún así, encuentro ocasiones en las que el colapso de funciones a sus definiciones hace que navegar por un archivo sea mucho más fácil.

Con respecto a #region en general, esta pregunta SO lo cubre bastante bien.

He realizado algunas modificaciones en la Macro para admitir el colapso de código más avanzado. Este método le permite poner una descripción después de la palabra clave // ​​# region ala C # y la muestra en el código como se muestra a continuación:

Código de ejemplo:

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

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

Esto ahora es nativo en VS2017:

//#region fold this up

//#endregion

El espacio en blanco entre // y # no importa.

No sé en qué versión se agregó esto, ya que no puedo encontrar ninguna mención en los registros de cambios. Puedo usarlo en v15.7.3.

En VS 2012 y VS 2015, instale el complemento WebEssentials y podrá hacerlo.

http://vswebessentials.com/features/javascript

si está utilizando Resharper

seguir los pasos en esta foto

luego escribe esto en el editor de plantillas

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

y nombrarlo #regioncomo en esta imagen

espero que esto te ayude

Ninguna de estas respuestas no funcionó para mí con Visual Studio 2017.

El mejor complemento para VS 2017: Regiones JavaScript

Ejemplo 1:

Ejemplo 2

Probado y aprobado:

Para visual studio 2017.

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

Esto no funcionaba antes, así que descargué la extensión desde aquí

La región debería funcionar sin cambiar la configuración

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

Para habilitar el área de comentarios contraída / ** /

/* Collapse this

*/

Configuración -> Buscar "plegado" -> Editor: Estrategia de plegado -> De "automático" a "sangría".

TAGS: Node.js Nodejs Node js Javascript ES5 ECMAScript comentarios región de ocultamiento plegable Visual studio code vscode 2018 versión 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

No solo para VS sino para casi todos los editores.

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

Advertencia: tiene desventajas como el alcance.