comment implémenter les régions/effondrement du code en javascript
Comment implémenter des régions en code a.k.a pour réduire le code JavaScript dans Visual Studio?
S'il y a des centaines de lignes en javascript, il sera plus compréhensible d'utiliser le pliage de code avec des régions comme en vb/c #
#region My Code
#endregion
L'entrée de blog ici l'explique et cette question MSDN .
Vous devez utiliser les macros Visual Studio 2003/2005/2008.
Copier + coller d'une entrée de blog pour des raisons de fidélité:
- Ouvrir Macro Explorer
- Créer une nouvelle macro
- Nommez-le
OutlineRegions - Cliquez sur Edit macro et collez le code VB suivant:
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
- Enregistrez la macro et fermez l'éditeur
- Attribuons maintenant un raccourci à la macro. Allez dans Outils-> Options-> Environnement-> Clavier et recherchez votre macro dans la zone de texte "Afficher les commandes contenant".
- maintenant dans la zone de texte sous "Presser les touches de raccourci", vous pouvez saisir le raccourci souhaité. J'utilise Ctrl + M + E. Je ne sais pas pourquoi - je viens juste d'y entrer pour la première fois et de l'utiliser maintenant :)
Microsoft a maintenant une extension pour VS 2010 qui fournit cette fonctionnalité:
Bonne nouvelle pour les développeurs qui travaillent avec la dernière version de visual studio
Les Web Essentials arrivent avec cette fonctionnalité.
Remarque: pour VS 2017, utilisez les régions JavaScript:https://marketplace.visualstudio.com/items?itemName=MadsKristensen.JavaScriptRegions
C'est facile!
Marquez la section que vous souhaitez réduire et,
Ctrl + M + H
Et pour développer utilisez la marque '+' à sa gauche.
Pour ceux qui sont sur le point d'utiliser Visual Studio 2012, il existe Web Essentials 2012
Pour ceux qui sont sur le point d'utiliser Visual Studio 2015, il existe Web Essentials 2015.3
L'utilisation est exactement la même que celle demandée par @prasad
En marquant une section de code (quels que soient les blocs logiques) et en appuyant sur CTRL + M + H, vous définissez la sélection comme une région pouvant être réduite et étendue.
Le JSEnhancements plugin pour Visual Studio résout ce problème.
Merci à 0A0D pour une excellente réponse. J'ai eu de la chance avec ça. Darin Dimitrov présente également un bon argument pour limiter la complexité de vos fichiers JS. Je trouve néanmoins des cas où la fusion de fonctions à leurs définitions facilite beaucoup la navigation dans un fichier.
En ce qui concerne la région en général, cette SO question la couvre assez bien.
J'ai apporté quelques modifications à la macro pour prendre en charge un effondrement de code plus avancé. Cette méthode vous permet de mettre une description après le mot clé // # region ala C # et de l’afficher dans le code comme indiqué:
Exemple de code:
//#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
Macro mise à jour:
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
Sur VS 2012 et VS 2015, installez le plug-in WebEssentials et vous pourrez le faire.
C'est maintenant nativement dans VS2017:
//#region fold this up
//#endregion
Les espaces entre // et # importent peu.
Je ne sais pas dans quelle version cela a été ajouté, je ne trouve aucune mention de cela dans les changelogs. Je suis capable de l'utiliser dans v15.7.3.
si vous utilisez Resharper
suivre les marches de cette photo
puis écrivez ceci dans l’éditeur de modèles
//#region $name$
$END$$SELECTION$
//#endregion $name$
et nommez-le #region comme dans cette image 
espérons que cela vous aide
Pour visual studio 2017.
//#region Get Deactivation JS
.
.
//#endregion Get Deactivation JS
Cela ne fonctionnait pas auparavant, j'ai donc téléchargé l'extension à partir de ici
La région devrait fonctionner sans modifier les paramètres
//#region Optional Naming
var x = 5 -0; // Code runs inside #REGION
/* Unnecessary code must be commented out */
//#endregion
Pour activer la zone de commentaire réductrice/** /
/* Collapse this
*/
Paramètres -> Recherche "pliage" -> Editeur: Stratégie de pliage -> De "auto" à "indentation".
TAGS: Node.js Nodejs Node js Javascript ES5 ECMAScript pliant la région de masquage des commentaires Code Visual Studio vscode 2018 version 1.2 + https://code.visualstudio.com/updates/v1_17#_folding- les régions
Aucune de ces réponses n'a pas fonctionné pour moi avec Visual Studio 2017.
Le meilleur plugin pour VS 2017: JavaScript Regions
Exemple 1:
Exemple 2:
Testé et approuvé:
