From 9fe25ca0776c7b09939a8a910bf5b217272486b8 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Sat, 11 Apr 2020 22:35:26 +0800
Subject: [PATCH 01/15] feat: add a codefix to fix class to className in react

---
 .../codefixes/fixReactClassNameAndHTMLFor.ts  | 60 +++++++++++++++++++
 src/services/tsconfig.json                    |  1 +
 .../codeFixReactClassNameAndHTMLFor1.ts       | 15 +++++
 .../codeFixReactClassNameAndHTMLFor2.ts       | 15 +++++
 .../codeFixReactClassNameAndHTMLFor3-1.ts     | 16 +++++
 .../codeFixReactClassNameAndHTMLFor3-2.ts     | 17 ++++++
 .../codeFixReactClassNameAndHTMLFor3-3.ts     | 16 +++++
 .../codeFixReactClassNameAndHTMLFor4.ts       | 30 ++++++++++
 8 files changed, 170 insertions(+)
 create mode 100644 src/services/codefixes/fixReactClassNameAndHTMLFor.ts
 create mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts
 create mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts
 create mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts
 create mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts
 create mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts
 create mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts

diff --git a/src/services/codefixes/fixReactClassNameAndHTMLFor.ts b/src/services/codefixes/fixReactClassNameAndHTMLFor.ts
new file mode 100644
index 00000000000..aa3a92a6a1d
--- /dev/null
+++ b/src/services/codefixes/fixReactClassNameAndHTMLFor.ts
@@ -0,0 +1,60 @@
+/* @internal */
+namespace ts.codefix {
+    const fixID = "fixReactClassNameAndHTMLFor";
+    const errorCodes = [Diagnostics.Type_0_is_not_assignable_to_type_1.code];
+    registerCodeFix({
+        errorCodes,
+        getCodeActions: context => {
+            const { jsx } = context.program.getCompilerOptions();
+            if (jsx !== JsxEmit.React) {
+                return undefined;
+            }
+            const { sourceFile, span } = context;
+            const node = getTokenAtPosition(sourceFile, span.start);
+            if (!shouldFix(node)) return undefined;
+            const changes = textChanges.ChangeTracker.with(context, t => doChange(t, sourceFile, node));
+            return [createCodeFixAction(fixID, changes, [Diagnostics.Did_you_mean_0, getCorrectName(node)], fixID, Diagnostics.Fix_all_detected_spelling_errors)];
+        },
+        fixIds: [fixID],
+        getAllCodeActions: context => codeFixAll(context, errorCodes, (changes, diag) => {
+            const node = getTokenAtPosition(context.sourceFile, diag.start);
+            if (!shouldFix(node)) return;
+            doChange(changes, context.sourceFile, node);
+        }),
+    });
+
+    function doChange(changeTracker: textChanges.ChangeTracker, sf: SourceFile, node: Identifier) {
+        changeTracker.replaceNode(sf, node, createIdentifier(getCorrectName(node)));
+    }
+
+    function getCorrectName(node: Identifier) {
+        const text = node.text;
+        if (text === "class") return "className";
+        if (text === "for") return "htmlFor";
+        return Debug.fail();
+    }
+
+    function shouldFix(node: Node): node is Identifier {
+        // <label for="content">, the error is on the `for`
+        if (!isIdentifier(node)) return false;
+
+        const id = node.text;
+        // Only fix class => className and for => htmlFor
+        if (id !== "for" && id !== "class") return false;
+
+        if (!isJsxAttribute(node.parent)) return false;
+        const parent = node.parent.parent.parent;
+        if (!isIdentifier(parent.tagName)) return false;
+        const tagName = parent.tagName.text;
+        // html for only appear on label tag
+        if (tagName !== "label" && id === "for") return false;
+        const firstChar = tagName[0];
+        // Only fix for html elements. Non-lowercase elements are React Elements
+        if (firstChar.toLowerCase() !== firstChar) return false;
+
+        // See https://reactjs.org/docs/web-components.html#using-web-components-in-react
+        // "One common confusion is that Web Components use “class” instead of “className”."
+        if (tagName.indexOf("-") !== -1 && id === "class") return false;
+        return true;
+    }
+}
diff --git a/src/services/tsconfig.json b/src/services/tsconfig.json
index 9567185c7a9..56af5be2b74 100644
--- a/src/services/tsconfig.json
+++ b/src/services/tsconfig.json
@@ -88,6 +88,7 @@
         "codefixes/fixPropertyOverrideAccessor.ts",
         "codefixes/inferFromUsage.ts",
         "codefixes/fixReturnTypeInAsyncFunction.ts",
+        "codefixes/fixReactClassNameAndHTMLFor.ts",
         "codefixes/disableJsDiagnostics.ts",
         "codefixes/helpers.ts",
         "codefixes/generateAccessors.ts",
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts
new file mode 100644
index 00000000000..e13573ec5e4
--- /dev/null
+++ b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////declare namespace JSX {
+////    interface Element {}
+////    interface IntrinsicElements {
+////        div: {
+////            className?: string
+////        }
+////    }
+////}
+////[|const div = <div class="a" />|]
+
+verify.rangeAfterCodeFix(`const div = <div className="a" />`, /*includeWhiteSpace*/false, /*errorCode*/ 2322, /*index*/ 0);
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts
new file mode 100644
index 00000000000..c607e23b29a
--- /dev/null
+++ b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////declare namespace JSX {
+////    interface Element {}
+////    interface IntrinsicElements {
+////        label: {
+////            htmlFor?: string
+////        }
+////    }
+////}
+////[|<label for="a" />|]
+
+verify.rangeAfterCodeFix(`<label htmlFor="a" />`, /*includeWhiteSpace*/false, /*errorCode*/ 2322, /*index*/ 0);
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts
new file mode 100644
index 00000000000..706c38fca50
--- /dev/null
+++ b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts
@@ -0,0 +1,16 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////<div for="a" />;
+////declare namespace JSX {
+////    interface Element {}
+////    interface IntrinsicElements {
+////        div: {
+////            className?: string
+////        }
+////        'my-tag': { className?: string }
+////    }
+////}
+
+verify.not.codeFixAvailable("fixReactClassNameAndHTMLFor");
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts
new file mode 100644
index 00000000000..5fe9321836b
--- /dev/null
+++ b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts
@@ -0,0 +1,17 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////function MyComponent(props: {className?: string}) {}
+////<MyComponent class="a" />;
+////declare namespace JSX {
+////    interface Element {}
+////    interface IntrinsicElements {
+////        div: {
+////            className?: string
+////        }
+////        'my-tag': { className?: string }
+////    }
+////}
+
+verify.not.codeFixAvailable("fixReactClassNameAndHTMLFor");
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts
new file mode 100644
index 00000000000..f75cc9c5353
--- /dev/null
+++ b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts
@@ -0,0 +1,16 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////<my-tag class="a" />;
+////declare namespace JSX {
+////    interface Element {}
+////    interface IntrinsicElements {
+////        div: {
+////            className?: string
+////        }
+////        'my-tag': { className?: string }
+////    }
+////}
+
+verify.not.codeFixAvailable("fixReactClassNameAndHTMLFor");
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts
new file mode 100644
index 00000000000..77a6f7e5ce6
--- /dev/null
+++ b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts
@@ -0,0 +1,30 @@
+/// <reference path='fourslash.ts' />
+
+// @jsx: react
+// @Filename: /a.tsx
+////declare namespace JSX {
+////interface Element {}
+////interface IntrinsicElements {
+////div: { className?: string }
+////label: { htmlFor?: string }
+////}}
+////<div class="a" />;
+////<label for="a" />;
+////<div class="a" />;
+////<div class="a" id="a" />;
+////<div id="b" />;
+
+verify.codeFixAll({
+    newFileContent: `declare namespace JSX {
+interface Element {}
+interface IntrinsicElements {
+div: { className?: string }
+label: { htmlFor?: string }
+}}
+<div className="a" />;
+<label htmlFor="a" />;
+<div className="a" />;
+<div className="a" id="a" />;
+<div id="b" />;`, fixId: "fixReactClassNameAndHTMLFor",
+    fixAllDescription: "Fix all detected spelling errors"
+});

From 0975bafbdee56708ad9a1be87daf30e72f23631a Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Wed, 6 May 2020 21:47:22 +0800
Subject: [PATCH 02/15] feat: add name suggestion for JSX

