docs(website): add remark plugin for tabs and apply it to rules (#4128)

* docs(website): add remark plugin for tabs and apply it to rules

* docs(website): correct markdown linting issues

* docs(website): update tabs remark plugin

* docs(website): update documentation pages

* docs(website): correct heading in await-thenable

* docs(website): refactor remark tabs to be excluded from toc

* docs(website): move license to standalone file

* docs(eslint-plugin): update remaining rules docs

Co-authored-by: Brad Zacher <brad.zacher@gmail.com>

packages/eslint-plugin/docs/rules/adjacent-overload-signatures.md

@@ -6,7 +6,9 @@ Grouping overloaded members together can improve readability of the code.
 
 This rule aims to standardize the way overloaded members are organized.
 
-The following patterns are considered warnings:
+<!--tabs-->
+
+### ❌ Incorrect
 
 ```ts
 declare namespace Foo {
@@ -43,7 +45,7 @@ export function bar(): void;
 export function foo(sn: string | number): void;
 ```
 
-The following patterns are not warnings:
+### ✅ Correct
 
 ```ts
 declare namespace Foo {

packages/eslint-plugin/docs/rules/array-type.md

@@ -33,14 +33,16 @@ The default config will enforce that all mutable and readonly arrays use the `'a
 
 Always use `T[]` or `readonly T[]` for all array types.
 
-Incorrect code for `"array"`:
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 const x: Array<string> = ['a', 'b'];
 const y: ReadonlyArray<string> = ['a', 'b'];
 ```
 
-Correct code for `"array"`:
+#### ✅ Correct
 
 ```ts
 const x: string[] = ['a', 'b'];
@@ -51,14 +53,16 @@ const y: readonly string[] = ['a', 'b'];
 
 Always use `Array<T>` or `ReadonlyArray<T>` for all array types.
 
-Incorrect code for `"generic"`:
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 const x: string[] = ['a', 'b'];
 const y: readonly string[] = ['a', 'b'];
 ```
 
-Correct code for `"generic"`:
+#### ✅ Correct
 
 ```ts
 const x: Array<string> = ['a', 'b'];
@@ -70,7 +74,9 @@ const y: ReadonlyArray<string> = ['a', 'b'];
 Use `T[]` or `readonly T[]` for simple types (i.e. types which are just primitive names or type references).
 Use `Array<T>` or `ReadonlyArray<T>` for all other types (union types, intersection types, object types, function types, etc).
 
-Incorrect code for `"array-simple"`:
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 const a: (string | number)[] = ['a', 'b'];
@@ -81,7 +87,7 @@ const e: Array<string> = ['a', 'b'];
 const f: ReadonlyArray<string> = ['a', 'b'];
 ```
 
-Correct code for `"array-simple"`:
+#### ✅ Correct
 
 ```ts
 const a: Array<string | number> = ['a', 'b'];

packages/eslint-plugin/docs/rules/await-thenable.md

@@ -5,7 +5,11 @@ While it is valid JavaScript to await a non-`Promise`-like value (it will resolv
 
 ## Rule Details
 
-Examples of **incorrect** code for this rule:
+Examples of code for this rule:
+
+<!--tabs-->
+
+### ❌ Incorrect
 
 ```ts
 await 'value';
@@ -14,7 +18,7 @@ const createValue = () => 'value';
 await createValue();
 ```
 
-Examples of **correct** code for this rule:
+### ✅ Correct
 
 ```ts
 await Promise.resolve('value');

packages/eslint-plugin/docs/rules/ban-ts-comment.md

@@ -41,7 +41,9 @@ const defaultOptions: Options = {
 
 A value of `true` for a particular directive means that this rule will report if it finds any usage of said directive.
 
-For example, with the defaults above the following patterns are considered warnings for single line or comment block lines:
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 if (false) {
@@ -56,7 +58,7 @@ if (false) {
 }
 ```
 
-The following patterns are not warnings:
+#### ✅ Correct
 
 ```ts
 if (false) {
@@ -69,7 +71,11 @@ if (false) {
 
 A value of `'allow-with-description'` for a particular directive means that this rule will report if it finds a directive that does not have a description following the directive (on the same line).
 
-For example, with `{ 'ts-expect-error': 'allow-with-description' }` the following patterns are considered a warning:
+For example, with `{ 'ts-expect-error': 'allow-with-description' }`:
+
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 if (false) {
@@ -82,7 +88,7 @@ if (false) {
 }
 ```
 
-The following patterns are not a warning:
+#### ✅ Correct
 
 ```ts
 if (false) {
@@ -101,7 +107,11 @@ if (false) {
 
 Use `minimumDescriptionLength` to set a minimum length for descriptions when using the `allow-with-description` option for a directive.
 
-For example, with `{ 'ts-expect-error': 'allow-with-description', minimumDescriptionLength: 10 }` the following pattern is considered a warning:
+For example, with `{ 'ts-expect-error': 'allow-with-description', minimumDescriptionLength: 10 }` the following pattern is:
+
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 if (false) {
@@ -110,7 +120,7 @@ if (false) {
 }
 ```
 
-The following pattern is not a warning:
+#### ✅ Correct
 
 ```ts
 if (false) {

packages/eslint-plugin/docs/rules/ban-tslint-comment.md

@@ -4,10 +4,12 @@ Useful when migrating from TSLint to ESLint. Once TSLint has been removed, this
 
 ## Rule Details
 
-Examples of **incorrect** code for this rule:
-
 All TSLint [rule flags](https://palantir.github.io/tslint/usage/rule-flags/)
 
+<!--tabs-->
+
+### ❌ Incorrect
+
 ```js
 /* tslint:disable */
 /* tslint:enable */
@@ -18,10 +20,12 @@ someCode(); // tslint:disable-line
 // tslint:disable-next-line:rule1 rule2 rule3...
 ```
 
-Examples of **correct** code for this rule:
+### ✅ Correct
 
 ```js
 // This is a comment that just happens to mention tslint
+/* This is a multiline comment that just happens to mention tslint */
+someCode(); // This is a comment that just happens to mention tslint
 ```
 
 ## When Not To Use It

packages/eslint-plugin/docs/rules/ban-types.md

@@ -131,7 +131,11 @@ const defaultTypes = {
 
 ### Examples
 
-Examples of **incorrect** code with the default options:
+Examples of code with the default options:
+
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 // use lower-case primitives for consistency
@@ -151,7 +155,7 @@ const curly1: {} = 1;
 const curly2: {} = { a: 'string' };
 ```
 
-Examples of **correct** code with the default options:
+#### ✅ Correct
 
 ```ts
 // use lower-case primitives for consistency

packages/eslint-plugin/docs/rules/class-literal-property-style.md

@@ -15,37 +15,41 @@ This is because these types can be mutated and carry with them more complex impl
 
 This style checks for any getter methods that return literal values, and requires them to be defined using fields with the `readonly` modifier instead.
 
-Examples of **correct** code with the `fields` style:
+Examples of code with the `fields` style:
+
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 /* eslint @typescript-eslint/class-literal-property-style: ["error", "fields"] */
 
 class Mx {
-  public readonly myField1 = 1;
-
-  // not a literal
-  public readonly myField2 = [1, 2, 3];
-
-  private readonly ['myField3'] = 'hello world';
+  public static get myField1() {
+    return 1;
+  }
 
-  public get myField4() {
-    return `hello from ${window.location.href}`;
+  private get ['myField2']() {
+    return 'hello world';
   }
 }
 ```
 
-Examples of **incorrect** code with the `fields` style:
+#### ✅ Correct
 
 ```ts
 /* eslint @typescript-eslint/class-literal-property-style: ["error", "fields"] */
 
 class Mx {
-  public static get myField1() {
-    return 1;
-  }
+  public readonly myField1 = 1;
 
-  private get ['myField2']() {
-    return 'hello world';
+  // not a literal
+  public readonly myField2 = [1, 2, 3];
+
+  private readonly ['myField3'] = 'hello world';
+
+  public get myField4() {
+    return `hello from ${window.location.href}`;
   }
 }
 ```
@@ -56,7 +60,23 @@ This style checks for any `readonly` fields that are assigned literal values, an
 This style pairs well with the [`@typescript-eslint/prefer-readonly`](prefer-readonly.md) rule,
 as it will identify fields that can be `readonly`, and thus should be made into getters.
 
-Examples of **correct** code with the `getters` style:
+Examples of code with the `getters` style:
+
+<!--tabs-->
+
+#### ❌ Incorrect
+
+```ts
+/* eslint @typescript-eslint/class-literal-property-style: ["error", "getters"] */
+
+class Mx {
+  readonly myField1 = 1;
+  readonly myField2 = `hello world`;
+  private readonly myField3 = 'hello world';
+}
+```
+
+#### ✅ Correct
 
 ```ts
 /* eslint @typescript-eslint/class-literal-property-style: ["error", "getters"] */
@@ -78,18 +98,6 @@ class Mx {
 }
 ```
 
-Examples of **incorrect** code with the `getters` style:
-
-```ts
-/* eslint @typescript-eslint/class-literal-property-style: ["error", "getters"] */
-
-class Mx {
-  readonly myField1 = 1;
-  readonly myField2 = `hello world`;
-  private readonly myField3 = 'hello world';
-}
-```
-
 ## When Not To Use It
 
 When you have no strong preference, or do not wish to enforce a particular style

packages/eslint-plugin/docs/rules/consistent-indexed-object-style.md

@@ -33,7 +33,13 @@ For example:
 
 This rule enforces a consistent way to define records.
 
-Examples of **incorrect** code with `record` option.
+### `record`
+
+Examples of code with `record` option.
+
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 interface Foo {
@@ -45,19 +51,25 @@ type Foo = {
 };
 ```
 
-Examples of **correct** code with `record` option.
+#### ✅ Correct
 
 ```ts
 type Foo = Record<string, unknown>;
 ```
 
-Examples of **incorrect** code with `index-signature` option.
+### `index-signature`
+
+Examples of code with `index-signature` option.
+
+<!--tabs-->
+
+#### ❌ Incorrect
 
 ```ts
 type Foo = Record<string, unknown>;
 ```
 
-Examples of **correct** code with `index-signature` option.
+#### ✅ Correct
 
 ```ts
 interface Foo {