como implementar regiões / colapso do código em javascript

Como você pode implementar regiões, também conhecido como recolhimento de código para JavaScript no Visual Studio?

Se houver centenas de linhas em javascript, será mais compreensível usar a dobragem de código com regiões como em vb / C #.

#region My Code

#endregion

A entrada do blog aqui explica isso e esta pergunta do MSDN .

Você precisa usar as macros do Visual Studio 2003/2005/2008.

Copie + Cole da entrada do Blog por uma questão de fidelidade:

1. Abra o Macro Explorer
2. Crie uma nova macro
3. Diga OutlineRegions
4. Clique em Editar macro e cole o seguinte 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. Salve a macro e feche o editor
6. Agora vamos atribuir um atalho para a macro. Vá em Ferramentas-> Opções-> Ambiente-> Teclado e procure sua macro na caixa de texto "show command contendo"
7. agora na caixa de texto, sob "Pressione as teclas de atalho", você pode inserir o atalho desejado. Eu uso Ctrl + M + E. Não sei por que - acabei de entrar pela primeira vez e usá-lo agora :)

A Microsoft agora possui uma extensão para o VS 2010 que fornece esta funcionalidade:

Extensões do editor JScript

Boas notícias para desenvolvedores que estão trabalhando com a versão mais recente do visual studio

O Web Essentials vem com esse recurso.

Veja isso

Nota: Para o VS 2017, use Regiões JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

Isso é fácil!

Marque a seção que você deseja recolher e,

Ctrl + M + H

E para expandir, use a marca '+' à sua esquerda.

Para quem está prestes a usar o visual studio 2012, existe o Web Essentials 2012

Para quem está prestes a usar o visual studio 2015, existe o Web Essentials 2015.3

O uso é exatamente como @prasad perguntou

Marcando uma seção do código (independentemente de qualquer bloco lógico) e pressionando CTRL + M + H, você definirá a seleção como uma região que é recolhível e expansível.

O plug- in JSEnhancements do Visual Studio resolve isso muito bem.

Obrigado a 0A0D por uma ótima resposta. Eu tive boa sorte com isso. Darin Dimitrov também argumenta sobre a limitação da complexidade dos seus arquivos JS. Ainda assim, encontro ocasiões em que o recolhimento de funções em suas definições facilita a navegação em um arquivo.

Em relação à região # em geral, esta questão SO cobre muito bem.

Fiz algumas modificações na macro para oferecer suporte ao colapso de código mais avançado. Este método permite que você coloque uma descrição após a palavra-chave // ​​# region ala C # e a mostre no código conforme mostrado:

Código de exemplo:

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

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

Agora isso é nativo no VS2017:

//#region fold this up

//#endregion

O espaço em branco entre // e # não importa.

Não sei em que versão foi adicionada, pois não encontro menção a ela nos registros de alterações. Eu posso usá-lo na v15.7.3.

No VS 2012 e VS 2015, instale o plug-in WebEssentials e você poderá fazer isso.

http://vswebessentials.com/features/javascript

se você estiver usando o Resharper

siga os passos nesta foto

então escreva isso no editor de modelos

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

e nomeie-o #regioncomo nesta imagem

espero que isso ajude você

Nenhuma dessas respostas não funcionou para mim no visual studio 2017.

O melhor plugin para o VS 2017: regiões JavaScript

Exemplo 1:

Exemplo 2:

Testado e aprovado:

Para o visual studio 2017.

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

Como não estava funcionando antes, baixei a extensão daqui

A região deve funcionar sem alterar as configurações

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

Para ativar a área de comentários recolhida / ** /

/* Collapse this

*/

Configurações -> Pesquisa "dobrável" -> Editor: Estratégia de dobragem -> De "automático" a "recuo".

TAGS: Node.js Nodejs Nó js Javascript ES5 ECMAScript comentário região oculta de dobramento Visual studio code vscode 2018 version 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

Não apenas para o VS, mas quase para todos os editores.

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

Aviso: possui desvantagens, como escopo.