javascript'te bölgeler / kod daraltma nasıl uygulanır


132

Visual Studio'da JavaScript için kod daraltma olarak adlandırılan bölgeleri nasıl uygulayabilirsiniz?

Javascript'te yüzlerce satır varsa vb / C # gibi bölgelerle kod katlama kullanılması daha anlaşılır olacaktır.

#region My Code

#endregion

1
Bu çözümlerin hiçbiri benim için bu kadar iyi sonuç vermedi. stackoverflow.com/questions/46267908/…
Michael Drum

Yanıtlar:


25

Buradaki blog girişi bunu ve bu MSDN sorusunu açıklamaktadır .

Visual Studio 2003/2005/2008 Makrolarını kullanmanız gerekir.

Doğruluk uğruna Blog girişinden Kopyala + Yapıştır:

  1. Makro Gezgini'ni açın
  2. Yeni Bir Makro Oluşturun
  3. Adını sen koy OutlineRegions
  4. Makroyu düzenle'yi tıklayın ve aşağıdaki VB kodunu yapıştırın:
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. Makroyu Kaydedin ve Düzenleyiciyi Kapatın
  2. Şimdi makroya kısayol atayalım. Araçlar-> Seçenekler-> Ortam-> Klavye'ye gidin ve "içeren komutları göster" metin kutusunda makronuzu arayın
  3. şimdi metin kutusunda "Kısayol tuşlarına basın" altında istediğiniz kısayolu girebilirsiniz. Ctrl + M + E kullanıyorum. Neden bilmiyorum - ilk kez girdim ve şimdi kullanıyorum :)

Bu yararlıdır ve sitenin yorumlarında dikkat edilmesi gereken önemli nokta, "Yukarıdaki koddaki modülün adını yeni Makronuzun adıyla kontrol etmelisiniz. Her iki ad da eşleşmelidir!"
Prasad

Bu VS2010'da çalışıyor mu? Ben ulaşamıyorum Makro, onu ararken görünmüyor.
Bay Flibble

@Bay. Anlaşılır: Emin Değil .. Sadece VS2005'im var.

TAMAM. Burada yeni bir soru sordum: stackoverflow.com/questions/2923177/…
Bay Flibble

Microsoft artık bu işlevi sağlayan bir VS2010 uzantısına sahip (bağlantı için aşağıdaki cevabıma bakın).
BrianFinkel

52

Microsoft artık bu işlevi sağlayan bir VS 2010 uzantısına sahiptir :

JScript Düzenleyici Uzantıları


Bu fantastik! Umarım bunu bir sonraki VS güncellemesine eklerler. Paylaşım için teşekkürler!
William Niu

Gerçekten harika bir uzantı, üçüncü tarafın ana hatlarını çizen uzantıdan bile daha iyi.
Hovis Biddle

2
Bunlardan herhangi biri VS 2012 ve 2013 için oluyor mu?
Jacques

1
Bu harika! VS 2012 veya 2013 için herhangi bir sürüm var mı?
Axel

50

Visual Studio'nun son sürümüyle çalışan geliştiriciler için müjde

Web Essentials bu özelliği ile geliyor.

Şuna bak

görüntü açıklamasını buraya girin

Not: VS 2017 için JavaScript Bölgelerini kullanın : https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions


@William bir gün insanlar buna kesinlikle ihtiyaç duyacak;)
Kaushik Thanki

2
zaman geçtikçe, bu fiilen kabul edilen cevap olacaktır.
Hakan Fıstık

6/10/2019 itibarıyla VSCode - Typescript'in en son sürümü ile mükemmel çalışır.
Eddy Howard

40

Bu kolay!

Daraltmak istediğiniz bölümü işaretleyin ve

Ctrl + M + H

Ve genişletmek için solundaki '+' işaretini kullanın.


