@typescript-eslint/eslint-plugin 6.8.1-alpha.30 → 6.8.1-alpha.33

package/docs/rules/array-type.md

@@ -22,14 +22,14 @@ Always use `T[]` or `readonly T[]` for all array types.
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "default": "array" }'
 const x: Array<string> = ['a', 'b'];
 const y: ReadonlyArray<string> = ['a', 'b'];
 ```
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "default": "array" }'
 const x: string[] = ['a', 'b'];
 const y: readonly string[] = ['a', 'b'];
 ```
@@ -42,14 +42,14 @@ Always use `Array<T>` or `ReadonlyArray<T>` for all array types.
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "default": "generic" }'
 const x: string[] = ['a', 'b'];
 const y: readonly string[] = ['a', 'b'];
 ```
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "default": "generic" }'
 const x: Array<string> = ['a', 'b'];
 const y: ReadonlyArray<string> = ['a', 'b'];
 ```
@@ -63,7 +63,7 @@ Use `Array<T>` or `ReadonlyArray<T>` for all other types (union types, intersect
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "default": "array-simple" }'
 const a: (string | number)[] = ['a', 'b'];
 const b: { prop: string }[] = [{ prop: 'a' }];
 const c: (() => void)[] = [() => {}];
@@ -74,7 +74,7 @@ const f: ReadonlyArray<string> = ['a', 'b'];
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "default": "array-simple" }'
 const a: Array<string | number> = ['a', 'b'];
 const b: Array<{ prop: string }> = [{ prop: 'a' }];
 const c: Array<() => void> = [() => {}];

package/docs/rules/ban-ts-comment.md

