bagaimana cara mengimplementasikan region / code collapse dalam javascript


131

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

1
Tidak satu pun dari solusi ini yang bekerja dengan baik untuk saya seperti ini. stackoverflow.com/questions/46267908/…
Michael Drum

Jawaban:


25

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
  1. Simpan Makro dan Tutup Editor
  2. Sekarang mari kita tetapkan pintasan ke makro. Pergi ke Alat-> Pilihan-> Lingkungan-> Keyboard dan cari makro Anda di "tampilkan perintah yang mengandung" kotak teks
  3. 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 :)

Yang ini berguna dan poin penting yang perlu diperhatikan dari komentar situs adalah "Anda harus memeriksa nama modul dalam kode di atas dengan nama Makro baru Anda. Kedua nama harus cocok!"
Prasad

Apakah ini berfungsi pada VS2010? Saya tidak bisa. Makro tidak muncul saat mencarinya.
Tn. Flibble

@Bapak. Flibble: Tidak Yakin .. Saya hanya punya VS2005.

BAIK. Saya telah mengajukan pertanyaan baru di sini: stackoverflow.com/questions/2923177/…
Mr. Flibble

Microsoft sekarang memiliki ekstensi untuk VS2010 yang menyediakan fungsionalitas ini (lihat jawaban saya di bawah ini untuk tautan).
BrianFinkel

52

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

Ekstensi Editor JScript


Ini fantastis! Saya harap mereka memasukkan ini ke dalam pembaruan VS berikutnya. Terima kasih telah berbagi!
William Niu

Ekstensi yang benar-benar luar biasa, bahkan lebih baik daripada pihak ketiga yang menguraikan ekstensi.
Hovis Biddle

2
semua ini terjadi untuk VS 2012 dan 2013?
Jacques

1
Ini bagus! Apakah ada versi untuk VS 2012 atau 2013?
Axel

50

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

The Web Essentials datang dengan fitur ini.

Lihat ini

masukkan deskripsi gambar di sini

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


@ William suatu hari nanti orang pasti akan membutuhkan ini;)
Kaushik Thanki

2
seiring berjalannya waktu, ini akan jawaban de facto diterima.
Hakan Fıstık

Berfungsi sempurna dengan versi terbaru VSCode - Typescript per 6/10/2019.
Eddy Howard

40

Itu mudah!

Tandai bagian yang ingin Anda hancurkan dan,

Ctrl + M + H

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


3
Berhasil !. Menyelamatkan saya karena kode saya terlihat lebih ramping karena saya memiliki banyak panggilan ajax di bawah satu panggilan ajax.
Sorangwala Abbasali

3
Ini adalah solusi sementara. Jika Anda menutup dan membuka kembali file, area yang dipilih menghilang.
oneNiceFriend

32

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


4
+1 - ini harus menjadi jawabannya, karena kebanyakan orang akan menggunakan 2012/2013 sekarang! (ini juga berfungsi untuk 2013)
Peter Albert

26

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.


TERIMA KASIH! Bisakah Anda memberi tahu saya cara membatalkan ini jika saya secara tidak sengaja membuat kawasan yang ingin saya hapus atau ubah?
Tingo

3
Anda dapat membatalkan dengan CTRL + M + U - pintasan lainnya di sana: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian


9

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

6
VS 2010 memiliki kerangka kerja ekstensi yang diperbarui dan seseorang cukup baik untuk membuat plugin kode-lipat yang disebut "Visual Studio 2010 JavaScript Menguraikan" di sini: jsoutlining.codeplex.com
Michael La Voie

2
Bisakah kita menulis makro dalam C # bukannya VB?
xport

6

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.



0

jika Anda menggunakan Resharper

bera langkah dalam gambar ini

masukkan deskripsi gambar di sini kemudian tulis ini di editor templat

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

dan beri nama #regionseperti pada gambar ini masukkan deskripsi gambar di sini

semoga ini membantu anda


0

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

Plugin terbaik untuk VS 2017: Wilayah JavaScript

Contoh 1:

masukkan deskripsi gambar di sini

Contoh 2:

masukkan deskripsi gambar di sini

Diuji dan disetujui:

masukkan deskripsi gambar di sini


jawaban Anda duplikat yang satu ini
Pavlo Zhukov

Seperti yang saya lihat di riwayat edit, tidak ada perubahan dalam URL gambar setelah pengiriman awal pada tahun 2016
Pavlo Zhukov

0

Untuk visual studio 2017.

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

Ini tidak berfungsi sebelumnya, jadi saya mengunduh ekstensi dari sini


-2

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


-3

Tidak hanya untuk VS tetapi hampir untuk semua editor.

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

Peringatan: memiliki kelemahan seperti ruang lingkup.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.