3
İşe yaradı!. Tek bir ajax çağrısı altında çok sayıda ajax çağrısı olduğu için kodumu daha ince gösterdiği için beni kurtardı.
Sorangwala Abbasali

3
Geçici bir çözümdür. Dosyayı kapatıp yeniden açarsanız, seçilen alan kaybolur.
oneNiceFriend 01

32

Visual Studio 2012'yi kullanmak üzere olanlar için Web Essentials 2012 var

Visual Studio 2015'i kullanmak üzere olanlar için Web Essentials 2015 var.3

Kullanım tam olarak @prasad'ın sorduğu gibi


4
+1 - cevap bu olmalı, çünkü şimdiye kadar çoğu insan 2012 / 2013'ü kullanıyor olacak! (2013 için de geçerli)
Peter Albert

26

Kodun bir bölümünü işaretleyerek (herhangi bir mantıksal bloktan bağımsız olarak) ve CTRL + M + H tuşlarına basarak seçimi daraltılabilir ve genişletilebilir bir bölge olarak tanımlayacaksınız.


TEŞEKKÜR EDERİM! Yanlışlıkla kaldırmak veya değiştirmek istediğim bir bölge yaratırsam bunu nasıl geri alacağımı söyleyebilir misiniz?
Tingo

3
CTRL + M + U ile geri alabilirsiniz - burada daha fazla kısayol: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian


9

Harika bir cevap için 0A0D'ye teşekkürler . Onunla iyi şanslar elde ettim. Darin Dimitrov , JS dosyalarınızın karmaşıklığını sınırlama konusunda da iyi bir argüman sunuyor. Yine de, işlevlerin tanımlarına göre daraltılmasının bir dosyaya göz atmayı çok daha kolay hale getirdiği durumlar buluyorum.

Genel olarak # bölge ile ilgili olarak, bu GK Sorusu bunu oldukça iyi kapsamaktadır.

Daha gelişmiş kod çöküşünü desteklemek için Makro'da birkaç değişiklik yaptım. Bu yöntem, // # bölge anahtar kelimesi ala C # 'dan sonra bir açıklama koymanıza ve gösterildiği gibi kodda göstermenize olanak tanır:

Örnek 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

Güncellenen 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

6
VS 2010, güncellenmiş bir uzantı çerçevesine sahiptir ve birisi burada "Visual Studio 2010 JavaScript Outlining" adlı bir kod katlama eklentisi oluşturacak kadar iyi davrandı: jsoutlining.codeplex.com
Michael La Voie

2
Makroyu VB yerine C # ile yazabilir miyiz?
xport

6

Bu artık yerel olarak VS2017'de:

//#region fold this up

//#endregion

// ve # arasındaki boşluk önemli değildir.

Değişiklik günlüklerinde bundan bahsedemediğim için bunun hangi sürüme eklendiğini bilmiyorum. V15.7.3'te kullanabiliyorum.



0

Resharper kullanıyorsanız

bu resimdeki adımları nadasa bırak

görüntü açıklamasını buraya girin sonra bunu şablon düzenleyiciye yazın

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

ve #regionbu resimdeki gibi adlandırın görüntü açıklamasını buraya girin

umarım bu sana yardımcı olur



0

Visual Studio 2017 için.

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

Bu daha önce çalışmıyordu, bu yüzden buradan uzantıyı indirdim


-2

Bölge ayarları değiştirmeden çalışmalıdır

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

Daraltılan yorum alanını etkinleştirmek için / ** /

/* Collapse this

*/

Ayarlar -> "katlama" ara -> Editör: Katlama Stratejisi -> "otomatik" ten "girintiye".

ETİKETLER: Node.js Nodejs Node js Javascript ES5 ECMAScript yorum katlama gizleme bölgesi Görsel stüdyo kodu vscode 2018 sürüm 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions


-3

Yalnızca VS için değil, neredeyse tüm editörler için.

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

Uyarı: kapsam gibi dezavantajlara sahiptir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.