typescript-eslint · JoshuaKGoldberg · Sep 16, 2023 · Jul 21, 2023 · Jul 21, 2023 · Jul 25, 2023
diff --git a/.markdownlint.json b/.markdownlint.json
@@ -73,7 +73,8 @@
       "summary",
       "sup",
       "TabItem",
-      "Tabs"
+      "Tabs",
+      "TypeScriptOverlap"
     ]
   },
   // MD034/no-bare-urls - Bare URL used

diff --git a/packages/eslint-plugin/docs/rules/no-dupe-class-members.md b/packages/eslint-plugin/docs/rules/no-dupe-class-members.md
@@ -6,5 +6,9 @@ description: 'Disallow duplicate class members.'
 >
 > See **https://typescript-eslint.io/rules/no-dupe-class-members** for documentation.
 
+import TypeScriptOverlap from "@site/src/components/TypeScriptOverlap";
+
+<TypeScriptOverlap />
+
 This rule extends the base [`eslint/no-dupe-class-members`](https://eslint.org/docs/rules/no-dupe-class-members) rule.
 It adds support for TypeScript's method overload definitions.
diff --git a/packages/eslint-plugin/docs/rules/no-invalid-this.md b/packages/eslint-plugin/docs/rules/no-invalid-this.md
@@ -6,5 +6,9 @@ description: 'Disallow `this` keywords outside of classes or class-like objects.
 >
 > See **https://typescript-eslint.io/rules/no-invalid-this** for documentation.
 
+import TypeScriptOverlap from "@site/src/components/TypeScriptOverlap";
+
+<TypeScriptOverlap strict />
+
 This rule extends the base [`eslint/no-invalid-this`](https://eslint.org/docs/rules/no-invalid-this) rule.
 It adds support for TypeScript's `this` parameters.
diff --git a/packages/eslint-plugin/docs/rules/no-redeclare.md b/packages/eslint-plugin/docs/rules/no-redeclare.md
@@ -6,6 +6,10 @@ description: 'Disallow variable redeclaration.'
 >
 > See **https://typescript-eslint.io/rules/no-redeclare** for documentation.
 
+import TypeScriptOverlap from "@site/src/components/TypeScriptOverlap";
+
+<TypeScriptOverlap />
+
 This rule extends the base [`eslint/no-redeclare`](https://eslint.org/docs/rules/no-redeclare) rule.
 It adds support for TypeScript function overloads, and declaration merging.
 

diff --git a/packages/website/src/components/TypeScriptOverlap/index.tsx b/packages/website/src/components/TypeScriptOverlap/index.tsx
@@ -0,0 +1,32 @@
+import Admonition from '@theme/Admonition';
+import React from 'react';
+
+export default function TypeScriptOverlap({
+  strict,
+}: {
+  strict?: string;
+}): React.JSX.Element {
+  return (
+    <div>
+      <Admonition type="danger">
+        <p>
+          The code problem checked by this ESLint rule is automatically checked
+          by the TypeScript compiler. Thus, it is not recommended to turn on
+          this rule in new TypeScript projects. You only need to enable this
+          rule if you prefer the ESLint error messages over the TypeScript
+          compiler error messages.
+        </p>
+        {strict === undefined ? (
+          <></>
+        ) : (
+          <p>
+            (Note that technically, TypeScript will only catch this if you have
+            the <code>strict</code> or <code>noImplicitThis</code> flags
+            enabled. These are enabled in most TypeScript projects, since they
+            are considered to be best practice.)
+          </p>
+        )}
+      </Admonition>
+    </div>
+  );
+}