Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sindresorhus/eslint-plugin-unicorn/llms.txt

Use this file to discover all available pages before exploring further.

Tagged template literals like sql, gql, and html are often whitespace-insensitive — the consuming library strips leading indentation before processing the string. Despite this, developers frequently write these templates with indentation that doesn’t match the surrounding code, making them jarring to read. This rule automatically realigns multiline template literals to match the indentation of the code around them.
Recommended✅ recommended
Fixable🔧 Auto-fixable
Suggestions—
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
                  }
                `;

  const html = /* HTML */ `
        <div>
            <span>hello</span>
        </div>
  `;
}
The rule uses strip-indent to determine the minimal existing indentation, strips it, and re-adds a consistent indent relative to the line where the template literal begins. Relative whitespace between lines inside the template is preserved — only the common margin shifts.

​
Configuration options

The rule accepts an options object controlling which template literals are checked.

​
tags

Type: string[]
Default: ["outdent", "dedent", "gql", "sql", "html", "styled"] Tagged template literal names (or member expression paths like styled.div) that should be indented.

​
functions

Type: string[]
Default: ["dedent", "stripIndent"] Names of utility functions whose template literal arguments should be indented.

​
selectors

Type: string[]
Default: [] Arbitrary ESLint selectors matching template literals to check. Use this to target templates not covered by tags or functions. 
"unicorn/template-indent": ["warn", {
  "tags": [],
  "functions": [],
  "selectors": ["TemplateLiteral"]
}]

​
comments

Type: string[]
Default: ["HTML", "indent"] Block comment strings (case-insensitive) that, when placed immediately before a template literal, mark it for indentation checking. 
const html = /* HTML */ `
  <div>hello</div>
`;

​
indent

Type: string | integer Override the indentation unit used inside the template. By default the rule infers tabs or spaces from the surrounding code. Provide a number for spaces, or a whitespace string for custom indentation. 
"unicorn/template-indent": ["warn", { "indent": 4 }]

"unicorn/template-indent": ["warn", { "indent": "\t\t" }]
This rule is commonly set to "warn" rather than "error" since it is a purely stylistic concern and its autofix is always safe to apply.

Build docs developers (and LLMs) love

Get started for freeTalk to us