Làm thế nào để thực hiện thu gọn vùng / mã trong javascript


131

Làm cách nào bạn có thể triển khai các vùng aka mã thu gọn cho JavaScript trong Visual Studio?

Nếu có hàng trăm dòng trong javascript, sẽ dễ hiểu hơn khi sử dụng mã gấp với các vùng như trong vb / C #.

#region My Code

#endregion

1
Không có giải pháp nào trong số này làm việc tốt cho tôi như giải pháp này. stackoverflow.com/questions/46267908/ Mạnh
Michael Drum

Câu trả lời:


25

Mục blog ở đây giải thích nócâu hỏi MSDN này .

Bạn phải sử dụng Macro Studio 2003/2005/2008.

Sao chép + Dán từ mục nhập Blog vì lợi ích trung thực:

  1. Mở Macro Explorer
  2. Tạo một Macro mới
  3. Gọi tên nó OutlineRegions
  4. Nhấp vào Chỉnh sửa macro và dán mã VB sau:
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. Lưu Macro và Đóng Trình chỉnh sửa
  2. Bây giờ hãy gán phím tắt cho macro. Chuyển đến Công cụ-> Tùy chọn-> Môi trường-> Bàn phím và tìm kiếm macro của bạn trong "hiển thị lệnh chứa" hộp văn bản
  3. bây giờ trong hộp văn bản dưới "Bấm phím tắt", bạn có thể nhập phím tắt mong muốn. Tôi sử dụng Ctrl + M + E. Tôi không biết tại sao - Tôi mới nhập nó lần đầu tiên và sử dụng nó ngay bây giờ :)

Điều này rất hữu ích và điểm quan trọng cần lưu ý từ nhận xét của trang web là "Bạn phải kiểm tra tên của mô-đun trong đoạn mã trên với tên của Macro mới của bạn. Cả hai tên phải khớp!"
Prasad

Cái này có hoạt động trên VS2010 không? Tôi không thể đến được. Macro không hiển thị khi tìm kiếm nó.
Ông Flibble

@Ông. Flibble: Không chắc chắn .. Tôi chỉ có VS2005.

ĐỒNG Ý. Tôi đã hỏi trong một câu hỏi mới ở đây: stackoverflow.com/questions/2923177/iêng
Ông Flibble

Microsoft hiện có một tiện ích mở rộng cho VS2010 cung cấp chức năng này (xem câu trả lời của tôi dưới đây để biết liên kết).
BrianFinkel

52

Microsoft hiện có một phần mở rộng cho VS 2010 cung cấp chức năng này:

Phần mở rộng biên tập JScript


Cái này thật tuyệt! Tôi hy vọng họ đưa điều này vào bản cập nhật VS tiếp theo. Cám ơn vì đã chia sẻ!
William Niu

Phần mở rộng thực sự tuyệt vời, thậm chí còn tốt hơn phần mở rộng phác thảo của bên thứ ba.
Hovis Biddle

2
bất kỳ điều này xảy ra cho VS 2012 và 2013?
Jacques

1
Điều đó thật tuyệt! Có phiên bản nào cho VS 2012 hoặc 2013 không?
Axel

50

Tin vui cho các nhà phát triển đang làm việc với phiên bản mới nhất của visual studio

Các Web Essentials đang đến với tính năng này.

Kiểm tra này

nhập mô tả hình ảnh ở đây

Lưu ý: Đối với VS 2017, hãy sử dụng Vùng JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions


@William một ngày nào đó mọi người sẽ cần điều này chắc chắn;)
Kaushik Thanki

2
khi thời gian trôi qua, đây sẽ là câu trả lời được defacto chấp nhận.
Hakan Fıstık

Hoạt động hoàn hảo với phiên bản mới nhất của VSCode - Bản đánh máy tính đến ngày 6/10/2019.
Eddy Howard

40

Đó là dễ dàng!

Đánh dấu phần bạn muốn thu gọn và,

Ctrl + M + H

Và để mở rộng sử dụng dấu '+' bên trái.


3
Nó đã làm việc!. Lưu tôi vì nó làm cho mã của tôi trông mỏng hơn vì tôi có rất nhiều cuộc gọi ajax dưới một cuộc gọi ajax duy nhất.
Sorangwala Abbasali

3
Đó là một giải pháp tạm thời. Nếu bạn đóng và mở lại tệp, vùng đã chọn sẽ biến mất.
oneNiceFriend

32

