jak zaimplementować zwijanie regionów / kodu w javascript

133

Jak zaimplementować regiony zwane zwijaniem kodu dla JavaScript w programie Visual Studio?

Jeśli w javascript są setki wierszy, będzie to bardziej zrozumiałe przy użyciu zawijania kodu z regionami, jak w vb / C #.

#region My Code

#endregion
Prasad
źródło
1
Żadne z tych rozwiązań nie działało tak dobrze dla mnie jak to. stackoverflow.com/questions/46267908/…
Michael Drum

Odpowiedzi:

25

Wpis na blogu wyjaśnia to i to pytanie MSDN .

Musisz używać makr Visual Studio 2003/2005/2008.

Kopiuj + wklej z wpisu na blogu dla zachowania wierności:

  1. Otwórz Eksplorator makr
  2. Utwórz nowe makro
  3. Nazwij to OutlineRegions
  4. Kliknij Edytuj makro i wklej następujący kod 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. Zapisz makro i zamknij edytor
  2. Teraz przypiszmy skrót do makra. Przejdź do Narzędzia-> Opcje-> Środowisko-> Klawiatura i wyszukaj swoje makro w polu tekstowym „pokaż polecenia zawierające”
  3. teraz w polu tekstowym pod „Naciśnij klawisze skrótu” możesz wprowadzić żądany skrót. Używam Ctrl + M + E. Nie wiem dlaczego - wpisałem go za pierwszym razem i używam teraz :)
Gilles 'SO- przestań być zły'
źródło
Ten jest przydatny, a ważną kwestią, na którą należy zwrócić uwagę w komentarzach witryny, jest „Musisz sprawdzić nazwę modułu w powyższym kodzie z nazwą nowego makra. Obie nazwy muszą się zgadzać!”
Prasad
Czy to działa na VS2010? Nie mogę się dostać. Makro nie pojawia się podczas wyszukiwania.
Pan Flibble
@Pan. Flibble: Nie jestem pewien. Mam tylko VS2005.
OK. Zadałem w nowym pytaniu tutaj: stackoverflow.com/questions/2923177/…
Pan Flibble
Firma Microsoft ma teraz rozszerzenie dla VS2010, które zapewnia tę funkcję (zobacz moją odpowiedź poniżej, aby uzyskać link).
BrianFinkel
53

Dobra wiadomość dla programistów pracujących z najnowszą wersją programu Visual Studio

Pakiet Web Essentials będzie dostępny z tą funkcją.

Sprawdź to

wprowadź opis obrazu tutaj

Uwaga: dla VS 2017 użyj regionów JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

Kaushik Thanki
źródło
@William któregoś dnia ludzie na pewno będą tego potrzebować;)
Kaushik Thanki
2
w miarę upływu czasu będzie to defacto zaakceptowana odpowiedź.
Hakan Fıstık
Działa idealnie z najnowszą wersją VSCode - Maszynopis na dzień 6/10/2019.
Eddy Howard,
Działa to również w przypadku VS2019 i nie mam zainstalowanego programu Web Essentials.
Luke Vo
Wydaje się, że @LukeVo ma wbudowaną obsługę vs2019,
Kaushik Thanki
52

Firma Microsoft ma teraz rozszerzenie programu VS 2010, które zapewnia następujące funkcje:

Rozszerzenia edytora JScript

BrianFinkel
źródło
To jest fantastyczne! Mam nadzieję, że uwzględnią to w następnej aktualizacji VS. Dzięki za udostępnienie!
William Niu,
Naprawdę wspaniałe rozszerzenie, nawet lepsze niż zewnętrzne rozszerzenie.
Hovis Biddle
2
coś z tego dzieje się w VS 2012 i 2013?
Jacques
1
To jest świetne! Czy jest jakaś wersja dla VS 2012 lub 2013?
Axel
40

To łatwe!

Zaznacz sekcję, którą chcesz zwinąć i

Ctrl + M + H

Aby rozwinąć, użyj znaku „+” po jego lewej stronie.

Umit Kaya
źródło
3
Zadziałało!. Zapisano mnie, ponieważ dzięki temu mój kod wygląda na szczuplejszy, ponieważ mam wiele wywołań Ajax w ramach pojedynczych wywołań Ajax.
Sorangwala Abbasali,
3
Jest to rozwiązanie tymczasowe. Jeśli zamkniesz i ponownie otworzysz plik, zaznaczony obszar zniknie.
oneNiceFriend
32

Dla tych, którzy mają zamiar używać Visual Studio 2012, istnieje Web Essentials 2012

Dla tych, którzy mają zamiar używać Visual Studio 2015, istnieje Web Essentials 2015.3

Użycie jest dokładnie takie, jak pytał @prasad

