Add template-indent rule

docs/rules/template-indent.md

@@ -0,0 +1,76 @@
+# Fix whitespace-insensitive template indentation.
+
+Tagged templates often look ugly/jarring because their indentation often doesn't match the code they're found in. In many cases, whitespace is insignificant, or a library like [strip-indent](https://www.npmjs.com/package/strip-indent) is used to remove the margin. See [proposal-string-dedent](https://github.com/tc39/proposal-string-dedent) (stage 1 at time of writing) for a proposal for fixing this in javascript.
+
+This rule will automatically fix the indentation of multiline string templates, to keep them in alignment with the code they are found in. A configurable whitelist is used to ensure no whitespace-sensitive strings are edited.
+
+## Fail
+
+```js
+function foo() {
+  const sqlQuery = sql`
+select *
+from students
+where first_name = ${x}
+and last_name = ${y}
+  `;
+
+  // if you "fix" indentation manually, then copy code somewhere else, it can look stupid
+  const gqlQuery = gql`
+                  query user(id: 5) {
+                    firstName
+                    lastName
+                  }
+                `;
+}
+```
+
+## Pass
+
+The above will auto-fix to:
+
+```js
+function foo() {
+  const sqlQuery = sql`
+    select *
+    from students
+    where first_name = ${x}
+    and last_name = ${y}
+  `;
+
+  const gqlQuery = gql`
+    query user(id: 5) {
+      firstName
+      lastName
+    }
+  `;
+}
+```
+
+## Options
+
+The rule accepts lists of `tags`, `functions` and `selectors` to match template literals. `tags` are tagged template literal identifiers, functions are names of utility functions like `stripIndent`, and selectors can be any [eslint selector](https://eslint.org/docs/developer-guide/selectors).
+
+Default configuration:
+
+```js
+{
+  'unicorn/template-indent': ['warn', {
+    tags: ['outdent', 'dedent', 'gql', 'sql', 'html', 'styled'],
+    functions: ['dedent', 'stripIndent'],
+    selectors: [],
+  }]
+}
+```
+
+You can use a selector for custom use cases, like indenting _all_ template literals, even those without template tags or function callers:
+
+```js
+{
+  'unicorn/template-indent': ['warn', {
+    tags: [],
+    functions: [],
+    selectors: ['TemplateLiteral'],
+  }]
+}
+```

index.js

@@ -131,6 +131,7 @@ module.exports = {
 				'unicorn/require-number-to-fixed-digits-argument': 'error',
 				'unicorn/require-post-message-target-origin': 'error',
 				'unicorn/string-content': 'off',
+				'unicorn/template-indent': 'warn',
 				'unicorn/throw-new-error': 'error',
 			},
 			overrides: [

package.json

@@ -48,7 +48,8 @@
 		"read-pkg-up": "^7.0.1",
 		"regexp-tree": "^0.1.23",
 		"safe-regex": "^2.1.1",
-		"semver": "^7.3.5"
+		"semver": "^7.3.5",
+		"strip-indent": "^3.0.0"
 	},
 	"devDependencies": {
 		"@babel/code-frame": "7.14.5",

readme.md

@@ -124,6 +124,7 @@ Configure it in `package.json`.
 			"unicorn/require-number-to-fixed-digits-argument": "error",
 			"unicorn/require-post-message-target-origin": "error",
 			"unicorn/string-content": "off",
+			"unicorn/template-indent": "warn",
 			"unicorn/throw-new-error": "error"
 		},
 		"overrides": [
@@ -243,6 +244,7 @@ Each rule has emojis denoting:
 | [require-number-to-fixed-digits-argument](docs/rules/require-number-to-fixed-digits-argument.md) | Enforce using the digits argument with `Number#toFixed()`. | ✅ | 🔧 |  |
 | [require-post-message-target-origin](docs/rules/require-post-message-target-origin.md) | Enforce using the `targetOrigin` argument with `window.postMessage()`. | ✅ |  | 💡 |
 | [string-content](docs/rules/string-content.md) | Enforce better string content. |  | 🔧 | 💡 |
+| [template-indent](docs/rules/template-indent.md) | Fix whitespace-insensitive template indentation. |  | 🔧 |  |
 | [throw-new-error](docs/rules/throw-new-error.md) | Require `new` when throwing an error. | ✅ | 🔧 |  |
 
 <!-- RULES_TABLE_END -->

rules/template-indent.js

@@ -0,0 +1,135 @@
+'use strict';
+const stripIndent = require('strip-indent');
+
+const MESSAGE_ID_IMPROPERLY_INDENTED_TEMPLATE = 'template-indent';
+const MESSAGE_ID_INVALID_NODE_TYPE = 'invalid-node-type';
+const messages = {
+	[MESSAGE_ID_IMPROPERLY_INDENTED_TEMPLATE]: 'Templates should be properly indented. Selector: {{ selector }}',
+	[MESSAGE_ID_INVALID_NODE_TYPE]: 'Invalid node type matched by selector {{ selector }}. Expected TemplateLiteral, got {{ type }}',
+};
+
+/** @param {import('eslint').Rule.RuleContext} context */
+const create = context => {
+	const options = {
+		tags: ['outdent', 'dedent', 'gql', 'sql', 'html', 'styled'],
+		functions: ['dedent', 'stripIndent'],
+		selectors: [],
+		...context.options[0],
+	};
+
+	const selectors = [
+		...options.tags.map(tag => `TaggedTemplateExpression[tag.name="${tag}"] > .quasi`),
+		...options.functions.map(fn => `CallExpression[callee.name="${fn}"] > .arguments:first-child`),
+		...options.selectors,
+	];
+
+	/** @param {string} selector */
+	const getTemplateLiteralHandler = selector =>
+		/** @param {import('@babel/core').types.TemplateLiteral} node */
+		node => {
+			if (node.type !== 'TemplateLiteral') {
+				context.report({
+					node,
+					messageId: MESSAGE_ID_INVALID_NODE_TYPE,
+					data: {
+						selector,
+						type: node.type,
+					},
+				});
+				return;
+			}
+
+			const delimiter = '__PLACEHOLDER__' + Math.random();
+			const joined = node.quasis.map(q => q.value.raw).join(delimiter);
+
+			if (!joined.includes('\n')) {
+				return;
+			}
+
+			const dedented = stripIndent(joined).trim();
+
+			const source = context.getSourceCode().getText();
+
+			const preamble = source.slice(0, node.range[0]).split('\n');
+			const line = preamble.length;
+
+			const marginMatch = preamble[line - 1].match(/^(\s*)\S/);
+			const parentMargin = marginMatch ? marginMatch[1] : '';
+			const tabs = parentMargin.startsWith('\t');
+			const indent = tabs ? '\t' : '  ';
+			const templateMargin = parentMargin + indent;
+
+			const fixed = '\n' + dedented.split('\n').map(line => templateMargin + line).join('\n').trimEnd() + '\n' + parentMargin;
+
+			if (fixed === joined) {
+				return;
+			}
+
+			const replacements = fixed.split(delimiter).map((section, i, {length}) => {
+				const range = [...node.quasis[i].range];
+
+				// Add one either for the "`" or "}" prefix character
+				range[0] += 1;
+
+				// Subtract one at the end for the "`" or two in the middle for the "${"
+				const last = i === length - 1;
+				range[1] -= last ? 1 : 2;
+
+				return {
+					range,
+					value: section,
+				};
+			});
+			context.report({
+				node,
+				messageId: MESSAGE_ID_IMPROPERLY_INDENTED_TEMPLATE,
+				data: {
+					selector,
+				},
+				fix: fixer => replacements.reverse().map(r => fixer.replaceTextRange(r.range, r.value)),
+			});
+		};
+
+	return Object.fromEntries(selectors.map(selector => [selector, getTemplateLiteralHandler(selector)]));
+};
+
+/** @type {import('json-schema').JSONSchema7[]} */
+const schema = [
+	{
+		type: 'object',
+		properties: {
+			tags: {
+				type: 'array',
+				items: {
+					type: 'string',
+				},
+			},
+			functions: {
+				type: 'array',
+				items: {
+					type: 'string',
+				},
+			},
+			selectors: {
+				type: 'array',
+				items: {
+					type: 'string',
+				},
+			},
+		},
+		additionalProperties: false,
+	},
+];
+
+module.exports = {
+	create,
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description: 'Fix whitespace-insensitive template indentation.',
+		},
+		fixable: 'code',
+		schema,
+		messages,
+	},
+};