diff --git a/src/compiler/diagnosticMessages.json b/src/compiler/diagnosticMessages.json
index 4528d504d0d12..1193c52d82f6d 100644
--- a/src/compiler/diagnosticMessages.json
+++ b/src/compiler/diagnosticMessages.json
@@ -5108,6 +5108,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",
diff --git a/src/services/codefixes/fixEnableJsxFlag.ts b/src/services/codefixes/fixEnableJsxFlag.ts
new file mode 100644
index 0000000000000..728366392f1ea
--- /dev/null
+++ b/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"));
+ }
+}
diff --git a/src/services/tsconfig.json b/src/services/tsconfig.json
index c2a6946b5ed77..6b52393422c98 100644
--- a/src/services/tsconfig.json
+++ b/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",
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts
new file mode 100644
index 0000000000000..9d3c14f45bbbd
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsJsConfig.ts
@@ -0,0 +1,23 @@
+///
+
+// @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",
+ }
+}`,
+ },
+});
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts
new file mode 100644
index 0000000000000..7b314feeecd50
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_blankCompilerOptionsTsConfig.ts
@@ -0,0 +1,23 @@
+///
+
+// @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",
+ }
+}`,
+ },
+});
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts
new file mode 100644
index 0000000000000..dbc7d39ec6c24
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInJsConfig.ts
@@ -0,0 +1,24 @@
+///
+
+// @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",
+ }
+}`,
+ },
+});
diff --git a/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts
new file mode 100644
index 0000000000000..752abc156f7d3
--- /dev/null
+++ b/tests/cases/fourslash/codeFixEnableJsxFlag_disabledInCompilerOptionsInTsConfig.ts
@@ -0,0 +1,24 @@
+///
+
+// @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",
+ }
+}`,
+ },
+});
diff --git a/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts
new file mode 100644
index 0000000000000..89769c49d0b9b
--- /dev/null
+++ b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInJsconfig.ts
@@ -0,0 +1,19 @@
+///
+
+// @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" },
+}`,
+ },
+});
diff --git a/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts
new file mode 100644
index 0000000000000..dc81c7970af27
--- /dev/null
+++ b/tests/cases/fourslash/codefixEnableJsxFlag_missingCompilerOptionsInTsconfig.ts
@@ -0,0 +1,19 @@
+///
+
+// @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" },
+}`,
+ },
+});
diff --git a/tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts b/tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts
new file mode 100644
index 0000000000000..f07f0035fb275
--- /dev/null
+++ b/tests/cases/fourslash/codefixEnableJsxFlag_noTsconfig.ts
@@ -0,0 +1,7 @@
+///
+
+// @Filename: /dir/a.tsx
+////export const Component = () => <>>
+
+goTo.file("/dir/a.tsx");
+verify.not.codeFixAvailable();