bagaimana cara mengimplementasikan region / code collapse dalam javascript

Bagaimana Anda bisa menerapkan daerah alias kode runtuh untuk JavaScript di Visual Studio?

Jika ada ratusan baris dalam javascript, itu akan lebih dimengerti menggunakan kode lipat dengan daerah seperti pada vb / C #.

#region My Code

#endregion

Entri blog di sini menjelaskannya dan pertanyaan MSDN ini .

Anda harus menggunakan Visual Studio 2003/2005/2008 Macro.

Salin + Tempel dari entri Blog demi kesetiaan:

1. Buka Macro Explorer
2. Buat Makro Baru
3. Beri nama OutlineRegions
4. Klik Edit makro dan rekatkan kode VB berikut:

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. Simpan Makro dan Tutup Editor
6. Sekarang mari kita tetapkan pintasan ke makro. Pergi ke Alat-> Pilihan-> Lingkungan-> Keyboard dan cari makro Anda di "tampilkan perintah yang mengandung" kotak teks
7. sekarang di kotak teks di bawah "Tekan tombol pintas" Anda dapat memasukkan pintasan yang diinginkan. Saya menggunakan Ctrl + M + E. Saya tidak tahu mengapa - saya baru saja memasukkannya pertama kali dan menggunakannya sekarang :)

Microsoft sekarang memiliki ekstensi untuk VS 2010 yang menyediakan fungsionalitas ini:

Ekstensi Editor JScript

Kabar baik bagi para pengembang yang bekerja dengan visual studio versi terbaru

The Web Essentials datang dengan fitur ini.

Lihat ini

Catatan: Untuk VS 2017 gunakan Kawasan JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

Itu mudah!

Tandai bagian yang ingin Anda hancurkan dan,

Ctrl + M + H

Dan untuk memperluas, gunakan tanda '+' di sebelah kirinya.

Bagi mereka yang akan menggunakan studio visual 2012, ada Web Essentials 2012

Bagi mereka yang akan menggunakan visual studio 2015, ada Web Essentials 2015.3

Penggunaannya persis seperti yang diminta @prasad

Dengan menandai bagian kode (terlepas dari blok logis apa pun) dan menekan CTRL + M + H Anda akan menentukan pilihan sebagai wilayah yang dapat dilipat dan diperluas.

The JSEnhancements plugin untuk alamat Studio Visual ini baik.

Terima kasih kepada 0A0D untuk jawaban yang bagus. Saya beruntung dengan itu. Darin Dimitrov juga membuat argumen yang bagus tentang membatasi kerumitan file JS Anda. Namun, saya menemukan kesempatan di mana fungsi runtuh ke definisi mereka membuat browsing melalui file jauh lebih mudah.

Mengenai # wilayah secara umum, Pertanyaan SO ini mencakup dengan cukup baik.

Saya telah membuat beberapa modifikasi pada Makro untuk mendukung runtuhnya kode lebih lanjut. Metode ini memungkinkan Anda untuk menempatkan deskripsi setelah // # wilayah kata kunci ala C # dan menunjukkannya dalam kode seperti yang ditunjukkan:

Kode contoh:

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

Makro Diperbarui:

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

Ini sekarang secara asli di VS2017:

//#region fold this up

//#endregion

Spasi antara // dan # tidak masalah.

Saya tidak tahu versi apa ini ditambahkan, karena saya tidak dapat menemukan menyebutkannya di changelogs. Saya dapat menggunakannya di v15.7.3.

Pada VS 2012 dan VS 2015 instal plugin WebEssentials dan Anda akan dapat melakukannya.

http://vswebessentials.com/features/javascript

jika Anda menggunakan Resharper

bera langkah dalam gambar ini

kemudian tulis ini di editor templat

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

dan beri nama #regionseperti pada gambar ini

semoga ini membantu anda

Tidak satu pun dari jawaban ini yang tidak berfungsi untuk saya dengan visual studio 2017.

Plugin terbaik untuk VS 2017: Wilayah JavaScript

Contoh 1:

Contoh 2:

Diuji dan disetujui:

Untuk visual studio 2017.

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

Ini tidak berfungsi sebelumnya, jadi saya mengunduh ekstensi dari sini

Wilayah harus berfungsi tanpa mengubah pengaturan

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

Untuk mengaktifkan area komentar yang runtuh / ** /

/* Collapse this

*/

Pengaturan -> Cari "lipat" -> Editor: Strategi Lipat -> Dari "otomatis" ke "indentasi".

Label: Node.js Nodejs Node js Javascript ES5 ECMASkrip komentar lipat wilayah persembunyian Visual studio kode vscode 2018 versi 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

Tidak hanya untuk VS tetapi hampir untuk semua editor.

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

Peringatan: memiliki kelemahan seperti ruang lingkup.