MCSI
źródło
4
+1 - to powinna być odpowiedź, ponieważ większość ludzi będzie już używać 2012/2013! (działa również w 2013 roku)
Peter Albert,
26

Zaznaczając sekcję kodu (niezależnie od jakichkolwiek bloków logicznych) i naciskając CTRL + M + H, zdefiniujesz zaznaczenie jako region, który można zwijać i rozszerzać.

Manish Jain
źródło
DZIĘKUJĘ CI! Czy możesz mi powiedzieć, jak to cofnąć, jeśli przypadkowo utworzę region, który chcę usunąć lub zmienić?
Tingo
3
Możesz cofnąć za pomocą CTRL + M + U - więcej skrótów tutaj: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian
20

W JSEnhancements plugin dla adresów Visual Studio to ładnie.

Joel Harris
źródło
To jest dokładnie to, czego szukałem. Dzięki.
Axel
9

Dzięki 0A0D za świetną odpowiedź. Miałem z tym szczęście. Darin Dimitrov również przedstawia dobry argument na temat ograniczania złożoności plików JS. Mimo to zdarzają się sytuacje, w których zwijanie funkcji do ich definicji znacznie ułatwia przeglądanie pliku.

Jeśli chodzi o ogólny # region, to pytanie SO obejmuje to całkiem dobrze.

Dokonałem kilku modyfikacji w makrze, aby obsługiwać bardziej zaawansowane zwijanie kodu. Ta metoda umożliwia umieszczenie opisu po słowie kluczowym // # region ala C # i wyświetlenie go w kodzie, jak pokazano:

Przykładowy kod:

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

Zaktualizowane makro:

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
Michael La Voie
źródło
6
VS 2010 ma zaktualizowaną strukturę rozszerzeń i ktoś był na tyle miły, że stworzył wtyczkę do składania kodu o nazwie „Visual Studio 2010 JavaScript Outlining” tutaj: jsoutlining.codeplex.com
Michael La Voie
2
Czy możemy napisać makro w C # zamiast VB?
xport
6

To jest teraz natywnie w VS2017:

//#region fold this up

//#endregion

Spacja między // a # nie ma znaczenia.

Nie wiem, w jakiej wersji to zostało dodane, ponieważ nie mogę znaleźć żadnej wzmianki o tym w dziennikach zmian. Mogę go używać w wersji 15.7.3.

friggle
źródło
1

W przypadku programu Visual Studio 2017.

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

To nie pracował wcześniej więc pobrałem rozszerzenie z tutaj

Nazwa rozszerzenia (regiony JavaScript) Autor: Mads Kristensen

Charlie
źródło
1

Działa jak urok w PhpStorm

//#region My Region 1
    ...
//#endregion

//#region My Region 2
    ...
//#endregion

moje regiony

AbdurrahmanY
źródło
1

W przypadku VS 2019 powinno to działać bez instalowania czegokolwiek:

wprowadź opis obrazu tutaj

    //#region MyRegion1

    foo() {

    }

    //#endregion

    //#region MyRegion2

    bar() {

    }

    //#endregion
Luke Vo
źródło
0

jeśli używasz Resharper

odłóż kroki na tym zdjęciu

wprowadź opis obrazu tutaj następnie zapisz to w edytorze szablonów

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

i nazwij to #regionjak na tym obrazku wprowadź opis obrazu tutaj

mam nadzieję, że to ci pomoże

Basheer AL-MOMANI
źródło
0

Żadna z tych odpowiedzi nie zadziałała w moim przypadku w Visual Studio 2017.

Najlepsza wtyczka dla VS 2017: Regiony JavaScript

Przykład 1:

wprowadź opis obrazu tutaj

Przykład 2:

wprowadź opis obrazu tutaj

Przetestowane i zatwierdzone:

wprowadź opis obrazu tutaj

Matheus Miranda
źródło
twoja odpowiedź po prostu skopiuj
Pavlo Zhukov
Jak widzę w historii edycji, nie było żadnych zmian w adresie URL zdjęcia po pierwszym przesłaniu w 2016 r.
Pavlo Zhukov
-2

Region powinien działać bez zmiany ustawień

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

Aby włączyć zwijany obszar komentarza / ** /

/* Collapse this

*/

Ustawienia -> Wyszukaj „składanie” -> Edytor: Strategia składania -> Od „auto” do „wcięcia”.

TAGI: Node.js Nodejs Node js Javascript ES5 ECMAScript komentarz składany ukryty region Visual studio code vscode 2018 wersja 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

4baad4
źródło
-3

Nie tylko dla VS, ale prawie dla wszystkich redaktorów.

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

Ostrzeżenie: ma wady, takie jak zasięg.

Burak Tamtürk
źródło