---
 src/compiler/checker.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index caba37715d0..a4a64538e24 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -16313,18 +16313,20 @@ namespace ts {
                                 if (isJsxAttributes(errorNode) || isJsxOpeningLikeElement(errorNode) || isJsxOpeningLikeElement(errorNode.parent)) {
                                     // JsxAttributes has an object-literal flag and undergo same type-assignablity check as normal object-literal.
                                     // However, using an object-literal error message will be very confusing to the users so we give different a message.
-                                    // TODO: Spelling suggestions for excess jsx attributes (needs new diagnostic messages)
                                     if (prop.valueDeclaration && isJsxAttribute(prop.valueDeclaration) && getSourceFileOfNode(errorNode) === getSourceFileOfNode(prop.valueDeclaration.name)) {
                                         // Note that extraneous children (as in `<NoChild>extra</NoChild>`) don't pass this check,
                                         // since `children` is a SyntaxKind.PropertySignature instead of a SyntaxKind.JsxAttribute.
                                         errorNode = prop.valueDeclaration.name;
                                     }
-                                    reportError(Diagnostics.Property_0_does_not_exist_on_type_1, symbolToString(prop), typeToString(errorTarget));
+                                    const propName = symbolToString(prop);
+                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget);
+                                    if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
+                                    else reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
                                 }
                                 else {
                                     // use the property's value declaration if the property is assigned inside the literal itself
                                     const objectLiteralDeclaration = source.symbol && firstOrUndefined(source.symbol.declarations);
-                                    let suggestion;
+                                    let suggestion: string | undefined;
                                     if (prop.valueDeclaration && findAncestor(prop.valueDeclaration, d => d === objectLiteralDeclaration) && getSourceFileOfNode(objectLiteralDeclaration) === getSourceFileOfNode(errorNode)) {
                                         const propDeclaration = prop.valueDeclaration as ObjectLiteralElementLike;
                                         Debug.assertNode(propDeclaration, isObjectLiteralElementLike);

From 8c8f84549c2afe7329b589d72499929d41dc48d5 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Wed, 6 May 2020 22:33:05 +0800
Subject: [PATCH 03/15] feat: support spell checking in JSX attribute

---
 src/compiler/checker.ts               | 5 ++++-
 src/services/codefixes/fixSpelling.ts | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index a4a64538e24..1c859580e15 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -16098,7 +16098,10 @@ namespace ts {
                 const isPerformingExcessPropertyChecks = !(intersectionState & IntersectionState.Target) && (isObjectLiteralType(source) && getObjectFlags(source) & ObjectFlags.FreshLiteral);
                 if (isPerformingExcessPropertyChecks) {
                     if (hasExcessProperties(<FreshObjectLiteralType>source, target, reportErrors)) {
-                        if (reportErrors) {
+                        // Skip report relation error if there is diag with suggestion emitted
+                        // So the fixSpelling can work with JSX attribute suggestion
+                        const skipReport = isComparingJsxAttributes && errorInfo?.code === Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2.code;
+                        if (reportErrors && !skipReport) {
                             reportRelationError(headMessage, source, target);
                         }
                         return Ternary.False;
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index b90c16c3908..98f42f2068a 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -52,6 +52,12 @@ namespace ts.codefix {
                 suggestedSymbol = checker.getSuggestedSymbolForNonexistentModule(node, resolvedSourceFile.symbol);
             }
         }
+        else if (isJsxAttribute(parent) && parent.name === node) {
+            Debug.assertNode(node, isIdentifier, "Expected an identifier for JSX attribute");
+            const tag = findAncestor(node, isJsxOpeningLikeElement)!;
+            const props = checker.getContextualTypeForArgumentAtIndex(tag, 0);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, props!);
+        }
         else {
             const meaning = getMeaningFromLocation(node);
             const name = getTextOfNode(node);

From c8abf6fe67db182261f378d40013bb9bd9b11c7c Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Wed, 6 May 2020 22:45:50 +0800
Subject: [PATCH 04/15] Revert "feat: add a codefix to fix class to className
 in react"

This reverts commit 15133266893f113d7d60f8696480adc75aba9827.
---
 .../codefixes/fixReactClassNameAndHTMLFor.ts  | 60 -------------------
 src/services/tsconfig.json                    |  1 -
 .../codeFixReactClassNameAndHTMLFor1.ts       | 15 -----
 .../codeFixReactClassNameAndHTMLFor2.ts       | 15 -----
 .../codeFixReactClassNameAndHTMLFor3-1.ts     | 16 -----
 .../codeFixReactClassNameAndHTMLFor3-2.ts     | 17 ------
 .../codeFixReactClassNameAndHTMLFor3-3.ts     | 16 -----
 .../codeFixReactClassNameAndHTMLFor4.ts       | 30 ----------
 8 files changed, 170 deletions(-)
 delete mode 100644 src/services/codefixes/fixReactClassNameAndHTMLFor.ts
 delete mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts
 delete mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts
 delete mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts
 delete mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts
 delete mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts
 delete mode 100644 tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts

diff --git a/src/services/codefixes/fixReactClassNameAndHTMLFor.ts b/src/services/codefixes/fixReactClassNameAndHTMLFor.ts
deleted file mode 100644
index aa3a92a6a1d..00000000000
--- a/src/services/codefixes/fixReactClassNameAndHTMLFor.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/* @internal */
-namespace ts.codefix {
-    const fixID = "fixReactClassNameAndHTMLFor";
-    const errorCodes = [Diagnostics.Type_0_is_not_assignable_to_type_1.code];
-    registerCodeFix({
-        errorCodes,
-        getCodeActions: context => {
-            const { jsx } = context.program.getCompilerOptions();
-            if (jsx !== JsxEmit.React) {
-                return undefined;
-            }
-            const { sourceFile, span } = context;
-            const node = getTokenAtPosition(sourceFile, span.start);
-            if (!shouldFix(node)) return undefined;
-            const changes = textChanges.ChangeTracker.with(context, t => doChange(t, sourceFile, node));
-            return [createCodeFixAction(fixID, changes, [Diagnostics.Did_you_mean_0, getCorrectName(node)], fixID, Diagnostics.Fix_all_detected_spelling_errors)];
-        },
-        fixIds: [fixID],
-        getAllCodeActions: context => codeFixAll(context, errorCodes, (changes, diag) => {
-            const node = getTokenAtPosition(context.sourceFile, diag.start);
-            if (!shouldFix(node)) return;
-            doChange(changes, context.sourceFile, node);
-        }),
-    });
-
-    function doChange(changeTracker: textChanges.ChangeTracker, sf: SourceFile, node: Identifier) {
-        changeTracker.replaceNode(sf, node, createIdentifier(getCorrectName(node)));
-    }
-
-    function getCorrectName(node: Identifier) {
-        const text = node.text;
-        if (text === "class") return "className";
-        if (text === "for") return "htmlFor";
-        return Debug.fail();
-    }
-
-    function shouldFix(node: Node): node is Identifier {
-        // <label for="content">, the error is on the `for`
-        if (!isIdentifier(node)) return false;
-
-        const id = node.text;
-        // Only fix class => className and for => htmlFor
-        if (id !== "for" && id !== "class") return false;
-
-        if (!isJsxAttribute(node.parent)) return false;
-        const parent = node.parent.parent.parent;
-        if (!isIdentifier(parent.tagName)) return false;
-        const tagName = parent.tagName.text;
-        // html for only appear on label tag
-        if (tagName !== "label" && id === "for") return false;
-        const firstChar = tagName[0];
-        // Only fix for html elements. Non-lowercase elements are React Elements
-        if (firstChar.toLowerCase() !== firstChar) return false;
-
-        // See https://reactjs.org/docs/web-components.html#using-web-components-in-react
-        // "One common confusion is that Web Components use “class” instead of “className”."
-        if (tagName.indexOf("-") !== -1 && id === "class") return false;
-        return true;
-    }
-}
diff --git a/src/services/tsconfig.json b/src/services/tsconfig.json
index 56af5be2b74..9567185c7a9 100644
--- a/src/services/tsconfig.json
+++ b/src/services/tsconfig.json
@@ -88,7 +88,6 @@
         "codefixes/fixPropertyOverrideAccessor.ts",
         "codefixes/inferFromUsage.ts",
         "codefixes/fixReturnTypeInAsyncFunction.ts",
-        "codefixes/fixReactClassNameAndHTMLFor.ts",
         "codefixes/disableJsDiagnostics.ts",
         "codefixes/helpers.ts",
         "codefixes/generateAccessors.ts",
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts
deleted file mode 100644
index e13573ec5e4..00000000000
--- a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor1.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/// <reference path='fourslash.ts' />
-
-// @jsx: react
-// @Filename: /a.tsx
-////declare namespace JSX {
-////    interface Element {}
-////    interface IntrinsicElements {
-////        div: {
-////            className?: string
-////        }
-////    }
-////}
-////[|const div = <div class="a" />|]
-
-verify.rangeAfterCodeFix(`const div = <div className="a" />`, /*includeWhiteSpace*/false, /*errorCode*/ 2322, /*index*/ 0);
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts
deleted file mode 100644
index c607e23b29a..00000000000
--- a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor2.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/// <reference path='fourslash.ts' />
-
-// @jsx: react
-// @Filename: /a.tsx
-////declare namespace JSX {
-////    interface Element {}
-////    interface IntrinsicElements {
-////        label: {
-////            htmlFor?: string
-////        }
-////    }
-////}
-////[|<label for="a" />|]
-
-verify.rangeAfterCodeFix(`<label htmlFor="a" />`, /*includeWhiteSpace*/false, /*errorCode*/ 2322, /*index*/ 0);
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts
deleted file mode 100644
index 706c38fca50..00000000000
--- a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-1.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/// <reference path='fourslash.ts' />
-
-// @jsx: react
-// @Filename: /a.tsx
-////<div for="a" />;
-////declare namespace JSX {
-////    interface Element {}
-////    interface IntrinsicElements {
-////        div: {
-////            className?: string
-////        }
-////        'my-tag': { className?: string }
-////    }
-////}
-
-verify.not.codeFixAvailable("fixReactClassNameAndHTMLFor");
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts
deleted file mode 100644
index 5fe9321836b..00000000000
--- a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-2.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/// <reference path='fourslash.ts' />
-
-// @jsx: react
-// @Filename: /a.tsx
-////function MyComponent(props: {className?: string}) {}
-////<MyComponent class="a" />;
-////declare namespace JSX {
-////    interface Element {}
-////    interface IntrinsicElements {
-////        div: {
-////            className?: string
-////        }
-////        'my-tag': { className?: string }
-////    }
-////}
-
-verify.not.codeFixAvailable("fixReactClassNameAndHTMLFor");
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts
deleted file mode 100644
index f75cc9c5353..00000000000
--- a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor3-3.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/// <reference path='fourslash.ts' />
-
-// @jsx: react
-// @Filename: /a.tsx
-////<my-tag class="a" />;
-////declare namespace JSX {
-////    interface Element {}
-////    interface IntrinsicElements {
-////        div: {
-////            className?: string
-////        }
-////        'my-tag': { className?: string }
-////    }
-////}
-
-verify.not.codeFixAvailable("fixReactClassNameAndHTMLFor");
diff --git a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts b/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts
deleted file mode 100644
index 77a6f7e5ce6..00000000000
--- a/tests/cases/fourslash/codeFixReactClassNameAndHTMLFor4.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/// <reference path='fourslash.ts' />
-
-// @jsx: react
-// @Filename: /a.tsx
-////declare namespace JSX {
-////interface Element {}
-////interface IntrinsicElements {
-////div: { className?: string }
-////label: { htmlFor?: string }
-////}}
-////<div class="a" />;
-////<label for="a" />;
-////<div class="a" />;
-////<div class="a" id="a" />;
-////<div id="b" />;
-
-verify.codeFixAll({
-    newFileContent: `declare namespace JSX {
-interface Element {}
-interface IntrinsicElements {
-div: { className?: string }
-label: { htmlFor?: string }
-}}
-<div className="a" />;
-<label htmlFor="a" />;
-<div className="a" />;
-<div className="a" id="a" />;
-<div id="b" />;`, fixId: "fixReactClassNameAndHTMLFor",
-    fixAllDescription: "Fix all detected spelling errors"
-});

From 5853d2ab69b04501fb14e3d0f52d4fb4dcdbfa13 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Wed, 6 May 2020 22:52:06 +0800
Subject: [PATCH 05/15] feat: re-impl react class name fix

---
 src/compiler/checker.ts               | 14 +++++++-------
 src/compiler/core.ts                  |  9 ++++++++-
 src/compiler/types.ts                 |  2 +-
 src/services/codefixes/fixSpelling.ts |  2 +-
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 1c859580e15..6a8a695e4ae 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -16322,7 +16322,7 @@ namespace ts {
                                         errorNode = prop.valueDeclaration.name;
                                     }
                                     const propName = symbolToString(prop);
-                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget);
+                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget, true);
                                     if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
                                     else reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
                                 }
@@ -24878,12 +24878,12 @@ namespace ts {
             return prop !== undefined && prop.valueDeclaration && hasSyntacticModifier(prop.valueDeclaration, ModifierFlags.Static);
         }
 
-        function getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined {
-            return getSpellingSuggestionForName(isString(name) ? name : idText(name), getPropertiesOfType(containingType), SymbolFlags.Value);
+        function getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJSX = false): Symbol | undefined {
+            return getSpellingSuggestionForName(isString(name) ? name : idText(name), getPropertiesOfType(containingType), SymbolFlags.Value, isJSX);
         }
 
-        function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): string | undefined {
-            const suggestion = getSuggestedSymbolForNonexistentProperty(name, containingType);
+        function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJSX = false): string | undefined {
+            const suggestion = getSuggestedSymbolForNonexistentProperty(name, containingType, isJSX);
             return suggestion && symbolName(suggestion);
         }
 
@@ -24956,8 +24956,8 @@ namespace ts {
          *        (0.4 allows 1 substitution/transposition for every 5 characters,
          *         and 1 insertion/deletion at 3 characters)
          */
-        function getSpellingSuggestionForName(name: string, symbols: Symbol[], meaning: SymbolFlags): Symbol | undefined {
-            return getSpellingSuggestion(name, symbols, getCandidateName);
+        function getSpellingSuggestionForName(name: string, symbols: Symbol[], meaning: SymbolFlags, isJSX = false): Symbol | undefined {
+            return getSpellingSuggestion(name, symbols, getCandidateName, isJSX);
             function getCandidateName(candidate: Symbol) {
                 const candidateName = symbolName(candidate);
                 if (startsWith(candidateName, "\"")) {
diff --git a/src/compiler/core.ts b/src/compiler/core.ts
index 4be5998d6f3..d175a364955 100644
--- a/src/compiler/core.ts
+++ b/src/compiler/core.ts
@@ -1817,7 +1817,7 @@ namespace ts {
      *        (0.4 allows 1 substitution/transposition for every 5 characters,
      *         and 1 insertion/deletion at 3 characters)
      */
-    export function getSpellingSuggestion<T>(name: string, candidates: T[], getName: (candidate: T) => string | undefined): T | undefined {
+    export function getSpellingSuggestion<T>(name: string, candidates: T[], getName: (candidate: T) => string | undefined, isJSX = false): T | undefined {
         const maximumLengthDifference = Math.min(2, Math.floor(name.length * 0.34));
         let bestDistance = Math.floor(name.length * 0.4) + 1; // If the best result isn't better than this, don't bother.
         let bestCandidate: T | undefined;
@@ -1825,6 +1825,13 @@ namespace ts {
         const nameLowerCase = name.toLowerCase();
         for (const candidate of candidates) {
             const candidateName = getName(candidate);
+            if (isJSX) {
+                const htmlFor = name === "for" && candidateName === "htmlFor";
+                const className = name === "class" && candidateName === "className";
+                if (htmlFor || className) {
+                    return candidate;
+                }
+            }
             if (candidateName !== undefined && Math.abs(candidateName.length - nameLowerCase.length) <= maximumLengthDifference) {
                 const candidateNameLowerCase = candidateName.toLowerCase();
                 if (candidateNameLowerCase === nameLowerCase) {
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index c9facd108a4..efcab0babed 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -4009,7 +4009,7 @@ namespace ts {
          */
         /* @internal */ tryGetMemberInModuleExportsAndProperties(memberName: string, moduleSymbol: Symbol): Symbol | undefined;
         getApparentType(type: Type): Type;
-        /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined;
+        /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJSX?: boolean): Symbol | undefined;
         /* @internal */ getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): string | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): Symbol | undefined;
         /* @internal */ getSuggestionForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): string | undefined;
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index 98f42f2068a..70a89e2c272 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -56,7 +56,7 @@ namespace ts.codefix {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for JSX attribute");
             const tag = findAncestor(node, isJsxOpeningLikeElement)!;
             const props = checker.getContextualTypeForArgumentAtIndex(tag, 0);
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, props!);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, props!, true);
         }
         else {
             const meaning = getMeaningFromLocation(node);

From d38096ab90402c48619f5caf190cf996c8933749 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Wed, 6 May 2020 23:41:12 +0800
Subject: [PATCH 06/15] chore: revert change in checker

---
 src/compiler/checker.ts               |  5 +----
 src/services/codefixes/fixSpelling.ts | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 6a8a695e4ae..d99fad3443f 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -16098,10 +16098,7 @@ namespace ts {
                 const isPerformingExcessPropertyChecks = !(intersectionState & IntersectionState.Target) && (isObjectLiteralType(source) && getObjectFlags(source) & ObjectFlags.FreshLiteral);
                 if (isPerformingExcessPropertyChecks) {
                     if (hasExcessProperties(<FreshObjectLiteralType>source, target, reportErrors)) {
-                        // Skip report relation error if there is diag with suggestion emitted
-                        // So the fixSpelling can work with JSX attribute suggestion
-                        const skipReport = isComparingJsxAttributes && errorInfo?.code === Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2.code;
-                        if (reportErrors && !skipReport) {
+                        if (reportErrors) {
                             reportRelationError(headMessage, source, target);
                         }
                         return Ternary.False;
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index 70a89e2c272..c7d4abdff7f 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -7,12 +7,16 @@ namespace ts.codefix {
         Diagnostics.Cannot_find_name_0_Did_you_mean_the_instance_member_this_0.code,
         Diagnostics.Cannot_find_name_0_Did_you_mean_the_static_member_1_0.code,
         Diagnostics.Module_0_has_no_exported_member_1_Did_you_mean_2.code,
+        // for JSX class components
+        Diagnostics.No_overload_matches_this_call.code,
+        // for JSX FC
+        Diagnostics.Type_0_is_not_assignable_to_type_1.code,
     ];
     registerCodeFix({
         errorCodes,
         getCodeActions(context) {
-            const { sourceFile } = context;
-            const info = getInfo(sourceFile, context.span.start, context);
+            const { sourceFile, errorCode } = context;
+            const info = getInfo(sourceFile, context.span.start, context, errorCode);
             if (!info) return undefined;
             const { node, suggestedSymbol } = info;
             const { target } = context.host.getCompilationSettings();
@@ -21,18 +25,23 @@ namespace ts.codefix {
         },
         fixIds: [fixId],
         getAllCodeActions: context => codeFixAll(context, errorCodes, (changes, diag) => {
-            const info = getInfo(diag.file, diag.start, context);
+            const info = getInfo(diag.file, diag.start, context, diag.code);
             const { target } = context.host.getCompilationSettings();
             if (info) doChange(changes, context.sourceFile, info.node, info.suggestedSymbol, target!);
         }),
     });
 
-    function getInfo(sourceFile: SourceFile, pos: number, context: CodeFixContextBase): { node: Node, suggestedSymbol: Symbol } | undefined {
+    function getInfo(sourceFile: SourceFile, pos: number, context: CodeFixContextBase, errorCode: number): { node: Node, suggestedSymbol: Symbol } | undefined {
         // This is the identifier of the misspelled word. eg:
         // this.speling = 1;
         //      ^^^^^^^
         const node = getTokenAtPosition(sourceFile, pos);
         const parent = node.parent;
+        // Only fix spelling for No_overload_matches_this_call emitted on the React class component
+        if ((
+            errorCode === Diagnostics.No_overload_matches_this_call.code ||
+            errorCode === Diagnostics.Type_0_is_not_assignable_to_type_1.code) &&
+            !isJsxAttribute(parent)) return undefined;
         const checker = context.program.getTypeChecker();
 
         let suggestedSymbol: Symbol | undefined;

From c36fe2339aea15a3e03be7aef0c8cdb4dc8cf203 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Thu, 7 May 2020 10:13:14 +0800
Subject: [PATCH 07/15] chore: make isJsxAttr required

---
 src/compiler/checker.ts               | 22 +++++++++++-----------
 src/compiler/commandLineParser.ts     |  2 +-
 src/compiler/core.ts                  |  4 ++--
 src/compiler/program.ts               |  2 +-
 src/compiler/types.ts                 |  4 ++--
 src/services/codefixes/fixSpelling.ts |  2 +-
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index d99fad3443f..d7b952ca53b 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13245,7 +13245,7 @@ namespace ts {
                         }
                         else {
                             let suggestion: string | undefined;
-                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType))) {
+                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType, false))) {
                                 if (suggestion !== undefined) {
                                     error(accessExpression.argumentExpression, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName as string, typeToString(objectType), suggestion);
                                 }
@@ -16335,7 +16335,7 @@ namespace ts {
 
                                         const name = propDeclaration.name!;
                                         if (isIdentifier(name)) {
-                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget);
+                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget, false);
                                         }
                                     }
                                     if (suggestion !== undefined) {
@@ -24852,7 +24852,7 @@ namespace ts {
                     relatedInfo = createDiagnosticForNode(propNode, Diagnostics.Did_you_forget_to_use_await);
                 }
                 else {
-                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType);
+                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType, false);
                     if (suggestion !== undefined) {
                         const suggestedName = symbolName(suggestion);
                         errorInfo = chainDiagnosticMessages(errorInfo, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, declarationNameToString(propNode), typeToString(containingType), suggestedName);
@@ -24875,12 +24875,12 @@ namespace ts {
             return prop !== undefined && prop.valueDeclaration && hasSyntacticModifier(prop.valueDeclaration, ModifierFlags.Static);
         }
 
-        function getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJSX = false): Symbol | undefined {
-            return getSpellingSuggestionForName(isString(name) ? name : idText(name), getPropertiesOfType(containingType), SymbolFlags.Value, isJSX);
+        function getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): Symbol | undefined {
+            return getSpellingSuggestionForName(isString(name) ? name : idText(name), getPropertiesOfType(containingType), SymbolFlags.Value, isJsxAttr);
         }
 
-        function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJSX = false): string | undefined {
-            const suggestion = getSuggestedSymbolForNonexistentProperty(name, containingType, isJSX);
+        function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): string | undefined {
+            const suggestion = getSuggestedSymbolForNonexistentProperty(name, containingType, isJsxAttr);
             return suggestion && symbolName(suggestion);
         }
 
@@ -24892,7 +24892,7 @@ namespace ts {
                 // Sometimes the symbol is found when location is a return type of a function: `typeof x` and `x` is declared in the body of the function
                 // So the table *contains* `x` but `x` isn't actually in scope.
                 // However, resolveNameHelper will continue and call this callback again, so we'll eventually get a correct suggestion.
-                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning);
+                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning, false);
             });
             return result;
         }
@@ -24903,7 +24903,7 @@ namespace ts {
         }
 
         function getSuggestedSymbolForNonexistentModule(name: Identifier, targetModule: Symbol): Symbol | undefined {
-            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember);
+            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember, false);
         }
 
         function getSuggestionForNonexistentExport(name: Identifier, targetModule: Symbol): string | undefined {
@@ -24953,8 +24953,8 @@ namespace ts {
          *        (0.4 allows 1 substitution/transposition for every 5 characters,
          *         and 1 insertion/deletion at 3 characters)
          */
-        function getSpellingSuggestionForName(name: string, symbols: Symbol[], meaning: SymbolFlags, isJSX = false): Symbol | undefined {
-            return getSpellingSuggestion(name, symbols, getCandidateName, isJSX);
+        function getSpellingSuggestionForName(name: string, symbols: Symbol[], meaning: SymbolFlags, isJsxAttr: boolean): Symbol | undefined {
+            return getSpellingSuggestion(name, symbols, getCandidateName, isJsxAttr);
             function getCandidateName(candidate: Symbol) {
                 const candidateName = symbolName(candidate);
                 if (startsWith(candidateName, "\"")) {
diff --git a/src/compiler/commandLineParser.ts b/src/compiler/commandLineParser.ts
index a43e6244fcb..2883b32791b 100644
--- a/src/compiler/commandLineParser.ts
+++ b/src/compiler/commandLineParser.ts
@@ -1194,7 +1194,7 @@ namespace ts {
         createDiagnostics: (message: DiagnosticMessage, arg0: string, arg1?: string) => Diagnostic,
         unknownOptionErrorText?: string
     ) {
-        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName);
+        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName, false);
         return possibleOption ?
             createDiagnostics(diagnostics.unknownDidYouMeanDiagnostic, unknownOptionErrorText || unknownOption, possibleOption.name) :
             createDiagnostics(diagnostics.unknownOptionDiagnostic, unknownOptionErrorText || unknownOption);
diff --git a/src/compiler/core.ts b/src/compiler/core.ts
index d175a364955..45c758b1dea 100644
--- a/src/compiler/core.ts
+++ b/src/compiler/core.ts
@@ -1817,7 +1817,7 @@ namespace ts {
      *        (0.4 allows 1 substitution/transposition for every 5 characters,
      *         and 1 insertion/deletion at 3 characters)
      */
-    export function getSpellingSuggestion<T>(name: string, candidates: T[], getName: (candidate: T) => string | undefined, isJSX = false): T | undefined {
+    export function getSpellingSuggestion<T>(name: string, candidates: T[], getName: (candidate: T) => string | undefined, isJsxAttr: boolean): T | undefined {
         const maximumLengthDifference = Math.min(2, Math.floor(name.length * 0.34));
         let bestDistance = Math.floor(name.length * 0.4) + 1; // If the best result isn't better than this, don't bother.
         let bestCandidate: T | undefined;
@@ -1825,7 +1825,7 @@ namespace ts {
         const nameLowerCase = name.toLowerCase();
         for (const candidate of candidates) {
             const candidateName = getName(candidate);
-            if (isJSX) {
+            if (isJsxAttr) {
                 const htmlFor = name === "for" && candidateName === "htmlFor";
                 const className = name === "class" && candidateName === "className";
                 if (htmlFor || className) {
diff --git a/src/compiler/program.ts b/src/compiler/program.ts
index 63873b9ac5d..97aee1accea 100644
--- a/src/compiler/program.ts
+++ b/src/compiler/program.ts
@@ -2784,7 +2784,7 @@ namespace ts {
                 }
                 else {
                     const unqualifiedLibName = removeSuffix(removePrefix(libName, "lib."), ".d.ts");
-                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity);
+                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity, false);
                     const message = suggestion ? Diagnostics.Cannot_find_lib_definition_for_0_Did_you_mean_1 : Diagnostics.Cannot_find_lib_definition_for_0;
                     fileProcessingDiagnostics.add(createFileDiagnostic(
                         file,
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index efcab0babed..dff2fef9146 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -4009,8 +4009,8 @@ namespace ts {
          */
         /* @internal */ tryGetMemberInModuleExportsAndProperties(memberName: string, moduleSymbol: Symbol): Symbol | undefined;
         getApparentType(type: Type): Type;
-        /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJSX?: boolean): Symbol | undefined;
-        /* @internal */ getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): string | undefined;
+        /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): Symbol | undefined;
+        /* @internal */ getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): string | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): Symbol | undefined;
         /* @internal */ getSuggestionForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): string | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentModule(node: Identifier, target: Symbol): Symbol | undefined;
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index c7d4abdff7f..55f2f2d31da 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -51,7 +51,7 @@ namespace ts.codefix {
             if (parent.flags & NodeFlags.OptionalChain) {
                 containingType = checker.getNonNullableType(containingType);
             }
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType, false);
         }
         else if (isImportSpecifier(parent) && parent.name === node) {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for spelling (import)");

From ffb35a3eb18f7891b837c85afcc3c029849296a9 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Thu, 7 May 2020 10:41:52 +0800
Subject: [PATCH 08/15] test: add test for it

---
 .../spellingSuggestionJSXAttribute.errors.txt | 79 +++++++++++++++++++
 .../spellingSuggestionJSXAttribute.js         | 54 +++++++++++++
 .../spellingSuggestionJSXAttribute.symbols    | 54 +++++++++++++
 .../spellingSuggestionJSXAttribute.types      | 64 +++++++++++++++
 ...tsxSpreadAttributesResolution14.errors.txt |  4 +-
 .../tsxSpreadAttributesResolution2.errors.txt |  4 +-
 ...tsxStatelessFunctionComponents1.errors.txt |  4 +-
 .../spellingSuggestionJSXAttribute.tsx        | 16 ++++
 8 files changed, 273 insertions(+), 6 deletions(-)
 create mode 100644 tests/baselines/reference/spellingSuggestionJSXAttribute.errors.txt
 create mode 100644 tests/baselines/reference/spellingSuggestionJSXAttribute.js
 create mode 100644 tests/baselines/reference/spellingSuggestionJSXAttribute.symbols
 create mode 100644 tests/baselines/reference/spellingSuggestionJSXAttribute.types
 create mode 100644 tests/cases/compiler/spellingSuggestionJSXAttribute.tsx

diff --git a/tests/baselines/reference/spellingSuggestionJSXAttribute.errors.txt b/tests/baselines/reference/spellingSuggestionJSXAttribute.errors.txt
new file mode 100644
index 00000000000..cde21fb6a38
--- /dev/null
+++ b/tests/baselines/reference/spellingSuggestionJSXAttribute.errors.txt
@@ -0,0 +1,79 @@
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(8,4): error TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+  Property 'class' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'. Did you mean 'className'?
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(9,4): error TS2322: Type '{ for: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+  Property 'for' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(10,8): error TS2322: Type '{ for: string; }' is not assignable to type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.
+  Property 'for' does not exist on type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'. Did you mean 'htmlFor'?
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(11,8): error TS2322: Type '{ for: string; class: string; }' is not assignable to type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.
+  Property 'for' does not exist on type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'. Did you mean 'htmlFor'?
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(12,9): error TS2769: No overload matches this call.
+  Overload 1 of 2, '(props: Readonly<{ className?: string; htmlFor?: string; }>): MyComp', gave the following error.
+    Type '{ class: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+      Property 'class' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'className'?
+  Overload 2 of 2, '(props: { className?: string; htmlFor?: string; }, context?: any): MyComp', gave the following error.
+    Type '{ class: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+      Property 'class' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'className'?
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(13,10): error TS2322: Type '{ class: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'.
+  Property 'class' does not exist on type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'. Did you mean 'className'?
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(14,9): error TS2769: No overload matches this call.
+  Overload 1 of 2, '(props: Readonly<{ className?: string; htmlFor?: string; }>): MyComp', gave the following error.
+    Type '{ for: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+      Property 'for' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'htmlFor'?
+  Overload 2 of 2, '(props: { className?: string; htmlFor?: string; }, context?: any): MyComp', gave the following error.
+    Type '{ for: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+      Property 'for' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'htmlFor'?
+tests/cases/compiler/spellingSuggestionJSXAttribute.tsx(15,10): error TS2322: Type '{ for: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'.
+  Property 'for' does not exist on type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'. Did you mean 'htmlFor'?
+
+
+==== tests/cases/compiler/spellingSuggestionJSXAttribute.tsx (8 errors) ====
+    /// <reference path="/.lib/react16.d.ts" />
+    import * as React from "react";
+    
+    function MyComp2(props: { className?: string, htmlFor?: string }) {
+        return null!;
+    }
+    class MyComp extends React.Component<{ className?: string, htmlFor?: string }> { }
+    <a class="" />;
+       ~~~~~
+!!! error TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+!!! error TS2322:   Property 'class' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'. Did you mean 'className'?
+    <a for="" />; // should have no fix
+       ~~~
+!!! error TS2322: Type '{ for: string; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+!!! error TS2322:   Property 'for' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
+    <label for="" />;
+           ~~~
+!!! error TS2322: Type '{ for: string; }' is not assignable to type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.
+!!! error TS2322:   Property 'for' does not exist on type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'. Did you mean 'htmlFor'?
+    <label for="" class="" />;
+           ~~~
+!!! error TS2322: Type '{ for: string; class: string; }' is not assignable to type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'.
+!!! error TS2322:   Property 'for' does not exist on type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'. Did you mean 'htmlFor'?
+    <MyComp class="" />;
+            ~~~~~
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   Overload 1 of 2, '(props: Readonly<{ className?: string; htmlFor?: string; }>): MyComp', gave the following error.
+!!! error TS2769:     Type '{ class: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+!!! error TS2769:       Property 'class' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'className'?
+!!! error TS2769:   Overload 2 of 2, '(props: { className?: string; htmlFor?: string; }, context?: any): MyComp', gave the following error.
+!!! error TS2769:     Type '{ class: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+!!! error TS2769:       Property 'class' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'className'?
+    <MyComp2 class="" />;
+             ~~~~~
+!!! error TS2322: Type '{ class: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'.
+!!! error TS2322:   Property 'class' does not exist on type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'. Did you mean 'className'?
+    <MyComp for="" />;
+            ~~~
+!!! error TS2769: No overload matches this call.
+!!! error TS2769:   Overload 1 of 2, '(props: Readonly<{ className?: string; htmlFor?: string; }>): MyComp', gave the following error.
+!!! error TS2769:     Type '{ for: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+!!! error TS2769:       Property 'for' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'htmlFor'?
+!!! error TS2769:   Overload 2 of 2, '(props: { className?: string; htmlFor?: string; }, context?: any): MyComp', gave the following error.
+!!! error TS2769:     Type '{ for: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'.
+!!! error TS2769:       Property 'for' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<MyComp> & Readonly<{ children?: ReactNode; }> & Readonly<{ className?: string; htmlFor?: string; }>'. Did you mean 'htmlFor'?
+    <MyComp2 for="" />;
+             ~~~
+!!! error TS2322: Type '{ for: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'.
+!!! error TS2322:   Property 'for' does not exist on type 'IntrinsicAttributes & { className?: string; htmlFor?: string; }'. Did you mean 'htmlFor'?
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/spellingSuggestionJSXAttribute.js b/tests/baselines/reference/spellingSuggestionJSXAttribute.js
new file mode 100644
index 00000000000..00a0835a975
--- /dev/null
+++ b/tests/baselines/reference/spellingSuggestionJSXAttribute.js
@@ -0,0 +1,54 @@
+//// [spellingSuggestionJSXAttribute.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from "react";
+
+function MyComp2(props: { className?: string, htmlFor?: string }) {
+    return null!;
+}
+class MyComp extends React.Component<{ className?: string, htmlFor?: string }> { }
+<a class="" />;
+<a for="" />; // should have no fix
+<label for="" />;
+<label for="" class="" />;
+<MyComp class="" />;
+<MyComp2 class="" />;
+<MyComp for="" />;
+<MyComp2 for="" />;
+
+
+//// [spellingSuggestionJSXAttribute.js]
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+/// <reference path="react16.d.ts" />
+var React = require("react");
+function MyComp2(props) {
+    return null;
+}
+var MyComp = /** @class */ (function (_super) {
+    __extends(MyComp, _super);
+    function MyComp() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return MyComp;
+}(React.Component));
+React.createElement("a", { "class": "" });
+React.createElement("a", { "for": "" }); // should have no fix
+React.createElement("label", { "for": "" });
+React.createElement("label", { "for": "", "class": "" });
+React.createElement(MyComp, { "class": "" });
+React.createElement(MyComp2, { "class": "" });
+React.createElement(MyComp, { "for": "" });
+React.createElement(MyComp2, { "for": "" });
diff --git a/tests/baselines/reference/spellingSuggestionJSXAttribute.symbols b/tests/baselines/reference/spellingSuggestionJSXAttribute.symbols
new file mode 100644
index 00000000000..b6cc2d6eb50
--- /dev/null
+++ b/tests/baselines/reference/spellingSuggestionJSXAttribute.symbols
@@ -0,0 +1,54 @@
+=== tests/cases/compiler/spellingSuggestionJSXAttribute.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from "react";
+>React : Symbol(React, Decl(spellingSuggestionJSXAttribute.tsx, 1, 6))
+
+function MyComp2(props: { className?: string, htmlFor?: string }) {
+>MyComp2 : Symbol(MyComp2, Decl(spellingSuggestionJSXAttribute.tsx, 1, 31))
+>props : Symbol(props, Decl(spellingSuggestionJSXAttribute.tsx, 3, 17))
+>className : Symbol(className, Decl(spellingSuggestionJSXAttribute.tsx, 3, 25))
+>htmlFor : Symbol(htmlFor, Decl(spellingSuggestionJSXAttribute.tsx, 3, 45))
+
+    return null!;
+}
+class MyComp extends React.Component<{ className?: string, htmlFor?: string }> { }
+>MyComp : Symbol(MyComp, Decl(spellingSuggestionJSXAttribute.tsx, 5, 1))
+>React.Component : Symbol(React.Component, Decl(react16.d.ts, 345, 54), Decl(react16.d.ts, 349, 94))
+>React : Symbol(React, Decl(spellingSuggestionJSXAttribute.tsx, 1, 6))
+>Component : Symbol(React.Component, Decl(react16.d.ts, 345, 54), Decl(react16.d.ts, 349, 94))
+>className : Symbol(className, Decl(spellingSuggestionJSXAttribute.tsx, 6, 38))
+>htmlFor : Symbol(htmlFor, Decl(spellingSuggestionJSXAttribute.tsx, 6, 58))
+
+<a class="" />;
+>a : Symbol(JSX.IntrinsicElements.a, Decl(react16.d.ts, 2390, 41))
+>class : Symbol(class, Decl(spellingSuggestionJSXAttribute.tsx, 7, 2))
+
+<a for="" />; // should have no fix
+>a : Symbol(JSX.IntrinsicElements.a, Decl(react16.d.ts, 2390, 41))
+>for : Symbol(for, Decl(spellingSuggestionJSXAttribute.tsx, 8, 2))
+
+<label for="" />;
+>label : Symbol(JSX.IntrinsicElements.label, Decl(react16.d.ts, 2448, 102))
+>for : Symbol(for, Decl(spellingSuggestionJSXAttribute.tsx, 9, 6))
+
+<label for="" class="" />;
+>label : Symbol(JSX.IntrinsicElements.label, Decl(react16.d.ts, 2448, 102))
+>for : Symbol(for, Decl(spellingSuggestionJSXAttribute.tsx, 10, 6))
+>class : Symbol(class, Decl(spellingSuggestionJSXAttribute.tsx, 10, 13))
+
+<MyComp class="" />;
+>MyComp : Symbol(MyComp, Decl(spellingSuggestionJSXAttribute.tsx, 5, 1))
+>class : Symbol(class, Decl(spellingSuggestionJSXAttribute.tsx, 11, 7))
+
+<MyComp2 class="" />;
+>MyComp2 : Symbol(MyComp2, Decl(spellingSuggestionJSXAttribute.tsx, 1, 31))
+>class : Symbol(class, Decl(spellingSuggestionJSXAttribute.tsx, 12, 8))
+
+<MyComp for="" />;
+>MyComp : Symbol(MyComp, Decl(spellingSuggestionJSXAttribute.tsx, 5, 1))
+>for : Symbol(for, Decl(spellingSuggestionJSXAttribute.tsx, 13, 7))
+
+<MyComp2 for="" />;
+>MyComp2 : Symbol(MyComp2, Decl(spellingSuggestionJSXAttribute.tsx, 1, 31))
+>for : Symbol(for, Decl(spellingSuggestionJSXAttribute.tsx, 14, 8))
+
diff --git a/tests/baselines/reference/spellingSuggestionJSXAttribute.types b/tests/baselines/reference/spellingSuggestionJSXAttribute.types
new file mode 100644
index 00000000000..619ceb73e36
--- /dev/null
+++ b/tests/baselines/reference/spellingSuggestionJSXAttribute.types
@@ -0,0 +1,64 @@
+=== tests/cases/compiler/spellingSuggestionJSXAttribute.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from "react";
+>React : typeof React
+
+function MyComp2(props: { className?: string, htmlFor?: string }) {
+>MyComp2 : (props: {    className?: string;    htmlFor?: string;}) => any
+>props : { className?: string; htmlFor?: string; }
+>className : string
+>htmlFor : string
+
+    return null!;
+>null! : null
+>null : null
+}
+class MyComp extends React.Component<{ className?: string, htmlFor?: string }> { }
+>MyComp : MyComp
+>React.Component : React.Component<{ className?: string; htmlFor?: string; }, {}, any>
+>React : typeof React
+>Component : typeof React.Component
+>className : string
+>htmlFor : string
+
+<a class="" />;
+><a class="" /> : JSX.Element
+>a : any
+>class : string
+
+<a for="" />; // should have no fix
+><a for="" /> : JSX.Element
+>a : any
+>for : string
+
+<label for="" />;
+><label for="" /> : JSX.Element
+>label : any
+>for : string
+
+<label for="" class="" />;
+><label for="" class="" /> : JSX.Element
+>label : any
+>for : string
+>class : string
+
+<MyComp class="" />;
+><MyComp class="" /> : JSX.Element
+>MyComp : typeof MyComp
+>class : string
+
+<MyComp2 class="" />;
+><MyComp2 class="" /> : JSX.Element
+>MyComp2 : (props: { className?: string; htmlFor?: string; }) => any
+>class : string
+
+<MyComp for="" />;
+><MyComp for="" /> : JSX.Element
+>MyComp : typeof MyComp
+>for : string
+
+<MyComp2 for="" />;
+><MyComp2 for="" /> : JSX.Element
+>MyComp2 : (props: { className?: string; htmlFor?: string; }) => any
+>for : string
+
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution14.errors.txt b/tests/baselines/reference/tsxSpreadAttributesResolution14.errors.txt
index f000257b9d5..631ec2158e8 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution14.errors.txt
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution14.errors.txt
@@ -1,5 +1,5 @@
 tests/cases/conformance/jsx/file.tsx(11,38): error TS2322: Type '{ Property1: true; property1: string; property2: number; }' is not assignable to type 'IntrinsicAttributes & AnotherComponentProps'.
-  Property 'Property1' does not exist on type 'IntrinsicAttributes & AnotherComponentProps'.
+  Property 'Property1' does not exist on type 'IntrinsicAttributes & AnotherComponentProps'. Did you mean 'property1'?
 
 
 ==== tests/cases/conformance/jsx/file.tsx (1 errors) ====
@@ -16,7 +16,7 @@ tests/cases/conformance/jsx/file.tsx(11,38): error TS2322: Type '{ Property1: tr
             <AnotherComponent {...props} Property1/>
                                          ~~~~~~~~~
 !!! error TS2322: Type '{ Property1: true; property1: string; property2: number; }' is not assignable to type 'IntrinsicAttributes & AnotherComponentProps'.
-!!! error TS2322:   Property 'Property1' does not exist on type 'IntrinsicAttributes & AnotherComponentProps'.
+!!! error TS2322:   Property 'Property1' does not exist on type 'IntrinsicAttributes & AnotherComponentProps'. Did you mean 'property1'?
         );
     }
     
diff --git a/tests/baselines/reference/tsxSpreadAttributesResolution2.errors.txt b/tests/baselines/reference/tsxSpreadAttributesResolution2.errors.txt
index 3732b0f2aae..ebaa798cbaa 100644
--- a/tests/baselines/reference/tsxSpreadAttributesResolution2.errors.txt
+++ b/tests/baselines/reference/tsxSpreadAttributesResolution2.errors.txt
@@ -6,7 +6,7 @@ tests/cases/conformance/jsx/file.tsx(23,10): error TS2322: Type '{ x: number; y:
   Types of property 'x' are incompatible.
     Type 'number' is not assignable to type 'string'.
 tests/cases/conformance/jsx/file.tsx(24,40): error TS2322: Type '{ X: string; x: number; y: "2"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Poisoned> & PoisonedProp & { children?: ReactNode; }'.
-  Property 'X' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Poisoned> & PoisonedProp & { children?: ReactNode; }'.
+  Property 'X' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Poisoned> & PoisonedProp & { children?: ReactNode; }'. Did you mean 'x'?
 
 
 ==== tests/cases/conformance/jsx/file.tsx (6 errors) ====
@@ -50,4 +50,4 @@ tests/cases/conformance/jsx/file.tsx(24,40): error TS2322: Type '{ X: string; x:
     let w1 = <Poisoned {...{x: 5, y: "2"}} X="hi" />;
                                            ~
 !!! error TS2322: Type '{ X: string; x: number; y: "2"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Poisoned> & PoisonedProp & { children?: ReactNode; }'.
-!!! error TS2322:   Property 'X' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Poisoned> & PoisonedProp & { children?: ReactNode; }'.
\ No newline at end of file
+!!! error TS2322:   Property 'X' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Poisoned> & PoisonedProp & { children?: ReactNode; }'. Did you mean 'x'?
\ No newline at end of file
diff --git a/tests/baselines/reference/tsxStatelessFunctionComponents1.errors.txt b/tests/baselines/reference/tsxStatelessFunctionComponents1.errors.txt
index 99812eeaad3..8c20009063a 100644
--- a/tests/baselines/reference/tsxStatelessFunctionComponents1.errors.txt
+++ b/tests/baselines/reference/tsxStatelessFunctionComponents1.errors.txt
@@ -1,5 +1,5 @@
 tests/cases/conformance/jsx/file.tsx(19,16): error TS2322: Type '{ naaame: string; }' is not assignable to type 'IntrinsicAttributes & { name: string; }'.
-  Property 'naaame' does not exist on type 'IntrinsicAttributes & { name: string; }'.
+  Property 'naaame' does not exist on type 'IntrinsicAttributes & { name: string; }'. Did you mean 'name'?
 tests/cases/conformance/jsx/file.tsx(27,15): error TS2322: Type 'number' is not assignable to type 'string'.
 tests/cases/conformance/jsx/file.tsx(29,15): error TS2322: Type '{ naaaaaaame: string; }' is not assignable to type 'IntrinsicAttributes & { name?: string; }'.
   Property 'naaaaaaame' does not exist on type 'IntrinsicAttributes & { name?: string; }'.
@@ -34,7 +34,7 @@ tests/cases/conformance/jsx/file.tsx(45,11): error TS2559: Type '{ prop1: boolea
     let b = <Greet naaame='world' />;
                    ~~~~~~
 !!! error TS2322: Type '{ naaame: string; }' is not assignable to type 'IntrinsicAttributes & { name: string; }'.
-!!! error TS2322:   Property 'naaame' does not exist on type 'IntrinsicAttributes & { name: string; }'.
+!!! error TS2322:   Property 'naaame' does not exist on type 'IntrinsicAttributes & { name: string; }'. Did you mean 'name'?
     
     // OK
     let c = <Meet />;
diff --git a/tests/cases/compiler/spellingSuggestionJSXAttribute.tsx b/tests/cases/compiler/spellingSuggestionJSXAttribute.tsx
new file mode 100644
index 00000000000..e44de6cb7fa
--- /dev/null
+++ b/tests/cases/compiler/spellingSuggestionJSXAttribute.tsx
@@ -0,0 +1,16 @@
+// @jsx: react
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from "react";
+
+function MyComp2(props: { className?: string, htmlFor?: string }) {
+    return null!;
+}
+class MyComp extends React.Component<{ className?: string, htmlFor?: string }> { }
+<a class="" />;
+<a for="" />; // should have no fix
+<label for="" />;
+<label for="" class="" />;
+<MyComp class="" />;
+<MyComp2 class="" />;
+<MyComp for="" />;
+<MyComp2 for="" />;

From cdd14ccec6b73d1819200f6a1959bed7bdc1e737 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Thu, 7 May 2020 11:18:13 +0800
Subject: [PATCH 09/15] fix: lint error

---
 src/compiler/checker.ts               | 12 ++++++------
 src/compiler/commandLineParser.ts     |  2 +-
 src/compiler/program.ts               |  2 +-
 src/services/codefixes/fixSpelling.ts |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index d7b952ca53b..4b53148cabb 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13245,7 +13245,7 @@ namespace ts {
                         }
                         else {
                             let suggestion: string | undefined;
-                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType, false))) {
+                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType, /** isJsxAttr */ false))) {
                                 if (suggestion !== undefined) {
                                     error(accessExpression.argumentExpression, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName as string, typeToString(objectType), suggestion);
                                 }
@@ -16319,7 +16319,7 @@ namespace ts {
                                         errorNode = prop.valueDeclaration.name;
                                     }
                                     const propName = symbolToString(prop);
-                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget, true);
+                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget, /** isJsxAttr */ true);
                                     if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
                                     else reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
                                 }
@@ -16335,7 +16335,7 @@ namespace ts {
 
                                         const name = propDeclaration.name!;
                                         if (isIdentifier(name)) {
-                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget, false);
+                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget, /** isJsxAttr */ false);
                                         }
                                     }
                                     if (suggestion !== undefined) {
@@ -24852,7 +24852,7 @@ namespace ts {
                     relatedInfo = createDiagnosticForNode(propNode, Diagnostics.Did_you_forget_to_use_await);
                 }
                 else {
-                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType, false);
+                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType, /** isJsxAttr */ false);
                     if (suggestion !== undefined) {
                         const suggestedName = symbolName(suggestion);
                         errorInfo = chainDiagnosticMessages(errorInfo, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, declarationNameToString(propNode), typeToString(containingType), suggestedName);
@@ -24892,7 +24892,7 @@ namespace ts {
                 // Sometimes the symbol is found when location is a return type of a function: `typeof x` and `x` is declared in the body of the function
                 // So the table *contains* `x` but `x` isn't actually in scope.
                 // However, resolveNameHelper will continue and call this callback again, so we'll eventually get a correct suggestion.
-                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning, false);
+                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning, /** isJsxAttr */ false);
             });
             return result;
         }
