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.