noUselessEscapeInString

CSS

Summary

• Rule available since: v2.0.0
• Diagnostic Category: lint/suspicious/noUselessEscapeInString
• This rule is recommended, which means is enabled by default.
• This rule has a safe fix.
• The default severity of this rule is warning.

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noUselessEscapeInString": "error"
      }
    }
  }
}

Description

Disallow unnecessary escapes in string literals.

Escaping non-special characters in string literals doesn’t have any effect. Hence, they may confuse a reader.

Examples

Invalid

a::after {
  content: "\a"
}
<pre class="language-text"><code class="language-text">code-block.css:2:14 <a href="https://biomejs.dev/linter/rules/no-useless-escape-in-string">lint/suspicious/noUselessEscapeInString</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span><br />  <br />    <strong>1 │ </strong>a::after &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>  content: &quot;&#92;a&quot;<br />   <strong>   │ </strong>             <strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Only quotes that enclose the string and special characters need to be escaped.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Unescape the character.</span><br />  <br />  <strong>  2 │ </strong><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span>content:<span style="opacity: 0.8;">·</span>&quot;<span style="color: Tomato;">&#92;</span>a&quot;<br />  <strong>    │ </strong>            <span style="color: Tomato;">-</span>  <br /></code></pre>

a::after {
  content: "\'"
}
<pre class="language-text"><code class="language-text">code-block.css:2:14 <a href="https://biomejs.dev/linter/rules/no-useless-escape-in-string">lint/suspicious/noUselessEscapeInString</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span><br />  <br />    <strong>1 │ </strong>a::after &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>  content: &quot;&#92;'&quot;<br />   <strong>   │ </strong>             <strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Only quotes that enclose the string and special characters need to be escaped.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Unescape the character.</span><br />  <br />  <strong>  2 │ </strong><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span>content:<span style="opacity: 0.8;">·</span>&quot;<span style="color: Tomato;">&#92;</span>'&quot;<br />  <strong>    │ </strong>            <span style="color: Tomato;">-</span>  <br /></code></pre>

Valid

a::after {
  content: "\""
}

a::after {
  content: "\n"
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases

JavaScript (and super languages)

Summary

• Rule available since: v2.0.0
• Diagnostic Category: lint/suspicious/noUselessEscapeInString
• This rule is recommended, which means is enabled by default.
• This rule has a safe fix.
• The default severity of this rule is warning.

How to configure

biome.json

{
  "linter": {
    "rules": {
      "suspicious": {
        "noUselessEscapeInString": "error"
      }
    }
  }
}

Description

Disallow unnecessary escapes in string literals.

Escaping non-special characters in string literals doesn’t have any effect. Hence, they may confuse a reader.

Examples

Invalid

const s = "\a";
<pre class="language-text"><code class="language-text">code-block.js:1:13 <a href="https://biomejs.dev/linter/rules/no-useless-escape-in-string">lint/suspicious/noUselessEscapeInString</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const s = &quot;&#92;a&quot;;<br />   <strong>   │ </strong>            <strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Only quotes that enclose the string and special characters need to be escaped.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Unescape the character.</span><br />  <br />  <strong>  1 │ </strong>const<span style="opacity: 0.8;">·</span>s<span style="opacity: 0.8;">·</span>=<span style="opacity: 0.8;">·</span>&quot;<span style="color: Tomato;">&#92;</span>a&quot;;<br />  <strong>    │ </strong>           <span style="color: Tomato;">-</span>   <br /></code></pre>

const o = {
    "\a": 0,
};
<pre class="language-text"><code class="language-text">code-block.js:2:7 <a href="https://biomejs.dev/linter/rules/no-useless-escape-in-string">lint/suspicious/noUselessEscapeInString</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span><br />  <br />    <strong>1 │ </strong>const o = &#123;<br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>    &quot;&#92;a&quot;: 0,<br />   <strong>   │ </strong>      <strong><span style="color: Tomato;">^</span></strong><br />    <strong>3 │ </strong>&#125;;<br />    <strong>4 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Only quotes that enclose the string and special characters need to be escaped.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Unescape the character.</span><br />  <br />  <strong>  2 │ </strong><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span><span style="opacity: 0.8;">·</span>&quot;<span style="color: Tomato;">&#92;</span>a&quot;:<span style="opacity: 0.8;">·</span>0,<br />  <strong>    │ </strong>     <span style="color: Tomato;">-</span>      <br /></code></pre>

const s = `${0}\a`;
<pre class="language-text"><code class="language-text">code-block.js:1:17 <a href="https://biomejs.dev/linter/rules/no-useless-escape-in-string">lint/suspicious/noUselessEscapeInString</a> <span style="color: #000; background-color: #ddd;"> FIXABLE </span> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const s = `$&#123;0&#125;&#92;a`;<br />   <strong>   │ </strong>                <strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Only quotes that enclose the string and special characters need to be escaped.</span><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Unescape the character.</span><br />  <br />  <strong>  1 │ </strong>const<span style="opacity: 0.8;">·</span>s<span style="opacity: 0.8;">·</span>=<span style="opacity: 0.8;">·</span>`$&#123;0&#125;<span style="color: Tomato;">&#92;</span>a`;<br />  <strong>    │ </strong>               <span style="color: Tomato;">-</span>   <br /></code></pre>

Valid

const s = "\n";

Tagged string template are ignored:

const s = tagged`\a`;

JSX strings are ignored:

<div attr="str\a"/>;

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases