як реалізувати регіони / зрив коду в JavaScript


132

Як можна реалізувати регіони ака коду для JavaScript у Visual Studio?

Якщо в 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 / ...
г - Flibble

Microsoft тепер має розширення для VS2010, яке забезпечує цю функціональність (див. Мою відповідь нижче за посиланням).
BrianFinkel

52

Microsoft тепер має розширення для VS 2010 яке забезпечує цю функціональність:

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


Це фантастично! Я сподіваюся, що вони включать це до наступного оновлення VS. Дякую, що поділились!
Вільям Ніу

Дійсно чудове розширення, навіть краще, ніж розширення, яке окреслює третя сторона.
Ховіс Біддл

2
що-небудь з цього відбувається для VS 2012 та 2013?
Жак

1
Це чудово! Чи є версія для VS 2012 чи 2013?
Аксель

50

Гарна новина для розробників, які працюють з останньою версією візуальної студії

Web Основи приходять з цією функцією.

Заціни

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

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


@William якийсь день людям це буде потрібно точно;)
Каушик Тханкі

2
з плином часу ця відповідь дефакто прийме.
Hakan Fıstık

Відмінно працює з останньою версією VSCode - Typescript станом на 6.10.2019.
Едді Ховард

40

Це просто!

Позначте розділ, який потрібно згортати, і,

Ctrl + M + H

А для розширення використовуйте позначку "+" зліва.


3
Це спрацювало!. Врятувало мене, оскільки це зробило мій код стрункішим, оскільки у мене є безліч дзвінків Ajax в рамках одного дзвінка ajax.
Sorangwala Abbasali

3
Це тимчасове рішення. Якщо ви закриєте і повторно відкриєте файл, вибрана область зникає.
oneNiceFriend

32

Для тих, хто збирається використовувати візуальну студію 2012, існує Web Essentials 2012

Для тих, хто збирається використовувати візуальну студію 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. І все-таки я знаходжу випадки, коли згортання функцій за їх визначеннями набагато простіше переглядати файл.

Що стосується #регіону взагалі, то це питання досить добре висвітлює його.

Я вніс кілька змін до Макросу, щоб підтримати більш просунутий згортання коду. Цей метод дозволяє розмістити опис після // # ключового слова регіону 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
Michael La Voie

2
Чи можемо ми записати макрос у C # замість VB?
xport

6

Це вже спочатку у VS2017:

//#region fold this up

//#endregion

Пробіл між // і # не має значення.

Я не знаю, в яку версію додано це, оскільки я не можу знайти жодної згадки про нього в журналах змін. Я можу використовувати його в v15.7.3.



0

якщо ви використовуєте Resharper

виконайте кроки на цьому малюнку

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

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

і назвіть його #regionяк на цьому малюнку введіть тут опис зображення

сподіваюся, що це допоможе тобі


0

Жодна з цих відповідей не спрацювала для мене із візуальною студією 2017 року.

Найкращий плагін для VS 2017: JavaScript Regions

Приклад 1:

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

Приклад 2:

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

Протестовано та затверджено:

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


Ваша відповідь просто дублює цю
Павло Жуков

Як я бачу в історії редагування, зміни в URL-адресі зображення після первинного надсилання в 2016 році не було
Павло Жуков

0

Для візуальної студії 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

*/

Налаштування -> Пошук "складання" -> Редактор: Стратегія складання -> Від "авто" до "відступу".

TAGS: Node.js Nodejs Node js Javascript ES5 ECMAScript коментар складання прихованого регіону Візуальний код студії 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.