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


131

¿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

1
Ninguna de estas soluciones me funcionó tan bien como esta. stackoverflow.com/questions/46267908/…
Michael Drum

Respuestas:


25

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
  1. Guarde la macro y cierre el editor
  2. 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"
  3. 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 :)

Este es útil y el punto importante a tener en cuenta en los comentarios del sitio es "Debe verificar el nombre del módulo en el código anterior con el nombre de su nueva Macro. ¡Ambos nombres deben coincidir!"
Prasad

¿Funciona esto en VS2010? No puedo llegar La macro no aparece al buscarla.
Sr. Flibble

@Señor. Flibble: No estoy seguro ... Solo tengo VS2005.

OKAY. He hecho una nueva pregunta aquí: stackoverflow.com/questions/2923177/…
Mr. Flibble

Microsoft ahora tiene una extensión para VS2010 que proporciona esta funcionalidad (consulte mi respuesta a continuación para ver el enlace).
BrianFinkel

52

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

Extensiones del editor JScript


¡Esto es fantástico! Espero que incluyan esto en la próxima actualización de VS. ¡Gracias por compartir!
William Niu

Extensión realmente maravillosa, incluso mejor que la extensión de delineación de terceros.
Hovis Biddle

2
¿Algo de esto sucede para VS 2012 y 2013?
Jacques

1
¡Esto es genial! ¿Hay alguna versión para VS 2012 o 2013?
Axel

50

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

ingrese la descripción de la imagen aquí

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


@William algún día la gente necesitará esto con seguridad;)
Kaushik Thanki

2
A medida que pasa el tiempo, esta será la respuesta aceptada de facto.
Hakan Fıstık

Funciona perfecto con la última versión de VSCode: mecanografiado a partir del 10/06/2019.
Eddy Howard

40

¡Eso es fácil!

Marque la sección que desea contraer y,

Ctrl + M + H

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


3
¡Funcionó!. Me salvó, ya que hizo que mi código se vea más delgado, ya que tengo muchas llamadas ajax en una sola llamada ajax.
Sorangwala Abbasali

3
Es una solución temporal. Si cierra y vuelve a abrir el archivo, el área seleccionada desaparece.
oneNiceFriend

32

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ó


44
+1: esta debería ser la respuesta, ¡ya que la mayoría de las personas usarán 2012/2013 por ahora! (también funciona para 2013)
Peter Albert

26

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.


¡GRACIAS! ¿Me puede decir cómo deshacer esto si accidentalmente creo una región que quiero eliminar o cambiar?
Tingo

3
Puede deshacer con CTRL + M + U - hay más accesos directos allí: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian


9

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

66
VS 2010 tiene un marco de extensiones actualizado y alguien fue lo suficientemente amable como para crear un complemento de plegado de código llamado " Esquema de
Michael La Voie

2
¿Podemos escribir la macro en C # en lugar de VB?
xport

6

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.



0

si está utilizando Resharper

seguir los pasos en esta foto

ingrese la descripción de la imagen aquí luego escribe esto en el editor de plantillas

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

y nombrarlo #regioncomo en esta imagen ingrese la descripción de la imagen aquí

espero que esto te ayude


0

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

El mejor complemento para VS 2017: Regiones JavaScript

Ejemplo 1:

ingrese la descripción de la imagen aquí

Ejemplo 2

ingrese la descripción de la imagen aquí

Probado y aprobado:

ingrese la descripción de la imagen aquí


tu respuesta simplemente duplica esta
Pavlo Zhukov

Como veo en el historial de edición, no hubo cambios en la URL de la imagen después del envío inicial en 2016
Pavlo Zhukov,

0

Para visual studio 2017.

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

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


-2

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


-3

No solo para VS sino para casi todos los editores.

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

Advertencia: tiene desventajas como el alcance.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.