[JavaScript] Improve indentation rules of tagged template strings

This commit... 1. fixes lines after single-line tagged template string being indented. before: var foo = html`<p>content</p>`; var bar = html`<p>content</p>`; var baz = html`<p>content</p>`: after: var foo = html`<p>content</p>`; var bar = html`<p>content</p>`; var baz = html`<p>content</p>`: 2. excludes content of plain string templates from auto-indentation. As their kind of content is undefined, normal indentation rules may cause false results. Tests are added to ensure normal JS statements keep untreated. Notes: First and last line of tagged templates is scoped `string.quoted.other` regardless of embedded syntax highlighting, if only opening or closing backticks appear. Hence increasing indentation of tagged template strings' content is handled by "Indentation Rules - Template Strings". Decreasing indentation of closing backtick is handled by normal "Indentation Rules" as those are the ones applied by ST. It just doesn't work otherwise. This circumstance helps to reliably distinguish opening and closing backticks and correctly in- or decrease indentation.
deathaxe · Jul 29, 2024 · d237d2f · d237d2f
1 parent 3eb4798
commit d237d2f
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 6 deletions.
diff --git a/JavaScript/Indentation Rules - Template Strings.tmPreferences b/JavaScript/Indentation Rules - Template Strings.tmPreferences
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<plist version="1.0">
+<dict>
+	<key>scope</key>
+	<string>string.quoted.other.js</string>
+	<key>settings</key>
+	<dict>
+		<!--
+		Only first row containing opening backtick is included in auto-indentation.
+		Content of plain tagged template strings is otherwise excluded.
+
+		Note:
+		Decreasing indentation of last row, containing stand-alone closing backtick
+		is handled by normal indentation rules.
+		 -->
+
+		<!--
+		<key>decreaseIndentPattern</key>
+		<string>^\s*`</string>
+ 		-->
+
+		<key>increaseIndentPattern</key>
+		<string>^[^`]*`\s*$</string>
+
+		<key>unIndentedLinePattern</key>
+		<string>^[^`]*$</string>
+	</dict>
+</dict>
+</plist>
diff --git a/JavaScript/Indentation Rules.tmPreferences b/JavaScript/Indentation Rules.tmPreferences
@@ -3,13 +3,13 @@
 <dict>
 	<key>scope</key>
 	<string>
-		source.js - source.js meta.mapping - source.js meta.sequence,
+		source.js - source.js meta.mapping - source.js meta.sequence - source.js meta.string,
 		source.js meta.function,
-		source.jsx - source.jsx meta.mapping - source.jsx meta.sequence,
+		source.jsx - source.jsx meta.mapping - source.jsx meta.sequence - source.jsx meta.string,
 		source.jsx meta.function,
-		source.ts - source.ts meta.mapping - source.ts meta.sequence,
+		source.ts - source.ts meta.mapping - source.ts meta.sequence - source.ts meta.string,
 		source.ts meta.function,
-		source.tsx - source.tsx meta.mapping - source.tsx meta.sequence
+		source.tsx - source.tsx meta.mapping - source.tsx meta.sequence - source.tsx meta.string,
 		source.tsx meta.function
 	</string>
 	<key>settings</key>
@@ -41,7 +41,7 @@
 			# but exclude lines such as `extern "C" {`
 			  .* \{ (?: \s* /\*.*\*/ )* \s* (?: //.* )? $
 			# indent after opening tagged template: e.g.: "css`"
-			| .* \w+ \s* `
+			# see: Indentation Rules - Template Strings.tmPreferences
 			# indent after `case ... :`
 			| case\b.*:
 			# indent after `default:`

diff --git a/JavaScript/tests/syntax_test_js_indent_common.js b/JavaScript/tests/syntax_test_js_indent_common.js
@@ -1061,6 +1061,8 @@ function testWhileIndentationWithBracesAndComments(v)  {
  * CSS Templates
  */
 
+var style = css`tr{color:red}`;
+
 var style = css`
     tr, p {
         background: red solid;
@@ -1071,6 +1073,8 @@ var style = css`
  * HTML Templates
  */
 
+var html = html`<p>${content}</p>`;
+
 var html = html`
     <head>
         <script type="text/javascript">
@@ -1105,6 +1109,8 @@ var html = html`
  * JavaScript Templates
  */
 
+var script = js`console.log(${string})`;
+
 var script = js`
     var ${name} = "Value ${interpol}"
 
@@ -1117,6 +1123,8 @@ var script = js`
  * JSON Templates
  */
 
+var json = json`{"key": "value"}`;
+
 var json = json`
     {
         "simple": "val${ue}",
@@ -1132,4 +1140,49 @@ var json = json`
             ]
         }
     }
-`
+`
+
+/*
+ * Other Templates
+ */
+
+var other = other`template ${string}`;
+
+var other = other`
+    # Heading
+
+    My ${pragraph}!
+`
+
+/*
+ * Plain String Templates
+ */
+
+`single line template string`
+
+`
+    multi line template strings
+    ignore normal JavaScript indentation rules
+
+    switch (${var}) {
+        case "foo":
+        break;
+                case "bar":
+                    break;
+    case "baz":
+        break;
+    }
+`
+
+function print(var) {
+    return `
+        switch (${var}) {
+            case "foo":
+            break;
+                    case "bar":
+                        break;
+        case "baz":
+            break;
+        }
+    `;
+}