Update style for rule fail/pass examples (5/5) (#2757)

Author: stephenwade

docs/rules/prefer-regexp-test.md

@@ -9,30 +9,25 @@
 
 When you want to know whether a pattern is found in a string, use [`RegExp#test()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test) instead of [`String#match()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match) and [`RegExp#exec()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec), as it exclusively returns a boolean and therefore is more efficient.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 if (string.match(/unicorn/)) {}
-```
 
-```js
+// ❌
 if (/unicorn/.exec(string)) {}
-```
 
-```vue
-<template>
-	<div v-if="/unicorn/.exec(string)">Vue</div>
-</template>
-```
-
-## Pass
-
-```js
+// ✅
 if (/unicorn/.test(string)) {}
 ```
 
 ```vue
 <template>
+	<!-- ❌ -->
+	<div v-if="/unicorn/.exec(string)">Vue</div>
+
+	<!-- ✅ -->
 	<div v-if="/unicorn/.test(string)">Vue</div>
 </template>
 ```

docs/rules/prefer-set-has.md

@@ -9,28 +9,28 @@
 
 [`Set#has()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) is faster than [`Array#includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const array = [1, 2, 3];
 const hasValue = value => array.includes(value);
-```
-
-## Pass
 
-```js
+// ✅
 const set = new Set([1, 2, 3]);
 const hasValue = value => set.has(value);
 ```
 
 ```js
+// ✅
 // This array is not only checking existence.
 const array = [1, 2];
 const hasValue = value => array.includes(value);
 array.push(3);
 ```
 
 ```js
+// ✅
 // This array is only checked once.
 const array = [1, 2, 3];
 const hasOne = array.includes(1);

docs/rules/prefer-set-size.md

@@ -9,17 +9,15 @@
 
 Prefer using `Set#size` directly instead of first converting it to an array and then using its `.length` property.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 function isUnique(array) {
 	return [...new Set(array)].length === array.length;
 }
-```
-
-## Pass
 
-```js
+// ✅
 function isUnique(array) {
 	return new Set(array).size === array.length;
 }

docs/rules/prefer-spread.md

@@ -37,54 +37,51 @@ Enforces the use of [the spread operator (`...`)](https://developer.mozilla.org/
 
 To enforce the spread operator over `Object#assign()`, use the built-in [`prefer-object-spread` rule](https://eslint.org/docs/rules/prefer-object-spread).
 
-## Fail
+## Examples
 
 ```js
+// ❌
 Array.from(set).map(element => foo(element));
+
+// ✅
+[...set].map(element => foo(element));
 ```
 
 ```js
+// ❌
 const array = array1.concat(array2);
+
+// ✅
+const array = [...array1, ...array2];
 ```
 
 ```js
+// ❌
 const copy = array.slice();
-```
 
-```js
+// ❌
 const copy = array.slice(0);
-```
 
-```js
+// ❌
 const copy = array.toSpliced();
-```
 
-```js
-const characters = string.split('');
+// ✅
+const copy = [...array];
 ```
 
-## Pass
-
 ```js
-[...set].map(element => foo(element));
-```
+// ❌
+const characters = string.split('');
 
-```js
-const array = [...array1, ...array2];
+// ✅
+const characters = [...string];
 ```
 
 ```js
+// ✅
 const tail = array.slice(1);
 ```
 
-```js
-const copy = [...array];
-```
-
-```js
-const characters = [...string];
-```
-
 ## With the `unicorn/no-useless-spread` rule
 
 Some cases are fixed using extra spread syntax. Therefore we recommend enabling the [`unicorn/no-useless-spread`](./no-useless-spread.md) rule to fix it.

docs/rules/prefer-string-raw.md

@@ -9,22 +9,20 @@
 
 [`String.raw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) can be used to avoid escaping `\`.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const file = "C:\\windows\\style\\path\\to\\file.js";
-```
-
-```js
-const regexp = new RegExp('foo\\.bar');
-```
 
-## Pass
-
-```js
+// ✅
 const file = String.raw`C:\windows\style\path\to\file.js`;
 ```
 
 ```js
+// ❌
+const regexp = new RegExp('foo\\.bar');
+
+// ✅
 const regexp = new RegExp(String.raw`foo\.bar`);
 ```

docs/rules/prefer-string-replace-all.md

@@ -9,46 +9,59 @@
 
 The [`String#replaceAll()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) method is both faster and safer as you don't have to use a regex and remember to escape it if the string is not a literal. And when used with a regex, it makes the intent clearer.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 string.replace(/RegExp with global flag/igu, '');
+
+// ✅
+string.replaceAll(/RegExp with global flag/igu, '');
 ```
 
 ```js
+// ❌
 string.replace(/RegExp without special symbols/g, '');
+
+// ✅
+string.replaceAll('RegExp without special symbols', '');
 ```
 
 ```js
+// ❌
 string.replace(/\(It also checks for escaped regex symbols\)/g, '');
+
+// ✅
+string.replaceAll('(It also checks for escaped regex symbols)', '');
 ```
 
 ```js
+// ❌
 string.replace(/Works for u flag too/gu, '');
+
+// ✅
+string.replaceAll('Works for u flag too', '');
 ```
 
 ```js
+// ❌
 string.replaceAll(/foo/g, 'bar');
-```
 
-## Pass
+// ✅
+string.replaceAll('foo', 'bar');
+```
 
 ```js
+// ✅
 string.replace(/Non-global regexp/iu, '');
 ```
 
 ```js
+// ✅
 string.replace('Not a regex expression', '')
 ```
 
 ```js
-string.replaceAll('string', '');
-```
-
-```js
+// ✅
 string.replaceAll(/\s/g, '');
 ```
-
-```js
-string.replaceAll('foo', 'bar');
-```

docs/rules/prefer-string-slice.md

@@ -9,15 +9,15 @@
 
 [`String#substr()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr) and [`String#substring()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring) are the two lesser known legacy ways to slice a string. It's better to use [`String#slice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) as it's a more popular option with clearer behavior that has a consistent [`Array` counterpart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice).
 
-## Fail
+## Examples
 
 ```js
+// ❌
 foo.substr(start, length);
-foo.substring(indexStart, indexEnd);
-```
 
-## Pass
+// ❌
+foo.substring(indexStart, indexEnd);
 
-```js
+// ✅
 foo.slice(beginIndex, endIndex);
 ```

docs/rules/prefer-string-starts-ends-with.md

@@ -11,38 +11,25 @@ Prefer [`String#startsWith()`](https://developer.mozilla.org/en/docs/Web/JavaScr
 
 This rule is fixable, unless the matching object is known not a string.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const foo = /^bar/.test(baz);
-```
-
-```js
-const foo = /bar$/.test(baz);
-```
 
-## Pass
-
-```js
+// ✅
 const foo = baz.startsWith('bar');
 ```
 
 ```js
-const foo = baz.endsWith('bar');
-```
-
-```js
-const foo = baz?.startsWith('bar');
-```
-
-```js
-const foo = (baz ?? '').startsWith('bar');
-```
+// ❌
+const foo = /bar$/.test(baz);
 
-```js
-const foo = String(baz).startsWith('bar');
+// ✅
+const foo = baz.endsWith('bar');
 ```
 
 ```js
+// ✅
 const foo = /^bar/i.test(baz);
 ```

docs/rules/prefer-string-trim-start-end.md

@@ -9,16 +9,20 @@
 
 [`String#trimLeft()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimLeft) and [`String#trimRight()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimRight) are aliases of [`String#trimStart()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart) and [`String#trimEnd()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd). This is to ensure consistency and use [direction](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)-independent wording.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const foo = bar.trimLeft();
-const foo = bar.trimRight();
-```
 
-## Pass
+// ✅
+const foo = bar.trimStart();
+```
 
 ```js
-const foo = bar.trimStart();
+// ❌
+const foo = bar.trimRight();
+
+// ✅
 const foo = bar.trimEnd();
 ```

docs/rules/prefer-structured-clone.md

@@ -9,19 +9,16 @@
 
 [`structuredClone`](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) is the modern way to create a deep clone of a value.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const clone = JSON.parse(JSON.stringify(foo));
-```
 
-```js
+// ❌
 const clone = _.cloneDeep(foo);
-```
 
-## Pass
-
-```js
+// ✅
 const clone = structuredClone(foo);
 ```
 
@@ -55,5 +52,6 @@ Example:
 
 ```js
 // eslint unicorn/prefer-structured-clone: ["error", {"functions": ["utils.clone"]}]
-const clone = utils.clone(foo); // Fails
+// ❌
+const clone = utils.clone(foo);
 ```