@@ -24903,7 +24903,7 @@ namespace ts {
         }
 
         function getSuggestedSymbolForNonexistentModule(name: Identifier, targetModule: Symbol): Symbol | undefined {
-            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember, false);
+            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember, /** isJsxAttr */ false);
         }
 
         function getSuggestionForNonexistentExport(name: Identifier, targetModule: Symbol): string | undefined {
diff --git a/src/compiler/commandLineParser.ts b/src/compiler/commandLineParser.ts
index 2883b32791b..ff443300ede 100644
--- a/src/compiler/commandLineParser.ts
+++ b/src/compiler/commandLineParser.ts
@@ -1194,7 +1194,7 @@ namespace ts {
         createDiagnostics: (message: DiagnosticMessage, arg0: string, arg1?: string) => Diagnostic,
         unknownOptionErrorText?: string
     ) {
-        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName, false);
+        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName, /** isJsxAttr */ false);
         return possibleOption ?
             createDiagnostics(diagnostics.unknownDidYouMeanDiagnostic, unknownOptionErrorText || unknownOption, possibleOption.name) :
             createDiagnostics(diagnostics.unknownOptionDiagnostic, unknownOptionErrorText || unknownOption);
diff --git a/src/compiler/program.ts b/src/compiler/program.ts
index 97aee1accea..37734eb9286 100644
--- a/src/compiler/program.ts
+++ b/src/compiler/program.ts
@@ -2784,7 +2784,7 @@ namespace ts {
                 }
                 else {
                     const unqualifiedLibName = removeSuffix(removePrefix(libName, "lib."), ".d.ts");
-                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity, false);
+                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity, /** isJsxAttr */ false);
                     const message = suggestion ? Diagnostics.Cannot_find_lib_definition_for_0_Did_you_mean_1 : Diagnostics.Cannot_find_lib_definition_for_0;
                     fileProcessingDiagnostics.add(createFileDiagnostic(
                         file,
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index 55f2f2d31da..0dfd2d84100 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -51,7 +51,7 @@ namespace ts.codefix {
             if (parent.flags & NodeFlags.OptionalChain) {
                 containingType = checker.getNonNullableType(containingType);
             }
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType, false);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType, /** isJsxAttr */ false);
         }
         else if (isImportSpecifier(parent) && parent.name === node) {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for spelling (import)");
@@ -65,7 +65,7 @@ namespace ts.codefix {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for JSX attribute");
             const tag = findAncestor(node, isJsxOpeningLikeElement)!;
             const props = checker.getContextualTypeForArgumentAtIndex(tag, 0);
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, props!, true);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, props!, /** isJsxAttr */ true);
         }
         else {
             const meaning = getMeaningFromLocation(node);

From d33256cc5aaf5851afea978e9c02fd80d3c079f6 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 19 Jun 2020 10:49:49 +0800
Subject: [PATCH 10/15] chore: save space

---
 src/compiler/checker.ts               | 12 ++++++------
 src/compiler/commandLineParser.ts     |  2 +-
 src/compiler/program.ts               |  2 +-
 src/services/codefixes/fixSpelling.ts |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 4b53148cabb..94d511f92b5 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13245,7 +13245,7 @@ namespace ts {
                         }
                         else {
                             let suggestion: string | undefined;
-                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType, /** isJsxAttr */ false))) {
+                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType, /*isJsxAttr*/ false))) {
                                 if (suggestion !== undefined) {
                                     error(accessExpression.argumentExpression, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName as string, typeToString(objectType), suggestion);
                                 }
@@ -16319,7 +16319,7 @@ namespace ts {
                                         errorNode = prop.valueDeclaration.name;
                                     }
                                     const propName = symbolToString(prop);
-                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget, /** isJsxAttr */ true);
+                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget, /*isJsxAttr*/ true);
                                     if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
                                     else reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
                                 }
