Add JSX codefix if available (#32281)

* Add JSX codefix if available

* Update react jsx.

* Update diagnostic code.

Author: hoangpham95

src/compiler/diagnosticMessages.json

@@ -5112,6 +5112,10 @@
         "category": "Message",
         "code": 95087
     },
+    "Enable the '--jsx' flag in your configuration file": {
+        "category": "Message",
+        "code": 95088
+    },
 
     "No value exists in scope for the shorthand property '{0}'. Either declare one or provide an initializer.": {
         "category": "Error",

src/services/codefixes/fixEnableJsxFlag.ts

@@ -0,0 +1,35 @@
+/* @internal */
+namespace ts.codefix {
+    const fixID = "fixEnableJsxFlag";
+    const errorCodes = [Diagnostics.Cannot_use_JSX_unless_the_jsx_flag_is_provided.code];
+    registerCodeFix({
+        errorCodes,
+        getCodeActions: context => {
+            const { configFile } = context.program.getCompilerOptions();
+            if (configFile === undefined) {
+                return undefined;
+            }
+
+            const changes = textChanges.ChangeTracker.with(context, changeTracker =>
+                doChange(changeTracker, configFile)
+            );
+            return [
+                createCodeFixActionNoFixId(fixID, changes, Diagnostics.Enable_the_jsx_flag_in_your_configuration_file)
+            ];
+        },
+        fixIds: [fixID],
+        getAllCodeActions: context =>
+            codeFixAll(context, errorCodes, changes => {
+                const { configFile } = context.program.getCompilerOptions();
+                if (configFile === undefined) {
+                    return undefined;
+                }
+
+                doChange(changes, configFile);
+            })
+    });
+
+    function doChange(changeTracker: textChanges.ChangeTracker, configFile: TsConfigSourceFile) {
+        setJsonCompilerOptionValue(changeTracker, configFile, "jsx", createStringLiteral("react"));
+    }
+}

src/services/tsconfig.json

@@ -65,6 +65,7 @@
         "codefixes/fixClassSuperMustPrecedeThisAccess.ts",
         "codefixes/fixConstructorForDerivedNeedSuperCall.ts",
         "codefixes/fixEnableExperimentalDecorators.ts",
+        "codefixes/fixEnableJsxFlag.ts",
         "codefixes/fixExtendsInterfaceBecomesImplements.ts",
         "codefixes/fixForgottenThisPropertyAccess.ts",
         "codefixes/fixUnusedIdentifier.ts",

tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts

@@ -0,0 +1,23 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/jsconfig.json
+////{
+////    "compilerOptions": {
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/jsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});

tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts

@@ -0,0 +1,23 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>;
+
+// @Filename: /dir/tsconfig.json
+////{
+////    "compilerOptions": {
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/tsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});

tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts

@@ -0,0 +1,24 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>;
+
+// @Filename: /dir/jsconfig.json
+////{
+////    "compilerOptions": {
+////        "jsx": false,
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/jsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});

tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts

@@ -0,0 +1,24 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/tsconfig.json
+////{
+////    "compilerOptions": {
+////        "jsx": false,
+////    }
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/tsconfig.json":
+`{
+    "compilerOptions": {
+        "jsx": "react",
+    }
+}`,
+    },
+});

tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts

@@ -0,0 +1,19 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/jsconfig.json
+////{
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/jsconfig.json":
+`{
+    "compilerOptions": { "jsx": "react" },
+}`,
+    },
+});

tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts

@@ -0,0 +1,19 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+// @Filename: /dir/tsconfig.json
+////{
+////}
+
+goTo.file("/dir/a.tsx");
+verify.codeFix({
+    description: "Enable the '--jsx' flag in your configuration file",
+    newFileContent: {
+        "/dir/tsconfig.json":
+`{
+    "compilerOptions": { "jsx": "react" },
+}`,
+    },
+});

tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts

@@ -0,0 +1,7 @@
+/// <reference path='fourslash.ts' />
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <></>
+
+goTo.file("/dir/a.tsx");
+verify.not.codeFixAvailable();