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


131

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

1
Nenhuma dessas soluções funcionou tão bem para mim quanto esta. stackoverflow.com/questions/46267908/…
Michael Drum

Respostas:


25

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
  1. Salve a macro e feche o editor
  2. 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"
  3. 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 :)

Essa é útil e o ponto importante a ser observado nos comentários do site é "Você deve verificar o nome do módulo no código acima com o nome da sua nova macro. Os dois nomes devem corresponder!"
Prasad

Isso funciona no VS2010? Eu não consigo chegar. A macro não aparece ao procurá-la.
Sr. Flibble

@Sr. Flibble: Não tenho certeza .. Eu só tenho o VS2005.

ESTÁ BEM. Eu fiz uma nova pergunta aqui: stackoverflow.com/questions/2923177/…
Sr. Flibble

A Microsoft agora possui uma extensão para o VS2010 que fornece essa funcionalidade (veja minha resposta abaixo para obter o link).
117811 BrianFinkel

52

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

Extensões do editor JScript


Isto é fantástico! Espero que eles incluam isso na próxima atualização do VS. Obrigado por compartilhar!
William Niu

Extensão realmente maravilhosa, ainda melhor que a extensão de esboço de terceiros.
Hovis Biddle

2
isso está acontecendo no VS 2012 e 2013?
Jacques

1
Isso é ótimo! Existe alguma versão para o VS 2012 ou 2013?
Axel

50

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

insira a descrição da imagem aqui

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


@William alguns dias as pessoas terão essa certeza;)
Kaushik Thanki

2
com o passar do tempo, essa será a resposta aceita.
Enviado em

Funciona perfeitamente com a versão mais recente do VSCode - Typescript a partir de 10/06/2019.
Eddy Howard

40

Isso é fácil!

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

Ctrl + M + H

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


3
Funcionou!. Me salvou, pois fazia meu código parecer mais fino, pois tenho muitas chamadas ajax sob uma única chamada ajax.
Sorangwala Abbasali

3
É uma solução temporária. Se você fechar e reabrir o arquivo, a área selecionada desaparecerá.
oneNiceFriend

32

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


4
+1 - essa deve ser a resposta, já que a maioria das pessoas estará usando 2012/2013 agora! (ele também funciona para 2013)
Peter Albert

26

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.


OBRIGADO! Você pode me dizer como desfazer isso se eu criar acidentalmente uma região que desejo remover ou alterar?
Tingo

3
Você pode desfazer com CTRL + M + U - mais atalhos aqui: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian


9

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

6
VS 2010 tem um quadro extensões atualizadas e alguém foi bom o suficiente para criar um plugin-dobrar código chamado "Visual Studio 2010 JavaScript Outlining" aqui: jsoutlining.codeplex.com
Michael La Voie

2
Podemos escrever a macro em C # em vez de VB?
xport

6

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.



0

se você estiver usando o Resharper

siga os passos nesta foto

insira a descrição da imagem aqui então escreva isso no editor de modelos

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

e nomeie-o #regioncomo nesta imagem insira a descrição da imagem aqui

espero que isso ajude você



0

Para o visual studio 2017.

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

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


-2

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


-3

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

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

Aviso: possui desvantagens, como escopo.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.