test(eslint-plugin): render snapshots of ESLint output for each code example (#8497)

Author: auvred

Diff for: packages/eslint-plugin/docs/rules/ban-ts-comment.mdx

@@ -41,9 +41,7 @@ if (false) {
   console.log('hello');
 }
 if (false) {
-  /*
-  @ts-ignore: Unreachable code error
-  */
+  /* @ts-ignore: Unreachable code error */
   console.log('hello');
 }
 ```
@@ -90,9 +88,7 @@ if (false) {
   console.log('hello');
 }
 if (false) {
-  /*
-  @ts-expect-error: Unreachable code error
-  */
+  /* @ts-expect-error: Unreachable code error */
   console.log('hello');
 }
 ```

Diff for: packages/eslint-plugin/docs/rules/class-methods-use-this.mdx

@@ -70,7 +70,7 @@ Example of incorrect code when `ignoreClassesThatImplementAnInterface` is set to
 <Tabs>
 <TabItem value="❌ Incorrect">
 
-```ts
+```ts option='{ "ignoreClassesThatImplementAnInterface": "public-fields" }'
 class X implements Y {
   method() {}
   property = () => {};
@@ -86,7 +86,7 @@ class X implements Y {
 </TabItem>
 <TabItem value="✅ Correct">
 
-```ts
+```ts option='{ "ignoreClassesThatImplementAnInterface": "public-fields" }'
 class X implements Y {
   method() {}
   property = () => {};

Diff for: packages/eslint-plugin/docs/rules/consistent-type-exports.mdx

@@ -85,24 +85,6 @@ export type { T };
 export { x };
 ```
 
-<Tabs>
-<TabItem value="❌ Incorrect">
-
-```ts option='{ "fixMixedExportsWithInlineTypeSpecifier": true }'
-export { Button } from 'some-library';
-export type { ButtonProps } from 'some-library';
-```
-
-</TabItem>
-<TabItem value="✅ Correct">
-
-```ts option='{ "fixMixedExportsWithInlineTypeSpecifier": true }'
-export { Button, type ButtonProps } from 'some-library';
-```
-
-</TabItem>
-</Tabs>
-
 ## When Not To Use It
 
 If you use `--isolatedModules` the compiler would error if a type is not re-exported using `export type`.

Diff for: packages/eslint-plugin/docs/rules/default-param-last.mdx

@@ -16,8 +16,6 @@ It adds support for optional parameters.
 <TabItem value="❌ Incorrect">
 
 ```ts
-/* eslint @typescript-eslint/default-param-last: "error" */
-
 function f(a = 0, b: number) {}
 function f(a: number, b = 0, c: number) {}
 function f(a: number, b?: number, c: number) {}
@@ -39,8 +37,6 @@ class Foo {
 <TabItem value="✅ Correct">
 
 ```ts
-/* eslint @typescript-eslint/default-param-last: "error" */
-
 function f(a = 0) {}
 function f(a: number, b = 0) {}
 function f(a: number, b?: number) {}

Diff for: packages/eslint-plugin/docs/rules/explicit-module-boundary-types.mdx

@@ -97,33 +97,33 @@ If you are working on a codebase within which you lint non-TypeScript code (i.e.
 
 ### `allowArgumentsExplicitlyTypedAsAny`
 
-Examples of code for this rule with `{ allowArgumentsExplicitlyTypedAsAny: false }`:
+When this option is `true`, the rule ignores arguments that are explicitly typed as any.
 
 <Tabs>
-<TabItem value="❌ Incorrect">
+<TabItem value="❌ Incorrect for `allowArgumentsExplicitlyTypedAsAny: false`">
 
 ```ts option='{ "allowArgumentsExplicitlyTypedAsAny": false }'
 export const func = (value: any): number => value + 1;
 ```
 
 </TabItem>
-<TabItem value="✅ Correct">
+<TabItem value="✅ Correct for `allowArgumentsExplicitlyTypedAsAny: true`">
 
-```ts option='{ "allowArgumentsExplicitlyTypedAsAny": false }'
-export const func = (value: number): number => value + 1;
+```ts option='{ "allowArgumentsExplicitlyTypedAsAny": true }'
+export const func = (value: any): number => value + 1;
 ```
 
 </TabItem>
 </Tabs>
 
 ### `allowDirectConstAssertionInArrowFunctions`
 
-Examples of code for this rule with `{ allowDirectConstAssertionInArrowFunctions: false }`:
+When this option is `true`, the rule ignores return type annotations on body-less arrow functions that return an `as const` type assertion.
 
 <Tabs>
-<TabItem value="❌ Incorrect">
+<TabItem value="❌ Incorrect for `allowDirectConstAssertionInArrowFunctions: false`">
 
-```ts option='{ "allowArgumentsExplicitlyTypedAsAny": false }'
+```ts option='{ "allowDirectConstAssertionInArrowFunctions": false }'
 export const func = (value: number) => ({ type: 'X', value });
 export const foo = () => ({
   bar: true,
@@ -132,9 +132,9 @@ export const bar = () => 1;
 ```
 
 </TabItem>
-<TabItem value="✅ Correct">
+<TabItem value="✅ Correct for `allowDirectConstAssertionInArrowFunctions: true`">
 
-```ts option='{ "allowArgumentsExplicitlyTypedAsAny": false }'
+```ts option='{ "allowDirectConstAssertionInArrowFunctions": true }'
 export const func = (value: number) => ({ type: 'X', value }) as const;
 export const foo = () =>
   ({
@@ -163,10 +163,10 @@ You may pass function/method names you would like this rule to ignore, like so:
 
 ### `allowHigherOrderFunctions`
 
-Examples of code for this rule with `{ allowHigherOrderFunctions: false }`:
+When this option is `true`, the rule ignores return type annotations on function, which is immediately returning another function expression.
 
 <Tabs>
-<TabItem value="❌ Incorrect">
+<TabItem value="❌ Incorrect for `allowHigherOrderFunctions: false`">
 
 ```ts option='{ "allowHigherOrderFunctions": false }'
 export const arrowFn = () => () => {};
@@ -181,9 +181,9 @@ export function foo(outer: string) {
 ```
 
 </TabItem>
-<TabItem value="✅ Correct">
+<TabItem value="✅ Correct for `allowHigherOrderFunctions: true`">
 
-```ts option='{ "allowHigherOrderFunctions": false }'
+```ts option='{ "allowHigherOrderFunctions": true }'
 export const arrowFn = () => (): void => {};
 
 export function fn() {
@@ -200,10 +200,10 @@ export function foo(outer: string) {
 
 ### `allowTypedFunctionExpressions`
 
-Examples of code for this rule with `{ allowTypedFunctionExpressions: false }`:
+When this option is `true`, the rule ignores type annotations on the variable of a function expression.
 
 <Tabs>
-<TabItem value="❌ Incorrect">
+<TabItem value="❌ Incorrect for `allowTypedFunctionExpressions: false`">
 
 ```ts option='{ "allowTypedFunctionExpressions": false }'
 export let arrowFn = () => 'test';
@@ -220,9 +220,9 @@ export const foo = bar => {};
 ```
 
 </TabItem>
-<TabItem value="✅ Correct">
+<TabItem value="✅ Correct for `allowTypedFunctionExpressions: true`">
 
-```ts option='{ "allowTypedFunctionExpressions": false }'
+```ts option='{ "allowTypedFunctionExpressions": true }'
 type FuncType = () => string;
 
 export let arrowFn: FuncType = () => 'test';

Diff for: packages/eslint-plugin/docs/rules/member-ordering.mdx

@@ -1011,9 +1011,9 @@ interface Foo {
   b(): void;
   a: boolean;
 
-  [a: string]: number; // Order doesn't matter (no sortable identifier)
-  new (): Bar; // Order doesn't matter (no sortable identifier)
-  (): Baz; // Order doesn't matter (no sortable identifier)
+  [a: string]: number;
+  new (): Bar;
+  (): Baz;
 }
 ```
 
@@ -1022,12 +1022,12 @@ interface Foo {
 
 ```ts option='{ "default": { "memberTypes": "never", "order": "alphabetically" } }'
 interface Foo {
+  [a: string]: number;
   a: boolean;
   b(): void;
 
-  [a: string]: number; // Order doesn't matter (no sortable identifier)
-  new (): Bar; // Order doesn't matter (no sortable identifier)
-  (): Baz; // Order doesn't matter (no sortable identifier)
+  (): Baz;
+  new (): Bar;
 }
 ```
 

Diff for: packages/eslint-plugin/docs/rules/no-extraneous-class.mdx

@@ -293,7 +293,7 @@ class NotEmptyClass {
 
 ### `allowWithDecorator`
 
-The `allowWithDecorator` option adds an exemption for classes that contain a member decorated with a `@` decorator.
+The `allowWithDecorator` option adds an exemption for classes decorated with a `@` decorator.
 
 <Tabs>
 <TabItem value="❌ Incorrect">
@@ -308,8 +308,8 @@ class Constants {
 <TabItem value="✅ Correct">
 
 ```ts option='{ "allowWithDecorator": true }'
+@logOnRead()
 class Constants {
-  @logOnRead()
   static readonly version = 42;
 }
 ```

Diff for: packages/eslint-plugin/docs/rules/no-floating-promises.mdx

@@ -104,7 +104,7 @@ This allows you to skip checking of async IIFEs (Immediately Invoked function Ex
 
 Examples of **correct** code for this rule with `{ ignoreIIFE: true }`:
 
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```ts option='{ "ignoreIIFE": true }' showPlaygroundButton
 await (async function () {
   await res(1);

Diff for: packages/eslint-plugin/docs/rules/no-implied-eval.mdx

@@ -36,8 +36,6 @@ This rule aims to eliminate implied `eval()` through the use of `new Function()`
 <TabItem value="❌ Incorrect">
 
 ```ts
-/* eslint @typescript-eslint/no-implied-eval: "error" */
-
 setTimeout('alert(`Hi!`);', 100);
 
 setInterval('alert(`Hi!`);', 100);
@@ -65,8 +63,6 @@ const fn = new Function('a', 'b', 'return a + b');
 <TabItem value="✅ Correct">
 
 ```ts
-/* eslint @typescript-eslint/no-implied-eval: "error" */
-
 setTimeout(function () {
   alert('Hi!');
 }, 100);

Diff for: packages/eslint-plugin/docs/rules/no-meaningless-void-operator.mdx

@@ -44,7 +44,7 @@ function bar(x: number) {
   void x; // discarding a number
   return 2;
 }
-void bar(); // discarding a number
+void bar(1); // discarding a number
 ```
 
 </TabItem>

Diff for: packages/eslint-plugin/docs/rules/no-require-imports.mdx

@@ -45,14 +45,14 @@ With `{allow: ['/package\\.json$']}`:
 <Tabs>
 <TabItem value="❌ Incorrect">
 
-```ts
+```ts option='{ "allow": ["/package.json$"] }'
 console.log(require('../data.json').version);
 ```
 
 </TabItem>
 <TabItem value="✅ Correct">
 
-```ts
+```ts option='{ "allow": ["/package.json$"] }'
 console.log(require('../package.json').version);
 ```
 

Diff for: packages/eslint-plugin/docs/rules/no-unnecessary-type-assertion.mdx

@@ -24,17 +24,17 @@ const bar = foo!;
 ```
 
 ```ts
-const foo = <3>3;
+const foo = <number>(3 + 5);
 ```
 
 ```ts
-type Foo = 3;
-const foo = <Foo>3;
+type Foo = number;
+const foo = <Foo>(3 + 5);
 ```
 
 ```ts
-type Foo = 3;
-const foo = 3 as Foo;
+type Foo = number;
+const foo = (3 + 5) as Foo;
 ```
 
 ```ts

Diff for: packages/eslint-plugin/docs/rules/no-var-requires.mdx

@@ -45,14 +45,14 @@ With `{allow: ['/package\\.json$']}`:
 <Tabs>
 <TabItem value="❌ Incorrect">
 
-```ts
+```ts option='{ "allow": ["/package.json$"] }'
 const foo = require('../data.json');
 ```
 
 </TabItem>
 <TabItem value="✅ Correct">
 
-```ts
+```ts option='{ "allow": ["/package.json$"] }'
 const foo = require('../package.json');
 ```
 

Diff for: packages/eslint-plugin/docs/rules/non-nullable-type-assertion-style.mdx

@@ -23,7 +23,7 @@ This rule reports when an `as` cast is doing the same job as a `!` would, and su
 <TabItem value="❌ Incorrect">
 
 ```ts
-const maybe = Math.random() > 0.5 ? '' : undefined;
+const maybe: string | undefined = Math.random() > 0.5 ? '' : undefined;
 
 const definitely = maybe as string;
 const alsoDefinitely = <string>maybe;
@@ -33,7 +33,7 @@ const alsoDefinitely = <string>maybe;
 <TabItem value="✅ Correct">
 
 ```ts
-const maybe = Math.random() > 0.5 ? '' : undefined;
+const maybe: string | undefined = Math.random() > 0.5 ? '' : undefined;
 
 const definitely = maybe!;
 const alsoDefinitely = maybe!;

Diff for: packages/eslint-plugin/docs/rules/only-throw-error.mdx

@@ -39,10 +39,10 @@ throw `${err}`;
 const err = '';
 throw err;
 
-function err() {
+function getError() {
   return '';
 }
-throw err();
+throw getError();
 
 const foo = {
   bar: '',
@@ -70,10 +70,10 @@ try {
 const err = new Error();
 throw err;
 
-function err() {
+function getError() {
   return new Error();
 }
-throw err();
+throw getError();
 
 const foo = {
   bar: new Error(),

Diff for: packages/eslint-plugin/docs/rules/prefer-destructuring.mdx

@@ -87,14 +87,14 @@ Examples with `{ enforceForDeclarationWithTypeAnnotation: true }`:
 <Tabs>
 <TabItem value="❌ Incorrect">
 
-```ts
+```ts option='{ "object": true }, { "enforceForDeclarationWithTypeAnnotation": true }'
 const x: string = obj.x;
 ```
 
 </TabItem>
 <TabItem value="✅ Correct">
 
-```ts
+```ts option='{ "object": true }, { "enforceForDeclarationWithTypeAnnotation": true }'
 const { x }: { x: string } = obj;
 ```