как реализовать коллапс регионов / кода в javascript


132

Как реализовать в Visual Studio регионы, называемые сворачиванием кода, для JavaScript?

Если в javascript есть сотни строк, будет более понятно использование сворачивания кода с регионами, как в vb / C #.

#region My Code

#endregion

1
Ни одно из этих решений не помогло мне так хорошо, как это. stackoverflow.com/questions/46267908/…
Майкл Драм

Ответы:


25

Запись в блоге здесь объясняет это и этот вопрос MSDN .

Вы должны использовать макросы Visual Studio 2003/2005/2008.

Копировать + вставить из записи блога для верности:

  1. Откройте обозреватель макросов
  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
  1. Сохраните макрос и закройте редактор
  2. Теперь назначим макросу ярлык. Перейдите в Инструменты-> Параметры-> Среда-> Клавиатура и найдите свой макрос в текстовом поле «Показать команды, содержащие».
  3. Теперь в текстовом поле под «Нажатием клавиш быстрого доступа» вы можете ввести желаемый ярлык. Я использую Ctrl + M + E. Не знаю почему - просто ввел первый раз и использую сейчас :)

Это полезно, и из комментариев на сайте важно отметить следующее: «Вы должны сверить имя модуля в приведенном выше коде с именем вашего нового макроса. Оба имени должны совпадать!»
Прасад

Это работает на VS2010? Я не могу добраться. Макрос не отображается при поиске.
Мистер Флибл,

@Г-н. Flibble: Не уверен .. У меня только VS2005.

ХОРОШО. Я задал новый вопрос здесь: stackoverflow.com/questions/2923177/…
Мистер Флибл,

У Microsoft теперь есть расширение для VS2010, которое обеспечивает эту функциональность (см. Мой ответ ниже для ссылки).
BrianFinkel

52

Теперь у Microsoft есть расширение для VS 2010, которое предоставляет следующие функции:

Расширения редактора JScript


Это фантастика! Надеюсь, они включат это в следующее обновление VS. Спасибо, что поделился!
William Niu

Действительно замечательное расширение, даже лучше, чем стороннее расширение.
Ховис Биддл,

2
что-нибудь из этого происходит с VS 2012 и 2013?
Jacques

1
Это круто! Есть ли версия для VS 2012 или 2013?
Axel

50

Хорошие новости для разработчиков, которые работают с последней версией Visual Studio

В Web Основы приходят с этой функцией.

Проверь это

введите описание изображения здесь

Примечание. Для VS 2017 используйте регионы JavaScript: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions.


@William когда-нибудь людям это обязательно понадобится;)
Kaushik Thanki

2
по прошествии времени это будет фактически принятый ответ.
Hakan Fıstık

Идеально работает с последней версией VSCode - Typescript от 10.06.2019.
Эдди Ховард

40

Это легко!

Отметьте раздел, который хотите свернуть, и

CTRL + M + H

А для расширения используйте знак «+» слева от него.


3
Это сработало!. Спас меня, так как мой код выглядел тоньше, так как у меня много вызовов ajax под одним вызовом ajax.
Сорангвала Аббасали

3
Это временное решение. Если закрыть и снова открыть файл, выбранная область исчезнет.
oneNiceFriend 01

32

Для тех, кто собирается использовать Visual Studio 2012, существует Web Essentials 2012.

Для тех, кто собирается использовать Visual Studio 2015, существует Web Essentials 2015.3

Использование точно такое же, как спросил @prasad


4
+1 - это должен быть ответ, так как большинство людей уже будут использовать 2012/2013! (это также работает на 2013 год)
Питер Альберт

26

Отметив часть кода (независимо от каких-либо логических блоков) и нажав CTRL + M + H, вы определите выделение как область, которая является сворачиваемой и расширяемой.


СПАСИБО! Можете ли вы сказать мне, как отменить это, если я случайно создаю область, которую хочу удалить или изменить?
Тинго

3
Вы можете отменить с помощью CTRL + M + U - здесь больше ярлыков: msdn.microsoft.com/en-us/library/td6a5x4s.aspx
laurian


9

Спасибо 0A0D за отличный ответ. Мне с этим повезло. Дарин Димитров также является хорошим аргументом в пользу ограничения сложности ваших JS-файлов. Тем не менее, я нахожу случаи, когда сворачивание функций до их определений значительно упрощает просмотр файла.

Что касается #region в целом, этот вопрос SO охватывает его достаточно хорошо.

Я внес несколько изменений в макрос для поддержки более сложного свертывания кода. Этот метод позволяет вам поместить описание после ключевого слова // # region 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

6
VS 2010 имеет обновленную структуру расширений, и кто-то был достаточно любезен, чтобы создать плагин сворачивания кода под названием «Visual Studio 2010 JavaScript Outlining» здесь: jsoutlining.codeplex.com
Майкл Ла Вуа,

2
Можем ли мы написать макрос на C # вместо VB?
xport

6

Теперь это изначально в VS2017:

//#region fold this up

//#endregion

Пробелы между // и # значения не имеют.

Я не знаю, в какой версии это было добавлено, так как я не могу найти упоминания об этом в журналах изменений. Я могу использовать его в версии 15.7.3.



0

если вы используете Resharper

Следуйте шагам на этой картинке

введите описание изображения здесь затем напишите это в редакторе шаблонов

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

и назовите его #regionкак на этой картинке введите описание изображения здесь

надеюсь, это поможет вам


0

Ни один из этих ответов не работал у меня с Visual Studio 2017.

Лучший плагин для VS 2017: JavaScript Regions

Пример 1:

введите описание изображения здесь

Пример 2:

введите описание изображения здесь

Проверено и одобрено:

введите описание изображения здесь


Ваш ответ просто дублирует этот
Павел Жуков

Как я вижу в истории редактирования, после первоначальной отправки в 2016 году не было изменений в URL изображения
Павел Жуков

0

Для Visual Studio 2017.

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

Раньше это не работало, поэтому я скачал расширение отсюда


-2

Регион должен работать без изменения настроек

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

Включение сворачивания области комментариев / ** /

/* Collapse this

*/

Настройки -> Поиск «складывание» -> Редактор: Стратегия складывания -> От «авто» до «отступ».

ТЕГИ: Node.js Nodejs Node js Javascript ES5 ECMAScript комментарий, сворачивание, скрывающая область Код Visual Studio vscode 2018 версии 1.2+ https://code.visualstudio.com/updates/v1_17#_folding-regions


-3

Не только для VS, но почти для всех редакторов.

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

Предупреждение: имеет такие недостатки, как размах.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.