@@ -16335,7 +16335,7 @@ namespace ts {
 
                                         const name = propDeclaration.name!;
                                         if (isIdentifier(name)) {
-                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget, /** isJsxAttr */ false);
+                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget, /*isJsxAttr*/ false);
                                         }
                                     }
                                     if (suggestion !== undefined) {
@@ -24852,7 +24852,7 @@ namespace ts {
                     relatedInfo = createDiagnosticForNode(propNode, Diagnostics.Did_you_forget_to_use_await);
                 }
                 else {
-                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType, /** isJsxAttr */ false);
+                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType, /*isJsxAttr*/ false);
                     if (suggestion !== undefined) {
                         const suggestedName = symbolName(suggestion);
                         errorInfo = chainDiagnosticMessages(errorInfo, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, declarationNameToString(propNode), typeToString(containingType), suggestedName);
@@ -24892,7 +24892,7 @@ namespace ts {
                 // Sometimes the symbol is found when location is a return type of a function: `typeof x` and `x` is declared in the body of the function
                 // So the table *contains* `x` but `x` isn't actually in scope.
                 // However, resolveNameHelper will continue and call this callback again, so we'll eventually get a correct suggestion.
-                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning, /** isJsxAttr */ false);
+                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning, /*isJsxAttr*/ false);
             });
             return result;
         }