@@ -33,7 +33,7 @@ A value of `true` for a particular directive means that this rule will report if
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "ts-ignore": true }'
 if (false) {
   // @ts-ignore: Unreachable code error
   console.log('hello');
@@ -48,7 +48,7 @@ if (false) {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "ts-ignore": true }'
 if (false) {
   // Compiler warns about unreachable code error
   console.log('hello');
@@ -65,7 +65,7 @@ For example, with `{ 'ts-expect-error': 'allow-with-description' }`:
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "ts-expect-error": "allow-with-description" }'
 if (false) {
   // @ts-expect-error
   console.log('hello');
@@ -78,7 +78,7 @@ if (false) {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "ts-expect-error": "allow-with-description" }'
 if (false) {
   // @ts-expect-error: Unreachable code error
   console.log('hello');
@@ -101,14 +101,16 @@ For example, with `{ 'ts-expect-error': { descriptionFormat: '^: TS\\d+ because
 
 #### ❌ Incorrect
 
-```ts
+<!-- prettier-ignore -->
+```ts option='{ "ts-expect-error": { "descriptionFormat": "^: TS\\\\d+ because .+$" } }'
 // @ts-expect-error: the library definition is wrong
 const a = doSomething('hello');
 ```
 
 #### ✅ Correct
 
-```ts
+<!-- prettier-ignore -->
+```ts option='{ "ts-expect-error": { "descriptionFormat": "^: TS\\\\d+ because .+$" } }'
 // @ts-expect-error: TS1234 because the library definition is wrong
 const a = doSomething('hello');
 ```
@@ -123,7 +125,7 @@ For example, with `{ 'ts-expect-error': 'allow-with-description', minimumDescrip
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "ts-expect-error": "allow-with-description", "minimumDescriptionLength": 10 }'
 if (false) {
   // @ts-expect-error: TODO
   console.log('hello');
@@ -132,7 +134,7 @@ if (false) {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "ts-expect-error": "allow-with-description", "minimumDescriptionLength": 10 }'
 if (false) {
   // @ts-expect-error The rationale for this override is described in issue #1337 on GitLab
   console.log('hello');

package/docs/rules/class-literal-property-style.md

@@ -31,9 +31,7 @@ Examples of code with the `fields` style:
 
 #### ❌ Incorrect
 
-```ts
-/* eslint @typescript-eslint/class-literal-property-style: ["error", "fields"] */
-
+```ts option='"fields"'
 class Mx {
   public static get myField1() {
     return 1;
@@ -47,9 +45,7 @@ class Mx {
 
 #### ✅ Correct
 
-```ts
-/* eslint @typescript-eslint/class-literal-property-style: ["error", "fields"] */
-
+```ts option='"fields"'
 class Mx {
   public readonly myField1 = 1;
 
@@ -76,9 +72,7 @@ Examples of code with the `getters` style:
 
 #### ❌ Incorrect
 
-```ts
-/* eslint @typescript-eslint/class-literal-property-style: ["error", "getters"] */
-
+```ts option='"getters"'
 class Mx {
   readonly myField1 = 1;
   readonly myField2 = `hello world`;
@@ -88,9 +82,7 @@ class Mx {
 
 #### ✅ Correct
 
-```ts
-/* eslint @typescript-eslint/class-literal-property-style: ["error", "getters"] */
-
+```ts option='"getters"'
 class Mx {
   // no readonly modifier
   public myField1 = 'hello';

package/docs/rules/class-methods-use-this.md

@@ -32,7 +32,7 @@ Makes the rule to ignores any class member explicitly marked with `override`.
 
 Example of a correct code when `ignoreOverrideMethods` is set to `true`:
 
-```ts
+```ts option='{ "ignoreOverrideMethods": true }' showPlaygroundButton
 class X {
   override method() {}
   override property = () => {};
@@ -47,7 +47,7 @@ It's important to note that this option does not only apply to members defined i
 
 Example of a correct code when `ignoreClassesThatImplementAnInterface` is set to `true`:
 
-```ts
+```ts option='{ "ignoreClassesThatImplementAnInterface": true }' showPlaygroundButton
 class X implements Y {
   method() {}
   property = () => {};

package/docs/rules/consistent-generic-constructors.md

@@ -33,14 +33,14 @@ Keeping to one side consistently improve code readability.
 
 #### ❌ Incorrect
 
-```ts
+```ts option='"constructor"'
 const map: Map<string, number> = new Map();
 const set: Set<string> = new Set();
 ```
 
 #### ✅ Correct
 
-```ts
+```ts option='"constructor"'
 const map = new Map<string, number>();
 const map: Map<string, number> = new MyMap();
 const set = new Set<string>();
@@ -54,14 +54,14 @@ const set: Set<string> = new Set<string>();
 
 #### ❌ Incorrect
 
-```ts
+```ts option='"type-annotation"'
 const map = new Map<string, number>();
 const set = new Set<string>();
 ```
 
 #### ✅ Correct
 
-```ts
+```ts option='"type-annotation"'
 const map: Map<string, number> = new Map();
 const set: Set<string> = new Set();
 const set = new Set();

package/docs/rules/consistent-indexed-object-style.md

@@ -33,9 +33,7 @@ Keeping to one declaration form consistently improve code readability.
 
 #### ❌ Incorrect
 
-```ts
-/* eslint @typescript-eslint/consistent-indexed-object-style: ["error", "record"] */
-
+```ts option='"record"'
 interface Foo {
   [key: string]: unknown;
 }
@@ -47,9 +45,7 @@ type Foo = {
 
 #### ✅ Correct
 
-```ts
-/* eslint @typescript-eslint/consistent-indexed-object-style: ["error", "record"] */
-
+```ts option='"record"'
 type Foo = Record<string, unknown>;
 ```
 
@@ -59,17 +55,13 @@ type Foo = Record<string, unknown>;
 
 #### ❌ Incorrect
 
-```ts
-/* eslint @typescript-eslint/consistent-indexed-object-style: ["error", "index-signature"] */
-
+```ts option='"index-signature"'
 type Foo = Record<string, unknown>;
 ```
 
 #### ✅ Correct
 
-```ts
-/* eslint @typescript-eslint/consistent-indexed-object-style: ["error", "index-signature"] */
-
+```ts option='"index-signature"'
 interface Foo {
   [key: string]: unknown;
 }

package/docs/rules/consistent-type-assertions.md

@@ -53,7 +53,7 @@ Examples of code for `{ assertionStyle: 'as', objectLiteralTypeAssertions: 'neve
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "assertionStyle": "as", "objectLiteralTypeAssertions": "never" }'
 const x = { ... } as T;
 
 function foo() {
@@ -63,7 +63,7 @@ function foo() {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "assertionStyle": "as", "objectLiteralTypeAssertions": "never" }'
 const x: T = { ... };
 const y = { ... } as any;
 const z = { ... } as unknown;
@@ -81,7 +81,7 @@ Examples of code for `{ assertionStyle: 'as', objectLiteralTypeAssertions: 'allo
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "assertionStyle": "as", "objectLiteralTypeAssertions": "allow-as-parameter" }'
 const x = { ... } as T;
 
 function foo() {
@@ -91,7 +91,7 @@ function foo() {
 
 #### ✅ Correct
 
-```tsx
+```tsx option='{ "assertionStyle": "as", "objectLiteralTypeAssertions": "allow-as-parameter" }'
 const x: T = { ... };
 const y = { ... } as any;
 const z = { ... } as unknown;

package/docs/rules/consistent-type-definitions.md

@@ -36,17 +36,13 @@ Using the same type declaration style consistently helps with code readability.
 
 #### ❌ Incorrect
 
-```ts
-/* eslint @typescript-eslint/consistent-type-definitions: ["error", "interface"] */
-
+```ts option='"interface"'
 type T = { x: number };
 ```
 
 #### ✅ Correct
 
-```ts
-/* eslint @typescript-eslint/consistent-type-definitions: ["error", "interface"] */
-
+```ts option='"interface"'
 type T = string;
 type Foo = string | {};
 
@@ -61,9 +57,7 @@ interface T {
 
 #### ❌ Incorrect
 
-```ts
-/* eslint @typescript-eslint/consistent-type-definitions: ["error", "type"] */
-
+```ts option='"type"'
 interface T {
   x: number;
 }
@@ -71,9 +65,7 @@ interface T {
 
 #### ✅ Correct
 
-```ts
-/* eslint @typescript-eslint/consistent-type-definitions: ["error", "type"] */
-
+```ts option='"type"'
 type T = { x: number };
 ```
 

package/docs/rules/consistent-type-exports.md

@@ -83,14 +83,14 @@ export { x };
 
 ### ❌ Incorrect
 
-```ts
+```ts option='{ "fixMixedExportsWithInlineTypeSpecifier": true }'
 export { Button } from 'some-library';
 export type { ButtonProps } from 'some-library';
 ```
 
 ### ✅ Correct
 
-```ts
+```ts option='{ "fixMixedExportsWithInlineTypeSpecifier": true }'
 export { Button, type ButtonProps } from 'some-library';
 ```
 

package/docs/rules/consistent-type-imports.md

@@ -22,7 +22,7 @@ This option defines the expected import kind for type-only imports. Valid values
 
 Examples of **correct** code with `{prefer: 'type-imports'}`, and **incorrect** code with `{prefer: 'no-type-imports'}`.
 
-```ts
+```ts option='{ "prefer": "type-imports" }' showPlaygroundButton
 import type { Foo } from 'Foo';
 import type Bar from 'Bar';
 type T = Foo;
@@ -31,7 +31,7 @@ const x: Bar = 1;
 
 Examples of **incorrect** code with `{prefer: 'type-imports'}`, and **correct** code with `{prefer: 'no-type-imports'}`.
 
-```ts
+```ts option='{ "prefer": "type-imports" }' showPlaygroundButton
 import { Foo } from 'Foo';
 import Bar from 'Bar';
 type T = Foo;
@@ -58,7 +58,7 @@ const x: Bar = 1;
 
 #### ✅ With `separate-type-imports`
 
-```ts
+```ts option='{ "fixStyle": "separate-type-imports" }'
 import type { Foo } from 'Foo';
 import type Bar from 'Bar';
 type T = Foo;
@@ -67,7 +67,7 @@ const x: Bar = 1;
 
 #### ✅ With `inline-type-imports`
 
-```ts
+```ts option='{ "fixStyle": "inline-type-imports" }'
 import { type Foo } from 'Foo';
 import type Bar from 'Bar';
 type T = Foo;
@@ -83,7 +83,7 @@ Default is `true`.
 
 Examples of **incorrect** code with `{disallowTypeAnnotations: true}`:
 
-```ts
+```ts option='{ "disallowTypeAnnotations": true }' showPlaygroundButton
 type T = import('Foo').Foo;
 const x: import('Bar') = 1;
 ```

package/docs/rules/dot-notation.md

@@ -37,7 +37,7 @@ If the TypeScript compiler option `noPropertyAccessFromIndexSignature` is set to
 
 Example of a correct code when `allowPrivateClassPropertyAccess` is set to `true`:
 
-```ts
+```ts option='{ "allowPrivateClassPropertyAccess": true }' showPlaygroundButton
 class X {
   private priv_prop = 123;
 }
@@ -50,7 +50,7 @@ x['priv_prop'] = 123;
 
 Example of a correct code when `allowProtectedClassPropertyAccess` is set to `true`:
 
-```ts
+```ts option='{ "allowProtectedClassPropertyAccess": true }' showPlaygroundButton
 class X {
   protected protected_prop = 123;
 }
@@ -63,7 +63,7 @@ x['protected_prop'] = 123;
 
 Example of correct code when `allowIndexSignaturePropertyAccess` is set to `true`:
 
-```ts
+```ts option='{ "allowIndexSignaturePropertyAccess": true }' showPlaygroundButton
 class X {
   [key: string]: number;
 }

package/docs/rules/explicit-function-return-type.md

@@ -98,7 +98,7 @@ Examples of code for this rule with `{ allowExpressions: true }`:
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowExpressions": true }'
 function test() {}
 
 const fn = () => {};
@@ -108,7 +108,7 @@ export default () => {};
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowExpressions": true }'
 node.addEventListener('click', () => {});
 
 node.addEventListener('click', function () {});
@@ -124,7 +124,7 @@ Examples of code for this rule with `{ allowTypedFunctionExpressions: true }`:
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowTypedFunctionExpressions": true }'
 let arrowFn = () => 'test';
 
 let funcExpr = function () {
@@ -138,7 +138,7 @@ let objectProp = {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowTypedFunctionExpressions": true }'
 type FuncType = () => string;
 
 let arrowFn: FuncType = () => 'test';
@@ -182,7 +182,7 @@ Examples of code for this rule with `{ allowHigherOrderFunctions: true }`:
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowHigherOrderFunctions": true }'
 var arrowFn = () => () => {};
 
 function fn() {
@@ -192,7 +192,7 @@ function fn() {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowHigherOrderFunctions": true }'
 var arrowFn = () => (): void => {};
 
 function fn() {
@@ -208,14 +208,14 @@ Examples of code for this rule with `{ allowDirectConstAssertionInArrowFunctions
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowDirectConstAssertionInArrowFunctions": true }'
 const func = (value: number) => ({ type: 'X', value }) as any;
 const func = (value: number) => ({ type: 'X', value }) as Action;
 ```
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowDirectConstAssertionInArrowFunctions": true }'
 const func = (value: number) => ({ foo: 'bar', value }) as const;
 const func = () => x as const;
 ```
@@ -228,7 +228,7 @@ Examples of code for this rule with `{ allowConciseArrowFunctionExpressionsStart
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowConciseArrowFunctionExpressionsStartingWithVoid": true }'
 var join = (a: string, b: string) => `${a}${b}`;
 
 const log = (message: string) => {
@@ -238,7 +238,7 @@ const log = (message: string) => {
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowConciseArrowFunctionExpressionsStartingWithVoid": true }'
 var log = (message: string) => void console.log(message);
 ```
 
@@ -250,7 +250,7 @@ Examples of code for this rule with `{ allowFunctionsWithoutTypeParameters: true
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowFunctionsWithoutTypeParameters": true }'
 function foo<T>(t: T) {
   return t;
 }
@@ -260,7 +260,7 @@ const bar = <T>(t: T) => t;
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowFunctionsWithoutTypeParameters": true }'
 function foo<T>(t: T): T {
   return t;
 }
@@ -297,13 +297,13 @@ Examples of code for this rule with `{ allowIIFEs: true }`:
 
 #### ❌ Incorrect
 
-```ts
+```ts option='{ "allowIIFEs": true }'
 var func = () => 'foo';
 ```
 
 #### ✅ Correct
 
-```ts
+```ts option='{ "allowIIFEs": true }'
 var foo = (() => 'foo')();
 
 var bar = (function () {

package/docs/rules/explicit-member-accessibility.md

@@ -65,7 +65,7 @@ Note the above is an example of a possible configuration you could use - it is n
 
 The following patterns are considered incorrect code if no options are provided:
 
-```ts
+```ts showPlaygroundButton
 class Animal {
   constructor(name) {
     // No accessibility modifier
@@ -88,7 +88,7 @@ class Animal {
 
 The following patterns are considered correct with the default options `{ accessibility: 'explicit' }`:
 
-```ts
+```ts option='{ "accessibility": "explicit" }' showPlaygroundButton
 class Animal {
   public constructor(
     public breed,
@@ -114,7 +114,7 @@ class Animal {
 
 The following patterns are considered incorrect with the accessibility set to **no-public** `[{ accessibility: 'no-public' }]`:
 
-```ts
+```ts option='{ "accessibility": "no-public" }' showPlaygroundButton
 class Animal {
   public constructor(
     public breed,
@@ -140,7 +140,7 @@ class Animal {
 
 The following patterns are considered correct with the accessibility set to **no-public** `[{ accessibility: 'no-public' }]`:
 
-```ts
+```ts option='{ "accessibility": "no-public" }' showPlaygroundButton
 class Animal {
   constructor(
     protected breed,
@@ -178,7 +178,7 @@ e.g. `[ { overrides: { constructors: 'no-public' } } ]`
 
 The following patterns are considered incorrect with the example override
 
-```ts
+```ts option='{ "overrides": { "constructors": "no-public" } }' showPlaygroundButton
 class Animal {
   public constructor(protected animalName) {}
   public get name() {
@@ -189,7 +189,7 @@ class Animal {
 
 The following patterns are considered correct with the example override
 
-```ts
+```ts option='{ "overrides": { "constructors": "no-public" } }' showPlaygroundButton
 class Animal {
   constructor(protected animalName) {}
   public get name() {
@@ -204,7 +204,7 @@ e.g. `[ { accessibility: 'no-public', overrides: { properties: 'explicit' } } ]`
 
 The following patterns are considered incorrect with the example override
 
-```ts
+```ts option='{ "accessibility": "no-public", "overrides": { "properties": "explicit" } }' showPlaygroundButton
 class Animal {
   constructor(protected animalName) {}
   get name() {
@@ -220,7 +220,7 @@ class Animal {
 
 The following patterns are considered correct with the example override
 
-```ts
+```ts option='{ "accessibility": "no-public", "overrides": { "properties": "explicit" } }' showPlaygroundButton
 class Animal {
   constructor(protected animalName) {}
   get name() {
@@ -238,7 +238,7 @@ e.g. `[ { accessibility: 'off', overrides: { parameterProperties: 'explicit' } }
 
 The following code is considered incorrect with the example override
 
-```ts
+```ts option='{ "accessibility": "off", "overrides": { "parameterProperties": "explicit" } }' showPlaygroundButton
 class Animal {
   constructor(readonly animalName: string) {}
 }
@@ -246,7 +246,7 @@ class Animal {
 
 The following code patterns are considered correct with the example override
 
-```ts
+```ts option='{ "accessibility": "off", "overrides": { "parameterProperties": "explicit" } }' showPlaygroundButton
 class Animal {
   constructor(public readonly animalName: string) {}
 }
@@ -264,7 +264,7 @@ e.g. `[ { accessibility: 'off', overrides: { parameterProperties: 'no-public' }
 
 The following code is considered incorrect with the example override
 
-```ts
+```ts option='{ "accessibility": "off", "overrides": { "parameterProperties": "no-public" } }' showPlaygroundButton
 class Animal {
   constructor(public readonly animalName: string) {}
 }
@@ -272,7 +272,7 @@ class Animal {
 
 The following code is considered correct with the example override
 
-```ts
+```ts option='{ "accessibility": "off", "overrides": { "parameterProperties": "no-public" } }' showPlaygroundButton
 class Animal {
   constructor(public animalName: string) {}
 }
@@ -286,7 +286,7 @@ As no checks on the overridden member type are performed all permutations of vis
 
 The follow pattern is considered incorrect for the given configuration
 
-```ts
+```ts option='{ "overrides": { "accessors" : "off" } }' showPlaygroundButton
 class Animal {
   constructor(protected animalName) {}
   public get name() {
@@ -300,7 +300,7 @@ class Animal {
 
 The following patterns are considered correct with the example override
 
-```ts
+```ts option='{ "overrides": { "accessors" : "off" } }' showPlaygroundButton
 class Animal {
   public constructor(protected animalName) {}
   public get name() {
@@ -317,7 +317,7 @@ class Animal {
 If you want to ignore some specific methods, you can do it by specifying method names. Note that this option does not care for the context, and will ignore every method with these names, which could lead to it missing some cases. You should use this sparingly.
 e.g. `[ { ignoredMethodNames: ['specificMethod', 'whateverMethod'] } ]`
 
-```ts
+```ts option='{ "ignoredMethodNames": ["specificMethod", "whateverMethod"] }' showPlaygroundButton
 class Animal {
   get specificMethod() {
     console.log('No error because you specified this method on option');