docs: various improvements to documentations (typescript-eslint#4219)

armano2 · web-flow · commit ce27488d948e · 2021-11-28T09:44:28.000-08:00
* docs: various improvements to documentations

* chore: use remark-docusaurus-tabs
diff --git a/packages/eslint-plugin/docs/rules/ban-types.md b/packages/eslint-plugin/docs/rules/ban-types.md
@@ -76,7 +76,11 @@ The default options provide a set of "best practices", intended to provide safet
   - This is a point of confusion for many developers, who think it means "any object type".
   - See [this comment for more information](https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-675156492).
 
-**_Important note:_** the default options suggest using `Record<string, unknown>`; this was a stylistic decision, as the built-in `Record` type is considered to look cleaner.
+:::important
+
+The default options suggest using `Record<string, unknown>`; this was a stylistic decision, as the built-in `Record` type is considered to look cleaner.
+
+:::
 
 <details>
 <summary>Default Options</summary>
diff --git a/packages/eslint-plugin/docs/rules/class-literal-property-style.md b/packages/eslint-plugin/docs/rules/class-literal-property-style.md
@@ -8,9 +8,13 @@ When writing TypeScript libraries that could be used by JavaScript users however
 This rule aims to ensure that literals exposed by classes are done so consistently, in one of the two style described above.
 By default this rule prefers the `fields` style as it means JS doesn't have to setup & teardown a function closure.
 
-Note that this rule only checks for constant _literal_ values (string, template string, number, bigint, boolean, regexp, null). It does not check objects or arrays, because a readonly field behaves differently to a getter in those cases. It also does not check functions, as it is a common pattern to use readonly fields with arrow function values as auto-bound methods.
+:::note
+
+This rule only checks for constant _literal_ values (string, template string, number, bigint, boolean, regexp, null). It does not check objects or arrays, because a readonly field behaves differently to a getter in those cases. It also does not check functions, as it is a common pattern to use readonly fields with arrow function values as auto-bound methods.
 This is because these types can be mutated and carry with them more complex implications about their usage.
 
+:::
+
 ### The `fields` style
 
 This style checks for any getter methods that return literal values, and requires them to be defined using fields with the `readonly` modifier instead.
diff --git a/packages/eslint-plugin/docs/rules/typedef.md b/packages/eslint-plugin/docs/rules/typedef.md
@@ -88,7 +88,7 @@ const [a] = [1];
 const [b, c] = [1, 2];
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 const [a]: number[] = [1];
@@ -119,7 +119,7 @@ const mapper = {
 };
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 const logsSize = (size: number) => console.log(size);
@@ -148,7 +148,7 @@ class ContainsText {
 }
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 class ContainsText {
@@ -172,7 +172,7 @@ const { length } = 'text';
 const [b, c] = Math.random() ? [1, 2] : [3, 4];
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 const { length }: { length: number } = 'text';
@@ -218,7 +218,7 @@ class Logger {
 }
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 function logsSize(size: number): void {
@@ -263,7 +263,7 @@ type Members = {
 };
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 type Members = {
@@ -288,7 +288,7 @@ let initialText = 'text';
 let delayedText;
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 const text: string = 'text';
@@ -310,7 +310,7 @@ Examples of code with `{ "variableDeclaration": true, "variableDeclarationIgnore
 const text = 'text';
 ```
 
-#### ❌ Correct
+#### ✅ Correct
 
 ```ts
 const a = (): void => {};
diff --git a/packages/eslint-plugin/docs/rules/unified-signatures.md b/packages/eslint-plugin/docs/rules/unified-signatures.md
@@ -6,26 +6,30 @@ Warns for any two overloads that could be unified into one by using a union or a
 
 This rule aims to keep the source code as maintainable as possible by reducing the amount of overloads.
 
-Examples of **incorrect** code for this rule:
+Examples of code for this rule:
+
+<!--tabs-->
+
+### ❌ Incorrect
 
 ```ts
-function f(x: number): void;
-function f(x: string): void;
+function x(x: number): void;
+function x(x: string): void;
 ```
 
 ```ts
-f(): void;
-f(...x: number[]): void;
+function y(): void;
+function y(...x: number[]): void;
 ```
 
-Examples of **correct** code for this rule:
+### ✅ Correct
 
 ```ts
-function f(x: number | string): void;
+function x(x: number | string): void;
 ```
 
 ```ts
-function f(x?: ...number[]): void;
+function y(...x: number[]): void;
 ```
 
 ## Related to
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
@@ -8,7 +8,7 @@ const remarkPlugins = [
   [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
 ];
 
-const beforeDefaultRemarkPlugins = [[require('./src/remark/tabs'), {}]];
+const beforeDefaultRemarkPlugins = [[require('remark-docusaurus-tabs'), {}]];
 
 const githubUrl = 'https://github.com/typescript-eslint/typescript-eslint';
 
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -31,6 +31,7 @@
     "konamimojisplosion": "^0.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "remark-docusaurus-tabs": "^0.2.0",
     "typescript": "*"
   },
   "devDependencies": {
diff --git a/packages/website/src/remark/tabs.js b/packages/website/src/remark/tabs.js
diff --git a/packages/website/src/remark/tabs.license.md b/packages/website/src/remark/tabs.license.md
diff --git a/yarn.lock b/yarn.lock
@@ -12166,6 +12166,14 @@ remark-admonitions@^1.2.1:
     unified "^8.4.2"
     unist-util-visit "^2.0.1"
 
+remark-docusaurus-tabs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/remark-docusaurus-tabs/-/remark-docusaurus-tabs-0.2.0.tgz#39e02b2e72a68458c1c11003e95ddb7d236e8006"
+  integrity sha512-Xl8FkeQAdDqlhf7EurBxCkT7cfA5QK2PN8eoFr94g1OOuc7XsgVk897zf8yhNNnpQYR8nd/XC6JaXTZxHxX4mA==
+  dependencies:
+    mdast-util-to-string "^2.0.0"
+    unist-util-visit "^2.0.3"
+
 remark-emoji@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.2.0.tgz#1c702090a1525da5b80e15a8f963ef2c8236cac7"