@@ -24903,7 +24903,7 @@ namespace ts {
         }
 
         function getSuggestedSymbolForNonexistentModule(name: Identifier, targetModule: Symbol): Symbol | undefined {
-            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember, /** isJsxAttr */ false);
+            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember, /*isJsxAttr*/ false);
         }
 
         function getSuggestionForNonexistentExport(name: Identifier, targetModule: Symbol): string | undefined {
diff --git a/src/compiler/commandLineParser.ts b/src/compiler/commandLineParser.ts
index ff443300ede..49a455c2db1 100644
--- a/src/compiler/commandLineParser.ts
+++ b/src/compiler/commandLineParser.ts
@@ -1194,7 +1194,7 @@ namespace ts {
         createDiagnostics: (message: DiagnosticMessage, arg0: string, arg1?: string) => Diagnostic,
         unknownOptionErrorText?: string
     ) {
-        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName, /** isJsxAttr */ false);
+        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName, /*isJsxAttr*/ false);
         return possibleOption ?
             createDiagnostics(diagnostics.unknownDidYouMeanDiagnostic, unknownOptionErrorText || unknownOption, possibleOption.name) :
             createDiagnostics(diagnostics.unknownOptionDiagnostic, unknownOptionErrorText || unknownOption);
diff --git a/src/compiler/program.ts b/src/compiler/program.ts
index 37734eb9286..784347c1f07 100644
--- a/src/compiler/program.ts
+++ b/src/compiler/program.ts
@@ -2784,7 +2784,7 @@ namespace ts {
                 }
                 else {
                     const unqualifiedLibName = removeSuffix(removePrefix(libName, "lib."), ".d.ts");
-                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity, /** isJsxAttr */ false);
+                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity, /*isJsxAttr*/ false);
                     const message = suggestion ? Diagnostics.Cannot_find_lib_definition_for_0_Did_you_mean_1 : Diagnostics.Cannot_find_lib_definition_for_0;
                     fileProcessingDiagnostics.add(createFileDiagnostic(
                         file,
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index 0dfd2d84100..e5a04cfa1aa 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -51,7 +51,7 @@ namespace ts.codefix {
             if (parent.flags & NodeFlags.OptionalChain) {
                 containingType = checker.getNonNullableType(containingType);
             }
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType, /** isJsxAttr */ false);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType, /*isJsxAttr*/ false);
         }
         else if (isImportSpecifier(parent) && parent.name === node) {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for spelling (import)");

From 4fce49530314dcb48ac9cb642d7528add4c01d39 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 19 Jun 2020 11:28:06 +0800
Subject: [PATCH 11/15] chore: resolve review

---
 src/compiler/checker.ts               | 29 +++++++++++++++++++--------
 src/compiler/commandLineParser.ts     |  2 +-
 src/compiler/core.ts                  |  9 +--------
 src/compiler/program.ts               |  2 +-
 src/compiler/types.ts                 |  3 ++-
 src/services/codefixes/fixSpelling.ts |  4 ++--
 6 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 94d511f92b5..2da9fdf5165 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -606,6 +606,7 @@ namespace ts {
             getAllPossiblePropertiesOfTypes,
             getSuggestedSymbolForNonexistentProperty,
             getSuggestionForNonexistentProperty,
+            getSuggestedSymbolForNonexistentJSXAttribute,
             getSuggestedSymbolForNonexistentSymbol: (location, name, meaning) => getSuggestedSymbolForNonexistentSymbol(location, escapeLeadingUnderscores(name), meaning),
             getSuggestionForNonexistentSymbol: (location, name, meaning) => getSuggestionForNonexistentSymbol(location, escapeLeadingUnderscores(name), meaning),
             getSuggestedSymbolForNonexistentModule,
@@ -24852,7 +24853,7 @@ namespace ts {
                     relatedInfo = createDiagnosticForNode(propNode, Diagnostics.Did_you_forget_to_use_await);
                 }
                 else {
-                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType, /*isJsxAttr*/ false);
+                    const suggestion = getSuggestedSymbolForNonexistentProperty(propNode, containingType);
                     if (suggestion !== undefined) {
                         const suggestedName = symbolName(suggestion);
                         errorInfo = chainDiagnosticMessages(errorInfo, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, declarationNameToString(propNode), typeToString(containingType), suggestedName);
@@ -24875,12 +24876,24 @@ namespace ts {
             return prop !== undefined && prop.valueDeclaration && hasSyntacticModifier(prop.valueDeclaration, ModifierFlags.Static);
         }
 
-        function getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): Symbol | undefined {
-            return getSpellingSuggestionForName(isString(name) ? name : idText(name), getPropertiesOfType(containingType), SymbolFlags.Value, isJsxAttr);
+        function getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined {
+            return getSpellingSuggestionForName(isString(name) ? name : idText(name), getPropertiesOfType(containingType), SymbolFlags.Value);
         }
 
+        function getSuggestedSymbolForNonexistentJSXAttribute(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined {
+            const strName = isString(name) ? name : idText(name);
+            const properties = getPropertiesOfType(containingType);
+            const defaultSuggestion = () => getSpellingSuggestionForName(strName, properties, SymbolFlags.Value);
+            const getCandidate = (expectedName: string) => properties.find(x => symbolName(x) === expectedName);
+            switch (strName) {
+                case "for": return getCandidate("htmlFor") || defaultSuggestion();
+                case "class": return getCandidate("className") || defaultSuggestion();
+            }
+            return defaultSuggestion();
+          }
+
         function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): string | undefined {
-            const suggestion = getSuggestedSymbolForNonexistentProperty(name, containingType, isJsxAttr);
+            const suggestion = (isJsxAttr ? getSuggestedSymbolForNonexistentJSXAttribute : getSuggestedSymbolForNonexistentProperty)(name, containingType);
             return suggestion && symbolName(suggestion);
         }
 
@@ -24892,7 +24905,7 @@ namespace ts {
                 // Sometimes the symbol is found when location is a return type of a function: `typeof x` and `x` is declared in the body of the function
                 // So the table *contains* `x` but `x` isn't actually in scope.
                 // However, resolveNameHelper will continue and call this callback again, so we'll eventually get a correct suggestion.
-                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning, /*isJsxAttr*/ false);
+                return symbol || getSpellingSuggestionForName(unescapeLeadingUnderscores(name), arrayFrom(symbols.values()), meaning);
             });
             return result;
         }
