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

Author: stephenwade

docs/rules/no-for-loop.md

@@ -13,22 +13,29 @@ Off-by-one errors are one of the most common bugs in software. [Swift actually r
 
 This rule is fixable unless index or element variables were used outside of the loop.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 for (let index = 0; index < array.length; index++) {
 	const element = array[index];
 	console.log(index, element);
 }
-```
-
-## Pass
 
-```js
+// ✅
 for (const [index, element] of array.entries()) {
 	console.log(index, element);
 }
+```
+
+```js
+// ❌
+for (let index = 0; index < array.length; index++) {
+	const element = array[index];
+	console.log(element);
+}
 
+// ✅
 for (const element of array) {
 	console.log(element);
 }

docs/rules/no-hex-escape.md

@@ -9,16 +9,20 @@
 
 Enforces a convention of using [Unicode escapes](https://mathiasbynens.be/notes/javascript-escapes#unicode) instead of [hexadecimal escapes](https://mathiasbynens.be/notes/javascript-escapes#hexadecimal) for consistency and clarity.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const foo = '\x1B';
-const foo = `\x1B${bar}`;
-```
 
-## Pass
+// ✅
+const foo = '\u001B';
+```
 
 ```js
-const foo = '\u001B';
+// ❌
+const foo = `\x1B${bar}`;
+
+// ✅
 const foo = `\u001B${bar}`;
 ```

docs/rules/no-instanceof-builtins.md

@@ -14,50 +14,77 @@ Therefore, it is recommended to use a safer method, like `Object.prototype.toStr
 ## Examples
 
 ```js
-foo instanceof String; // ❌
-typeof foo === 'string'; // ✅
+// ❌
+foo instanceof String;
+
+// ✅
+typeof foo === 'string';
 ```
 
 ```js
-foo instanceof Number; // ❌
-typeof foo === 'number'; // ✅
+// ❌
+foo instanceof Number;
+
+// ✅
+typeof foo === 'number';
 ```
 
 ```js
-foo instanceof Boolean; // ❌
-typeof foo === 'boolean'; // ✅
+// ❌
+foo instanceof Boolean;
+
+// ✅
+typeof foo === 'boolean';
 ```
 
 ```js
-foo instanceof BigInt; // ❌
-typeof foo === 'bigint'; // ✅
+// ❌
+foo instanceof BigInt;
+
+// ✅
+typeof foo === 'bigint';
 ```
 
 ```js
-foo instanceof Symbol; // ❌
-typeof foo === 'symbol'; // ✅
+// ❌
+foo instanceof Symbol;
+
+// ✅
+typeof foo === 'symbol';
 ```
 
 ```js
-foo instanceof Array; // ❌
-Array.isArray(foo); // ✅
+// ❌
+foo instanceof Array;
+
+// ✅
+Array.isArray(foo);
 ```
 
 ```js
-foo instanceof Function; // ❌
-typeof foo === 'function'; // ✅
+// ❌
+foo instanceof Function;
+
+// ✅
+typeof foo === 'function';
 ```
 
 ```js
-foo instanceof Object; // ❌
-Object.prototype.toString.call(foo) === '[object Object]'; // ✅
+// ❌
+foo instanceof Object;
+
+// ✅
+Object.prototype.toString.call(foo) === '[object Object]';
 ```
 
 ```js
 import is from '@sindresorhus/is';
 
-foo instanceof Map; // ❌
-is(foo) === 'Map'; // ✅
+// ❌
+foo instanceof Map;
+
+// ✅
+is(foo) === 'Map';
 ```
 
 ## Options

docs/rules/no-invalid-fetch-options.md

@@ -7,38 +7,40 @@
 
 [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) throws a `TypeError` when the method is `GET` or `HEAD` and a body is provided.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const response = await fetch('/', {body: 'foo=bar'});
 ```
 
 ```js
+// ❌
 const request = new Request('/', {body: 'foo=bar'});
 ```
 
 ```js
-const response = await fetch('/', {method: 'GET', body: 'foo=bar'});
-```
-
-```js
-const request = new Request('/', {method: 'GET', body: 'foo=bar'});
-```
-
-## Pass
-
-```js
+// ✅
 const response = await fetch('/', {method: 'HEAD'});
 ```
 
 ```js
+// ✅
 const request = new Request('/', {method: 'HEAD'});
 ```
 
 ```js
+// ❌
+const response = await fetch('/', {method: 'GET', body: 'foo=bar'});
+
+// ✅
 const response = await fetch('/', {method: 'POST', body: 'foo=bar'});
 ```
 
 ```js
+// ❌
+const request = new Request('/', {method: 'GET', body: 'foo=bar'});
+
+// ✅
 const request = new Request('/', {method: 'POST', body: 'foo=bar'});
 ```

docs/rules/no-invalid-remove-event-listener.md

@@ -7,41 +7,42 @@
 
 The [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) function must be called with a reference to the same function that was passed to [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). Calling `removeEventListener` with an inline function or the result of an inline `.bind()` call is indicative of an error, and won't actually remove the listener.
 
-## Fail
+## Examples
 
 ```js
-window.removeEventListener('click', fn.bind(window));
+// ❌
+window.removeEventListener('click', listener.bind(window));
+
+// ✅
+window.removeEventListener('click', listener);
 ```
 
 ```js
+// ✅
+window.removeEventListener('click', getListener());
+```
+
+```js
+// ❌
 window.removeEventListener('click', () => {});
 ```
 
 ```js
+// ❌
 window.removeEventListener('click', function () {});
 ```
 
 ```js
+// ❌
 class MyElement extends HTMLElement {
 	handler() {}
 
 	disconnectedCallback() {
 		this.removeEventListener('click', this.handler.bind(this));
 	}
 }
-```
 
-## Pass
-
-```js
-window.removeEventListener('click', listener);
-```
-
-```js
-window.removeEventListener('click', getListener());
-```
-
-```js
+// ✅
 class MyElement extends HTMLElement {
 	constructor() {
 		super();

docs/rules/no-keyword-prefix.md

@@ -7,19 +7,25 @@
 
 `new Foo` and `newFoo` look very similar. Use alternatives that do not look like keyword usage.
 
-## Fail
+## Examples
 
 ```js
+// ❌
 const newFoo = 'foo';
-const classFoo = 'foo';
-```
 
-## Pass
+// ❌
+const classFoo = 'foo';
 
-```js
+// ✅
 const foo = 'foo';
+
+// ✅
 const _newFoo = 'foo';
+
+// ✅
 const new_foo = 'foo';
+
+// ✅
 const fooNew = 'foo';
 ```
 
@@ -31,10 +37,11 @@ If you want a custom list of disallowed prefixes you can set them with `disallow
 
 ```js
 // eslint unicorn/no-keyword-prefix: ["error", {"disallowedPrefixes": ["new", "for"]}]
-const classFoo = "a"; // pass
+// ✅
+const classFoo = "a";
 
-// eslint unicorn/no-keyword-prefix: ["error", {"disallowedPrefixes": ["new", "for"]}]
-const forFoo = "a"; // fail
+// ❌
+const forFoo = "a";
 ```
 
 The default is `["new", "class"]`.
@@ -45,12 +52,16 @@ If you want to disable this rule for properties, set `checkProperties` to `false
 
 ```js
 // eslint unicorn/no-keyword-prefix: ["error", {"checkProperties": true}]
-foo.newFoo = 2; // fail
+// ❌
+foo.newFoo = 2;
+```
 
+```js
 // eslint unicorn/no-keyword-prefix: ["error", {"checkProperties": false}]
+// ✅
 var foo = {newFoo: 1}; // pass
 
-// eslint unicorn/no-keyword-prefix: ["error", {"checkProperties": false}]
+// ✅
 foo.newFoo = 2; // pass
 ```
 
@@ -60,8 +71,12 @@ The default behavior is to check for camel case usage. If you want to disallow t
 
 ```js
 // eslint unicorn/no-keyword-prefix: ["error", {"onlyCamelCase": true}]
-const new_foo = "foo"; // pass
+// ✅
+const new_foo = "foo";
+```
 
+```js
 // eslint unicorn/no-keyword-prefix: ["error", {"onlyCamelCase": false}]
-const new_foo = "foo"; // fail
+// ❌
+const new_foo = "foo";
 ```