Add option to force enable TypeScript option checkJs

[remcohaszing]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

Under the hood MDX is transformed to JavaScript(X) for type checking. By default TypeScript only checks TypeScript(X). It provides subtle editor features, but no red squiggly lines for type errors. Some users expect the latter.

Solution

Add a configuration option to force more strict type checking inside MDX files.

Alternatives

N/A

[remcohaszing]

I see two possible implementations:

1. Have the option enable checkJs in TypeScript compiler settings.
2. Inject a // @ts-check comment in the virtual JavaScript file.

1 is simpler, but 2 feels more elegant. 2 requires some changes to how the virtual documents are built, but I’ve been wanting to change that anyway.

Also we need to come up with a name for the configuration setting. I consider the use of allowJs / checkJs an implementation detail. mdx.check? mdx.strict? mdx.validate? mdx.typecheck? mdx.squigglies?

cc @johnsoncodehk

[wooorm]

What if users do {/* @ts-check */}? Does it work/would it work?

[remcohaszing]

That doesn’t work. It must be a line comment at the top of the file. In case of Volar at the top of the virtual JS file.

This does work.

{
// @ts-check
}

We could make {/* @ts-check */} work.

We could also make a custom setting in tsconfig.json work, for example:

{
  "compilerOptions": {},
  "mdx": {
    // We already have this
    "plugins": [],
    // This would be new
    "check": true
  }
}

Regardless, I think it’s good to allow the user to control this setting in their editor configuration. It’s a preference. People might not want to commit changes just to enhance the MDX editing experience.

[lea255ace]

This would be a great addition!
In the meantime I found a workaround with tsconfig.json to get the desired type checking behavior:

{
  "compilerOptions": {
    "checkJs": true,
  },
  "include": {
    "**/*.mdx"
  }
}

[johnsoncodehk]

Volar 2.0 will recommend based on TS Plugin to improve performance, and TS Plugin cannot get IDE configs, so I recommend solving it through tsconfig option for future implementation.

I think the // @ts-check approach is good, it's less hacky to the language server / tsserver. I recommend options named mdx.generateTsCheck or mdxCompilerOptions.generateTsCheck, but this is just a personal preference.

[remcohaszing]

Related PR: johnsoncodehk#2

It looks like it is possible to pass configuration options to TypeScript plugins from a VSCode extension (https://code.visualstudio.com/api/references/contribution-points#Plugin-configuration).