support prettier range ignore via jinja comments (fixes #34)

davidodenwald · Aug 25, 2024 · b6b45fc · b6b45fc
1 parent 5314c0b
commit b6b45fc
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -59,6 +59,21 @@ Using range ignores is the best way to tell prettier to igone part of files. Mos
 <!-- prettier-ignore-end -->
 ```
 
+Or using Jinja comments:
+```jinja
+{# prettier-ignore-start #}
+  <script>
+    window.someData = {{ data | safe }}
+  </script>
+{# prettier-ignore-end #}
+
+{# prettier-ignore-start #}
+  <style>
+    :root { --accent-color: {{ theme_accent_color }} }
+  </style>
+{# prettier-ignore-end #}
+```
+
 ## Options
 
 This Plugin provides additional options:

diff --git a/src/parser.ts b/src/parser.ts
@@ -11,7 +11,7 @@ import {
 const NOT_FOUND = -1;
 
 const regex =
-	/(?<node>{{(?<startDelimiterEx>[-+]?)\s*(?<expression>'([^']|\\')*'|"([^"]|\\")*"|[\S\s]*?)\s*(?<endDelimiterEx>[-+]?)}}|{%(?<startDelimiter>[-+]?)\s*(?<statement>(?<keyword>\w+)('([^']|\\')*'|"([^"]|\\")*"|[\S\s])*?)\s*(?<endDelimiter>[-+]?)%}|(?<comment>{#[\S\s]*?#})|(?<scriptBlock><(script)((?!<)[\s\S])*>((?!<\/script)[\s\S])*?{{[\s\S]*?<\/(script)>)|(?<styleBlock><(style)((?!<)[\s\S])*>((?!<\/style)[\s\S])*?{{[\s\S]*?<\/(style)>)|(?<ignoreBlock><!-- prettier-ignore-start -->[\s\S]*<!-- prettier-ignore-end -->))/;
+	/(?<node>{{(?<startDelimiterEx>[-+]?)\s*(?<expression>'([^']|\\')*'|"([^"]|\\")*"|[\S\s]*?)\s*(?<endDelimiterEx>[-+]?)}}|{%(?<startDelimiter>[-+]?)\s*(?<statement>(?<keyword>\w+)('([^']|\\')*'|"([^"]|\\")*"|[\S\s])*?)\s*(?<endDelimiter>[-+]?)%}|(?<ignoreBlock>(?:<!-- prettier-ignore-start -->|{# prettier-ignore-start #})[\s\S]*(?:<!-- prettier-ignore-end -->|{# prettier-ignore-end #}))|(?<comment>{#[\S\s]*?#})|(?<scriptBlock><(script)((?!<)[\s\S])*>((?!<\/script)[\s\S])*?{{[\s\S]*?<\/(script)>)|(?<styleBlock><(style)((?!<)[\s\S])*>((?!<\/style)[\s\S])*?{{[\s\S]*?<\/(style)>))/;
 
 export const parse: Parser<Node>["parse"] = (text) => {
 	const statementStack: Statement[] = [];

diff --git a/test/cases/ignore_jinja/expected.html b/test/cases/ignore_jinja/expected.html
@@ -0,0 +1,34 @@
+<html>
+  <script>
+    {
+      {
+        js;
+      }
+    }
+  </script>
+
+  <style>
+    /* {{ css }} */
+  </style>
+
+  {# prettier-ignore-start #}
+			<ul>
+			{%for item in seq%}
+			<li>
+			{{item}}
+			</li>
+			{%endfor%}
+			</ul>
+  {# prettier-ignore-end #}
+
+  <!-- prettier-ignore -->
+  <div         class="{{class}}"       >hello world</div            >
+  <div class="{{ class }}">hello world</div>
+
+  {% if foo %}
+    <p>
+      <!-- prettier-ignore -->
+      {{item}}
+    </p>
+  {% endif %}
+</html>
diff --git a/test/cases/ignore_jinja/input.html b/test/cases/ignore_jinja/input.html
@@ -0,0 +1,30 @@
+<html>
+<script>
+{{js}}
+</script>
+
+<style>
+/* {{ css }} */
+</style>
+
+  {# prettier-ignore-start #}
+			<ul>
+			{%for item in seq%}
+			<li>
+			{{item}}
+			</li>
+			{%endfor%}
+			</ul>
+  {# prettier-ignore-end #}
+
+  <!-- prettier-ignore -->
+  <div         class="{{class}}"       >hello world</div            >
+  <div         class="{{class}}"       >hello world</div            >
+
+{%if foo%}
+<p>
+<!-- prettier-ignore -->
+{{item}}
+</p>
+{%endif%}
+</html>