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();