วิธีใช้ภูมิภาค / การยุบรหัสในจาวาสคริปต์

คุณจะใช้ภูมิภาคหรือการยุบรหัสสำหรับ JavaScript ใน Visual Studio ได้อย่างไร

หากจาวาสคริปต์มีหลายร้อยบรรทัดก็จะเข้าใจได้มากขึ้นโดยใช้การพับโค้ดกับภูมิภาคเช่นเดียวกับใน vb / C #

#region My Code

#endregion

รายการบล็อกที่นี่อธิบายและคำถาม MSDNนี้

คุณต้องใช้แมโคร Visual Studio 2003/2005/2008

คัดลอก + วางจากรายการบล็อกเพื่อความเที่ยงตรง:

1. เปิด Macro Explorer
2. สร้างมาโครใหม่
3. ตั้งชื่อมัน OutlineRegions
4. คลิกแก้ไขแมโครและวางรหัส 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

5. บันทึกมาโครและปิดตัวแก้ไข
6. ตอนนี้ให้กำหนดทางลัดให้กับมาโคร ไปที่ Tools-> Options-> Environment-> Keyboard และค้นหามาโครของคุณในกล่องข้อความ "แสดงคำสั่งที่มี"
7. ตอนนี้ในช่องข้อความใต้ "กดปุ่มลัด" คุณสามารถป้อนทางลัดที่ต้องการได้ ฉันใช้ Ctrl + M + E ไม่รู้ทำไม - เพิ่งเข้าครั้งแรกและใช้งานได้เลย :)

ข่าวดีสำหรับนักพัฒนาที่กำลังทำงานกับ Visual Studio เวอร์ชันล่าสุด

Essentials เว็บที่มาพร้อมกับคุณลักษณะนี้

ลองดู

หมายเหตุ: สำหรับ VS 2017 ให้ใช้JavaScript Regions: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions

ตอนนี้ Microsoft มีส่วนขยายสำหรับVS 2010ที่มีฟังก์ชันนี้:

JScript Editor Extensions

ง่ายมาก!

ทำเครื่องหมายส่วนที่คุณต้องการยุบและ

Ctrl + M + H

และเพื่อขยายใช้เครื่องหมาย '+' ทางด้านซ้าย

สำหรับผู้ที่จะใช้ Visual Studio 2012 มีWeb Essentials 2012

สำหรับผู้ที่จะใช้ Visual Studio 2015 มีWeb Essentials 2015

การใช้งานเหมือนที่ @prasad ถามมาเป๊ะ

การทำเครื่องหมายส่วนของโค้ด (โดยไม่คำนึงถึงบล็อกตรรกะใด ๆ ) และกด CTRL + M + H คุณจะกำหนดการเลือกเป็นภูมิภาคที่สามารถยุบและขยายได้

JSEnhancementsปลั๊กอินสำหรับที่อยู่ที่สตูดิโอภาพนี้เป็นอย่างดี

ขอบคุณ0A0Dสำหรับคำตอบที่ดี ฉันโชคดีกับมัน Darin Dimitrovยังให้ข้อโต้แย้งที่ดีเกี่ยวกับการจำกัดความซับซ้อนของไฟล์ JS ของคุณ ถึงกระนั้นฉันก็พบว่ามีบางครั้งที่การยุบฟังก์ชันตามคำจำกัดความทำให้การเรียกดูไฟล์ง่ายขึ้นมาก

เกี่ยวกับ #region โดยทั่วไปSO คำถามนี้ครอบคลุมค่อนข้างดี

ฉันได้ทำการปรับเปลี่ยน Macro เล็กน้อยเพื่อรองรับการยุบโค้ดขั้นสูงเพิ่มเติม วิธีนี้ช่วยให้คุณใส่คำอธิบายหลัง // # region keyword ala C # และแสดงในโค้ดดังที่แสดง:

รหัสตัวอย่าง:

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

อัปเดตมาโคร:

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

ตอนนี้เป็นแบบดั้งเดิมใน VS2017:

//#region fold this up

//#endregion

ช่องว่างระหว่าง // และ # ไม่สำคัญ

ฉันไม่ทราบว่าสิ่งนี้ถูกเพิ่มเข้ามาในเวอร์ชันใดเนื่องจากฉันไม่พบการกล่าวถึงใด ๆ ในบันทึกการเปลี่ยนแปลง ฉันสามารถใช้งานได้ใน v15.7.3

ใน VS 2012 และ VS 2015 ให้ติดตั้งปลั๊กอิน WebEssentials และคุณจะสามารถทำได้

http://vswebessentials.com/features/javascript

สำหรับ Visual Studio 2017

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

ก่อนหน้านี้ใช้งานไม่ได้ดังนั้นฉันจึงดาวน์โหลดส่วนขยายจากที่นี่

นามสกุล (ภูมิภาค JavaScript) โดย Mads Kristensen

มันทำงานเหมือนเสน่ห์ใน PhpStorm

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

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

สำหรับ VS 2019 สิ่งนี้ควรใช้งานได้โดยไม่ต้องติดตั้งอะไรเลย:

    //#region MyRegion1

    foo() {

    }

    //#endregion

    //#region MyRegion2

    bar() {

    }

    //#endregion

ถ้าคุณใช้ Resharper

ขั้นตอนในรูปนี้

จากนั้นเขียนสิ่งนี้ในตัวแก้ไขเทมเพลต

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

และตั้งชื่อ#regionตามภาพนี้

หวังว่านี่จะช่วยคุณได้

คำตอบเหล่านี้ไม่ได้ผลสำหรับฉันกับ Visual Studio 2017

ปลั๊กอินที่ดีที่สุดสำหรับ VS 2017: JavaScript Regions

ตัวอย่างที่ 1:

ตัวอย่างที่ 2:

ผ่านการทดสอบและรับรอง:

ภูมิภาคควรทำงานได้โดยไม่ต้องเปลี่ยนการตั้งค่า

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

วิธีเปิดใช้งานการยุบพื้นที่แสดงความคิดเห็น / ** /

/* Collapse this

*/

การตั้งค่า -> ค้นหา "พับ" -> ตัวแก้ไข: กลยุทธ์การพับ -> จาก "อัตโนมัติ" ถึง "การเยื้อง"

TAGS: Node.js Nodejs Node js Javascript ES5 ภูมิภาคซ่อนความคิดเห็น ECMAScript รหัส Visual studio vscode 2018 เวอร์ชัน 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions

ไม่เพียง แต่สำหรับ VS เท่านั้น แต่สำหรับบรรณาธิการเกือบทั้งหมด

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

คำเตือน:มีข้อเสียเช่นขอบเขต