facelessuser / BracketHighlighter

Bracket and tag highlighter for Sublime Text
https://facelessuser.github.io/BracketHighlighter/
1.75k stars 245 forks source link

How to make the plugin work on tags in JSX/TSX #603

Closed Penguin98kStudio closed 2 years ago

Penguin98kStudio commented 2 years ago

Description

In Html/XML brackethighlighter counts as brackets

how do i make that work in jsx, so i can do things like

just like i can in html/xml

Penguin98kStudio commented 2 years ago

I was eventually able to figure it out

In bracket highlighter settings

in "brackets": in // Angle section; in "language_list": add JSX and TSX in the list i.e

     "brackets": [
          ...
          // Angle
          {
               "name": "angle",
                ...
                "language_list": [
+                   "JSX",
+                   "TSX",
               ...

in bracket highlighter tag settings:

[
     "tag_mode": [
+        {"mode": "jsx", "syntax": ["JSX", "TSX"]},
         ...
     }          
     "tag_style": {
+        "jsx": "tag",
         ...
     }
     "tag_scope_exclude": {
+        "jsx": ["string", "comment"],
         ...
     }
     "optional_tag_patterns": {
+        "jsx": null,
         ...
     }
     "void_tag_patterns": {
+        "jsx": null,
         ...
     }
     "self_closing_tag_patterns": {
+        "jsx": "[\\w:\\.\\-]+",
         ...
     }
     "tag_name": {
+        "jsx": "[\\w:\\.\\-]+",
         ...
     }
     "attributes":
+        "jsx": "(([\\w:@][-\\w\\d:.]*(?:\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|{{[^{}]+}}|{[^{}]+}))?)|{...[\\w\\d]+})",
         ...
     }
     "start_tag": {
+        "jsx": "<(%(tag_name)s)(?:(?:\\s+|(?<=['\"]))%(attributes)s)*\\s*(/?)>",
         ...
     }
     "end_tag": {
+        "jsx": "</([\\w\\:\\.\\-]+)[^>]*>",
]
facelessuser commented 2 years ago

Glad you figured it out :).