docs(eslint-plugin): add warning about superfluous rules with typescr…

…ipt (#7372)

* fix: blog typo

* Update packages/website/blog/2023-07-09-announcing-typescript-eslint-v6.md

Co-authored-by: Josh Goldberg ✨ <git@joshuakgoldberg.com>

* Update packages/website/blog/2023-07-09-announcing-typescript-eslint-v6.md

Co-authored-by: Josh Goldberg ✨ <git@joshuakgoldberg.com>

* Update 2023-07-09-announcing-typescript-eslint-v6.md

* Update 2023-07-09-announcing-typescript-eslint-v6.md

* Update packages/website/blog/2023-07-09-announcing-typescript-eslint-v6.md

* docs: add typescript warning

* Update package.json

* Update 2023-07-09-announcing-typescript-eslint-v6.md

* Update packages/eslint-plugin/docs/rules/no-dupe-class-members.md

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

* Update packages/eslint-plugin/docs/rules/no-invalid-this.md

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

* fix: weird whitespace

* feat: typescript mdx component

* fix: overlapping pr

* fix: lint

---------

Co-authored-by: Josh Goldberg ✨ <git@joshuakgoldberg.com>
Co-authored-by: Brad Zacher <brad.zacher@gmail.com>

.markdownlint.json

@@ -73,7 +73,8 @@
       "summary",
       "sup",
       "TabItem",
-      "Tabs"
+      "Tabs",
+      "TypeScriptOverlap"
     ]
   },
   // MD034/no-bare-urls - Bare URL used

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.

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.

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.
 

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>
+  );
+}