# svelte/prefer-attribute-interpolation

require attribute interpolation instead of template literals

# 📖 Rule Details

This rule reports a dynamic JavaScript template literal used as an attribute’s entire value. Svelte’s attribute interpolation syntax can represent the same value without the enclosing template literal.

<script>
  /* eslint svelte/prefer-attribute-interpolation: "error" */
  let name = 'world';
</script>

<!-- ✓ GOOD -->
<div title="Hello {name}" />

<!-- ✗ BAD -->
<div title=
Prefer attribute interpolation over a template literal. (svelte/prefer-attribute-interpolation){`Hello ${name}`} />

Embedded template literals, conditional expressions, style directives, template literals containing comments, escapes with distinct runtime semantics, line breaks, or raw opening braces, and string concatenation are not reported. String concatenation can be handled separately with ESLint’s prefer-template rule.

# 🔧 Options

Nothing.

# 👫 Related Rules

• prefer-template

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.23.0

# 🔍 Implementation

• Rule source
• Test source