@@ -24903,7 +24916,7 @@ namespace ts {
         }
 
         function getSuggestedSymbolForNonexistentModule(name: Identifier, targetModule: Symbol): Symbol | undefined {
-            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember, /*isJsxAttr*/ false);
+            return targetModule.exports && getSpellingSuggestionForName(idText(name), getExportsOfModuleAsArray(targetModule), SymbolFlags.ModuleMember);
         }
 
         function getSuggestionForNonexistentExport(name: Identifier, targetModule: Symbol): string | undefined {
@@ -24953,8 +24966,8 @@ namespace ts {
          *        (0.4 allows 1 substitution/transposition for every 5 characters,
          *         and 1 insertion/deletion at 3 characters)
          */
-        function getSpellingSuggestionForName(name: string, symbols: Symbol[], meaning: SymbolFlags, isJsxAttr: boolean): Symbol | undefined {
-            return getSpellingSuggestion(name, symbols, getCandidateName, isJsxAttr);
+        function getSpellingSuggestionForName(name: string, symbols: Symbol[], meaning: SymbolFlags): Symbol | undefined {
+            return getSpellingSuggestion(name, symbols, getCandidateName);
             function getCandidateName(candidate: Symbol) {
                 const candidateName = symbolName(candidate);
                 if (startsWith(candidateName, "\"")) {
diff --git a/src/compiler/commandLineParser.ts b/src/compiler/commandLineParser.ts
index 49a455c2db1..a43e6244fcb 100644
--- a/src/compiler/commandLineParser.ts
+++ b/src/compiler/commandLineParser.ts
@@ -1194,7 +1194,7 @@ namespace ts {
         createDiagnostics: (message: DiagnosticMessage, arg0: string, arg1?: string) => Diagnostic,
         unknownOptionErrorText?: string
     ) {
-        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName, /*isJsxAttr*/ false);
+        const possibleOption = getSpellingSuggestion(unknownOption, diagnostics.optionDeclarations, getOptionName);
         return possibleOption ?
             createDiagnostics(diagnostics.unknownDidYouMeanDiagnostic, unknownOptionErrorText || unknownOption, possibleOption.name) :
             createDiagnostics(diagnostics.unknownOptionDiagnostic, unknownOptionErrorText || unknownOption);
diff --git a/src/compiler/core.ts b/src/compiler/core.ts
index 45c758b1dea..4be5998d6f3 100644
--- a/src/compiler/core.ts
+++ b/src/compiler/core.ts
@@ -1817,7 +1817,7 @@ namespace ts {
      *        (0.4 allows 1 substitution/transposition for every 5 characters,
      *         and 1 insertion/deletion at 3 characters)
      */
-    export function getSpellingSuggestion<T>(name: string, candidates: T[], getName: (candidate: T) => string | undefined, isJsxAttr: boolean): T | undefined {
+    export function getSpellingSuggestion<T>(name: string, candidates: T[], getName: (candidate: T) => string | undefined): T | undefined {
         const maximumLengthDifference = Math.min(2, Math.floor(name.length * 0.34));
         let bestDistance = Math.floor(name.length * 0.4) + 1; // If the best result isn't better than this, don't bother.
         let bestCandidate: T | undefined;
@@ -1825,13 +1825,6 @@ namespace ts {
         const nameLowerCase = name.toLowerCase();
         for (const candidate of candidates) {
             const candidateName = getName(candidate);
-            if (isJsxAttr) {
-                const htmlFor = name === "for" && candidateName === "htmlFor";
-                const className = name === "class" && candidateName === "className";
-                if (htmlFor || className) {
-                    return candidate;
-                }
-            }
             if (candidateName !== undefined && Math.abs(candidateName.length - nameLowerCase.length) <= maximumLengthDifference) {
                 const candidateNameLowerCase = candidateName.toLowerCase();
                 if (candidateNameLowerCase === nameLowerCase) {
diff --git a/src/compiler/program.ts b/src/compiler/program.ts
index 784347c1f07..63873b9ac5d 100644
--- a/src/compiler/program.ts
+++ b/src/compiler/program.ts
@@ -2784,7 +2784,7 @@ namespace ts {
                 }
                 else {
                     const unqualifiedLibName = removeSuffix(removePrefix(libName, "lib."), ".d.ts");
-                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity, /*isJsxAttr*/ false);
+                    const suggestion = getSpellingSuggestion(unqualifiedLibName, libs, identity);
                     const message = suggestion ? Diagnostics.Cannot_find_lib_definition_for_0_Did_you_mean_1 : Diagnostics.Cannot_find_lib_definition_for_0;
                     fileProcessingDiagnostics.add(createFileDiagnostic(
                         file,
diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index dff2fef9146..52e1402bca5 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -4009,7 +4009,8 @@ namespace ts {
          */
         /* @internal */ tryGetMemberInModuleExportsAndProperties(memberName: string, moduleSymbol: Symbol): Symbol | undefined;
         getApparentType(type: Type): Type;
-        /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): Symbol | undefined;
+        /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined;
+        /* @internal */ getSuggestedSymbolForNonexistentJSXAttribute(name: Identifier | string, containingType: Type): Symbol | undefined;
         /* @internal */ getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): string | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): Symbol | undefined;
         /* @internal */ getSuggestionForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): string | undefined;
diff --git a/src/services/codefixes/fixSpelling.ts b/src/services/codefixes/fixSpelling.ts
index e5a04cfa1aa..0c63dc5ebfc 100644
--- a/src/services/codefixes/fixSpelling.ts
+++ b/src/services/codefixes/fixSpelling.ts
@@ -51,7 +51,7 @@ namespace ts.codefix {
             if (parent.flags & NodeFlags.OptionalChain) {
                 containingType = checker.getNonNullableType(containingType);
             }
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType, /*isJsxAttr*/ false);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, containingType);
         }
         else if (isImportSpecifier(parent) && parent.name === node) {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for spelling (import)");
@@ -65,7 +65,7 @@ namespace ts.codefix {
             Debug.assertNode(node, isIdentifier, "Expected an identifier for JSX attribute");
             const tag = findAncestor(node, isJsxOpeningLikeElement)!;
             const props = checker.getContextualTypeForArgumentAtIndex(tag, 0);
-            suggestedSymbol = checker.getSuggestedSymbolForNonexistentProperty(node, props!, /** isJsxAttr */ true);
+            suggestedSymbol = checker.getSuggestedSymbolForNonexistentJSXAttribute(node, props!);
         }
         else {
             const meaning = getMeaningFromLocation(node);

From 41a1cd9128f40de8fb75aa961bd1887e73a6bc07 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 19 Jun 2020 11:35:35 +0800
Subject: [PATCH 12/15] chore: more change

---
 src/compiler/checker.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 2da9fdf5165..43df261edc0 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -13246,7 +13246,7 @@ namespace ts {
                         }
                         else {
                             let suggestion: string | undefined;
-                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType, /*isJsxAttr*/ false))) {
+                            if (propName !== undefined && (suggestion = getSuggestionForNonexistentProperty(propName as string, objectType))) {
                                 if (suggestion !== undefined) {
                                     error(accessExpression.argumentExpression, Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName as string, typeToString(objectType), suggestion);
                                 }
@@ -16320,7 +16320,8 @@ namespace ts {
                                         errorNode = prop.valueDeclaration.name;
                                     }
                                     const propName = symbolToString(prop);
-                                    const suggestion = getSuggestionForNonexistentProperty(propName, errorTarget, /*isJsxAttr*/ true);
+                                    const suggestionSymbol = getSuggestedSymbolForNonexistentJSXAttribute(propName, errorTarget);
+                                    const suggestion = suggestionSymbol ? symbolToString(suggestionSymbol) : undefined;
                                     if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
                                     else reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
                                 }
@@ -16336,7 +16337,7 @@ namespace ts {
 
                                         const name = propDeclaration.name!;
                                         if (isIdentifier(name)) {
-                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget, /*isJsxAttr*/ false);
+                                            suggestion = getSuggestionForNonexistentProperty(name, errorTarget);
                                         }
                                     }
                                     if (suggestion !== undefined) {
@@ -24892,8 +24893,8 @@ namespace ts {
             return defaultSuggestion();
           }
 
-        function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): string | undefined {
-            const suggestion = (isJsxAttr ? getSuggestedSymbolForNonexistentJSXAttribute : getSuggestedSymbolForNonexistentProperty)(name, containingType);
+        function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): string | undefined {
+            const suggestion = getSuggestedSymbolForNonexistentProperty(name, containingType);
             return suggestion && symbolName(suggestion);
         }
 

From ddfab9640ef4cfc3b583581d5fac45e53a9feadf Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 19 Jun 2020 11:37:06 +0800
Subject: [PATCH 13/15] change

---
 src/compiler/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compiler/types.ts b/src/compiler/types.ts
index 52e1402bca5..465af258f86 100644
--- a/src/compiler/types.ts
+++ b/src/compiler/types.ts
@@ -4011,7 +4011,7 @@ namespace ts {
         getApparentType(type: Type): Type;
         /* @internal */ getSuggestedSymbolForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentJSXAttribute(name: Identifier | string, containingType: Type): Symbol | undefined;
-        /* @internal */ getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type, isJsxAttr: boolean): string | undefined;
+        /* @internal */ getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): string | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): Symbol | undefined;
         /* @internal */ getSuggestionForNonexistentSymbol(location: Node, name: string, meaning: SymbolFlags): string | undefined;
         /* @internal */ getSuggestedSymbolForNonexistentModule(node: Identifier, target: Symbol): Symbol | undefined;

From ac87e82f086a919b272e30432dfddadc608804d3 Mon Sep 17 00:00:00 2001
From: Nathan Shively-Sanders <293473+sandersn@users.noreply.github.com>
Date: Mon, 22 Jun 2020 15:11:30 -0700
Subject: [PATCH 14/15] inline local functions

---
 src/compiler/checker.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 43df261edc0..464d30ee813 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -24884,13 +24884,10 @@ namespace ts {
         function getSuggestedSymbolForNonexistentJSXAttribute(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined {
             const strName = isString(name) ? name : idText(name);
             const properties = getPropertiesOfType(containingType);
-            const defaultSuggestion = () => getSpellingSuggestionForName(strName, properties, SymbolFlags.Value);
-            const getCandidate = (expectedName: string) => properties.find(x => symbolName(x) === expectedName);
-            switch (strName) {
-                case "for": return getCandidate("htmlFor") || defaultSuggestion();
-                case "class": return getCandidate("className") || defaultSuggestion();
-            }
-            return defaultSuggestion();
+            const jsxSpecific = strName === "for" ? properties.find(x => symbolName(x) === "htmlFor")
+                : strName === "class" ? properties.find(x => symbolName(x) === "className")
+                : undefined;
+            return jsxSpecific ?? getSpellingSuggestionForName(strName, properties, SymbolFlags.Value);
           }
 
         function getSuggestionForNonexistentProperty(name: Identifier | PrivateIdentifier | string, containingType: Type): string | undefined {

From 8dc4f7e3d2bc1ec0dfd82ed62f25d146d51b3237 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Tue, 23 Jun 2020 08:06:46 +0800
Subject: [PATCH 15/15] chore: resolve suggestions

---
 src/compiler/checker.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 464d30ee813..1ddd0c474a5 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -16322,8 +16322,12 @@ namespace ts {
                                     const propName = symbolToString(prop);
                                     const suggestionSymbol = getSuggestedSymbolForNonexistentJSXAttribute(propName, errorTarget);
                                     const suggestion = suggestionSymbol ? symbolToString(suggestionSymbol) : undefined;
-                                    if (suggestion) reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
-                                    else reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
+                                    if (suggestion) {
+                                        reportError(Diagnostics.Property_0_does_not_exist_on_type_1_Did_you_mean_2, propName, typeToString(errorTarget), suggestion);
+                                    }
+                                    else {
+                                        reportError(Diagnostics.Property_0_does_not_exist_on_type_1, propName, typeToString(errorTarget));
+                                    }
                                 }
                                 else {
                                     // use the property's value declaration if the property is assigned inside the literal itself
@@ -24884,8 +24888,8 @@ namespace ts {
         function getSuggestedSymbolForNonexistentJSXAttribute(name: Identifier | PrivateIdentifier | string, containingType: Type): Symbol | undefined {
             const strName = isString(name) ? name : idText(name);
             const properties = getPropertiesOfType(containingType);
-            const jsxSpecific = strName === "for" ? properties.find(x => symbolName(x) === "htmlFor")
-                : strName === "class" ? properties.find(x => symbolName(x) === "className")
+            const jsxSpecific = strName === "for" ? find(properties, x => symbolName(x) === "htmlFor")
+                : strName === "class" ? find(properties, x => symbolName(x) === "className")
                 : undefined;
             return jsxSpecific ?? getSpellingSuggestionForName(strName, properties, SymbolFlags.Value);
           }
@@ -28236,7 +28240,7 @@ namespace ts {
                 error(expr, Diagnostics.The_operand_of_a_delete_operator_must_be_a_property_reference);
                 return booleanType;
             }
-            if (expr.kind === SyntaxKind.PropertyAccessExpression && isPrivateIdentifier(expr.name)) {
+            if (isPropertyAccessExpression(expr) && isPrivateIdentifier(expr.name)) {
                 error(expr, Diagnostics.The_operand_of_a_delete_operator_cannot_be_a_private_identifier);
             }
             const links = getNodeLinks(expr);