Đối với những người sắp sử dụng visual studio 2012, hãy tồn tại Web Essentials 2012

Đối với những người sắp sử dụng visual studio 2015, hãy tồn tại Web Essentials 2015.3

Cách sử dụng giống hệt như @prasad đã hỏi


4
+1 - đây sẽ là câu trả lời, vì hầu hết mọi người sẽ sử dụng 2012/2013 ngay bây giờ! (nó cũng hoạt động cho năm 2013)
Peter Albert

26

Bằng cách đánh dấu một phần mã (bất kể khối logic nào) và nhấn CTRL + M + H, bạn sẽ xác định lựa chọn là một khu vực có thể thu gọn và có thể mở rộng.


CẢM ƠN BẠN! Bạn có thể cho tôi biết làm thế nào để hoàn tác việc này nếu tôi vô tình tạo một khu vực mà tôi muốn xóa hoặc thay đổi không?
$$$$

3
Bạn có thể hoàn tác với CTRL + M + U - nhiều phím tắt hơn tại đó: msdn.microsoft.com/en-us/l
Library / dd6a5x4s.aspx


9

Cảm ơn 0A0D cho một câu trả lời tuyệt vời. Tôi đã có may mắn với nó. Darin Dimitrov cũng đưa ra một lập luận tốt về việc hạn chế sự phức tạp của các tệp JS của bạn. Tuy nhiên, tôi vẫn thấy các trường hợp thu gọn các hàm theo định nghĩa của chúng làm cho việc duyệt qua tệp dễ dàng hơn nhiều.

Về #region nói chung, Câu hỏi SO này bao gồm nó khá tốt.

Tôi đã thực hiện một vài sửa đổi cho Macro để hỗ trợ thu gọn mã nâng cao hơn. Phương pháp này cho phép bạn đặt một mô tả sau từ khóa // # ala C # và hiển thị nó trong mã như được hiển thị:

Mã ví dụ:

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

Cập nhật Macro:

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 có khung mở rộng được cập nhật và ai đó đã đủ đẹp để tạo một plugin gấp mã có tên là "Visual Studio 2010 JavaScript Outlining" tại đây: jsoutlining.codeplex.com
Michael La Voie

2
Chúng ta có thể viết macro trong C # thay vì VB không?
xport

6

Điều này hiện đang có trong VS2017:

//#region fold this up

//#endregion

Khoảng trắng giữa // và # không quan trọng.

Tôi không biết phiên bản này đã được thêm vào vì tôi không thể tìm thấy bất kỳ đề cập nào về nó trong các thay đổi. Tôi có thể sử dụng nó trong v15.7.3.



0

nếu bạn đang sử dụng Resharper

bỏ các bước trong bức ảnh này

nhập mô tả hình ảnh ở đây sau đó viết cái này trong trình soạn thảo mẫu

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

và đặt tên #regionnhư trong bức tranh này nhập mô tả hình ảnh ở đây

hy vọng điều này sẽ giúp bạn


0

Không có câu trả lời nào trong số này không phù hợp với tôi với visual studio 2017.

Plugin tốt nhất cho VS 2017: Khu vực JavaScript

Ví dụ 1:

nhập mô tả hình ảnh ở đây

Ví dụ 2:

nhập mô tả hình ảnh ở đây

Đã kiểm tra và phê duyệt:

nhập mô tả hình ảnh ở đây


câu trả lời của bạn chỉ cần nhân đôi câu hỏi này
Pavlo Zhukov

Như tôi thấy trong lịch sử chỉnh sửa, không có thay đổi nào về URL hình ảnh sau khi gửi lần đầu vào năm 2016
Pavlo Zhukov

0

Đối với phòng thu trực quan 2017.

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

Điều này không hoạt động sớm hơn nên tôi đã tải xuống tiện ích mở rộng từ đây


-2

Vùng sẽ hoạt động mà không thay đổi cài đặt

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

Để cho phép thu gọn khu vực bình luận / ** /

/* Collapse this

*/

Cài đặt -> Tìm kiếm "gấp" -> Trình chỉnh sửa: Chiến lược gấp -> Từ "tự động" đến "thụt lề".

TAGS: Node.js Nodejs Node js Javascript ES5 ECMAScript comment gấp khu vực ẩn Visual studio đang vscode phiên bản 2018 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions


-3

Không chỉ cho VS mà gần như cho tất cả các biên tập viên.

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

Cảnh báo: có nhược điểm như phạm vi.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.