Back to Biomejs

noUselessEscapeInString

src/content/docs/linter/rules/no-useless-escape-in-string.mdx

latest10.7 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="CSS" icon="seti:css"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/suspicious/noUselessEscapeInString`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has a [**safe**](/linter/#safe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). ## How to configure ```json title="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

```css
a::after {
  content: "\z"
}
<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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span> <strong>1 │ </strong>a::after &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> content: &quot;&#92;z&quot; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <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> <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> <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>z&quot; <strong> │ </strong> <span style="color: Tomato;">-</span> </code></pre>
css
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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span> <strong>1 │ </strong>a::after &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> content: &quot;&#92;'&quot; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <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> <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> <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; <strong> │ </strong> <span style="color: Tomato;">-</span> </code></pre>

Valid

css
a::after {
  content: "\""
}
css
a::after {
  content: "\n"
}
css
a::after {
  content: "\e7bb"
}
</TabItem> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/suspicious/noUselessEscapeInString`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has a [**safe**](/linter/#safe-fixes) fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). ## How to configure ```json title="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

```js
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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const s = &quot;&#92;a&quot;; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <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> <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> <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;; <strong> │ </strong> <span style="color: Tomato;">-</span> </code></pre>
js
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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span> <strong>1 │ </strong>const o = &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> &quot;&#92;a&quot;: 0, <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125;; <strong>4 │ </strong> <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> <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> <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, <strong> │ </strong> <span style="color: Tomato;">-</span> </code></pre>
js
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> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">The character doesn't need to be escaped.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const s = &#96;$&#123;0&#125;&#92;a&#96;; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <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> <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> <strong> 1 │ </strong>const<span style="opacity: 0.8;">·</span>s<span style="opacity: 0.8;">·</span>=<span style="opacity: 0.8;">·</span>&#96;$&#123;0&#125;<span style="color: Tomato;">&#92;</span>a&#96;; <strong> │ </strong> <span style="color: Tomato;">-</span> </code></pre>

Valid

js
const s = "\n";

In template literals, \${ and $\{ are valid escapes:

js
const s = `\${0}`;

Tagged string templates are ignored:

js
const s = tagged`\a`;

JSX strings are ignored:

jsx
<div attr="str\a"/>;
</TabItem> </Tabs>