143

Visual StudioでJavaScriptのコード折りたたみとも呼ばれる領域をどのように実装できますか？

javascriptに数百行ある場合は、vb / C＃のように領域を使用してコードを折りたたむと理解しやすくなります。

#region My Code

#endregion
4

18 に答える 18

67

VisualStudioの最新バージョンを使用している開発者にとって朗報です

WebEssentialsにはこの機能が付属しています。

これをチェックしてください

ここに画像の説明を入力してください

注：VS 2017の場合は、JavaScriptリージョンを使用してください： https ：//marketplace.visualstudio.com/items？itemName = MadsKristensen.JavaScriptRegions

于 2016-02-15T12:21:25.103 に答える
52

Microsoftには、この機能を提供するVS2010の拡張機能があります。

JScriptエディター拡張機能

于 2011-06-13T14:32:22.800 に答える
41

簡単だ！

折りたたむ部分に印を付けて、

Ctrl + M + H

展開するには、左側の「+」マークを使用します。

于 2015-09-09T08:38:25.093 に答える
32

Visual Studio 2012を使用しようとしている人のために、WebEssentials2012が存在します

Visual Studio 2015を使用しようとしている人のために、WebEssentials2015.3があります。

使用法は@prasadが尋ねたのとまったく同じです

于 2013-10-01T17:57:50.197 に答える
26

ここのブログエントリはそれとこのMSDNの質問を説明しています。

VisualStudio2003/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を使用します。理由はわかりません-初めて入力して今すぐ使用しています:)
于 2009-12-17T13:01:27.540 に答える
26

コードのセクションにマークを付け（論理ブロックに関係なく）、CTRL + M + Hを押すと、選択範囲を折りたたみおよび拡張可能な領域として定義します。

于 2014-10-06T10:00:50.717 に答える
20

Visual Studio用のJSEnhancementsプラグインは、これにうまく対処します。

于 2011-05-11T18:23:51.893 に答える
9

素晴らしい答えをくれた0A0Dに感謝します。私はそれで幸運に恵まれました。 Darin Dimitrovは、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
于 2010-01-06T20:36:01.573 に答える
9

Visual Studio Codeのためにここに来た人にとっては、同じ構文が機能します

// #region MongoDB Client
const MongoClient = require('mongodb').MongoClient;
const url = constants.credentials["uat"].mongo.url
MongoClient.connect(url, { useUnifiedTopology: true }, function (err, client) {
    if (err) {
        console.log(err);
    }
    else {
        docDB = client.db("middlewareDB");
    }
});
// #endregion

折りたたむと下のようになります

ここに画像の説明を入力してください

于 2021-03-08T07:53:16.917 に答える
7

これは現在VS2017でネイティブになっています：

//#region fold this up

//#endregion

//と＃の間の空白は重要ではありません。

変更ログにそれについての言及が見つからないため、これがどのバージョンで追加されたかはわかりません。v15.7.3で使用できます。

于 2018-06-07T16:05:29.923 に答える
5

VS 2019の場合、これは何もインストールせずに機能するはずです。

ここに画像の説明を入力してください

    //#region MyRegion1

    foo() {

    }

    //#endregion

    //#region MyRegion2

    bar() {

    }

    //#endregion
于 2020-10-31T21:48:18.457 に答える
1

VS2012およびVS2015では、WebEssentialsプラグインをインストールすると、それを実行できるようになります。

http://vswebessentials.com/features/javascript

于 2015-11-26T00:30:06.267 に答える
1

VisualStudio2017の場合。

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

これは以前は機能していなかったので、ここから拡張機能をダウンロードしました

拡張子名（JavaScriptリージョン）Mads Kristensen

于 2018-06-14T09:36:44.537 に答える
1

それはPhpStormの魅力のように機能します

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

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

私の地域

于 2020-08-28T07:42:43.990 に答える
0

Resharperを使用している場合

この写真のステップを休耕する

ここに画像の説明を入力してください 次に、これをテンプレートエディタで記述します

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

#regionこの写真のように 名前を付けますここに画像の説明を入力してください

これがお役に立てば幸いです

于 2016-10-24T15:24:36.423 に答える
0

Visual Studio 2017では、これらの回答はどれもうまくいきませんでした。

VS 2017に最適なプラグイン：JavaScriptリージョン

例1：

ここに画像の説明を入力してください

例2：

ここに画像の説明を入力してください

テストおよび承認済み：

ここに画像の説明を入力してください

于 2017-06-13T01:56:33.733 に答える
-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 JavascriptES5ECMAScriptコメント折りたたみ非表示領域VisualStudiocodevscode2018バージョン1.2+ https: //code.visualstudio.com/updates/v1_17#_folding-regions

于 2018-11-02T10:17:52.200 に答える
-4

VSだけでなく、ほぼすべてのエディターが対象です。

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

警告：スコープなどの欠点があります。

于 2015-07-01T08:30:16.413 に答える