Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configure MDX editor support #362

Merged
merged 1 commit into from
Nov 7, 2024

Conversation

remcohaszing
Copy link
Contributor

By default a TypeScript program includes all TypeScript files. However, because there’s an include pattern, **/*.mdx, has to be added for editor support.

The mdx.checkMdx option turns subtle error hints in the editor into red squiggly lines.

The global type MDXProvidedComponents configures the type of components injected into MDX. This provides support for <Note />, <Image />, etc.

The useMDXComponents() function does not take any arguments. The documentation on which this was based, is wrong.
(vercel/next.js#67188)

For details, see https://github.com/mdx-js/mdx-analyzer

By default a TypeScript program includes all TypeScript files. However,
because there’s an `include` pattern, `**/*.mdx`, has to be added for
editor support.

The `mdx.checkMdx` option turns subtle error hints in the editor into
red squiggly lines.

The global type `MDXProvidedComponents` configures the type of
components injected into MDX. This provides support for `<Note />`,
`<Image />`, etc.

The `useMDXComponents()` function does not take any arguments. The
documentation on which this was based, is wrong.
(vercel/next.js#67188)

For details, see https://github.com/mdx-js/mdx-analyzer
@gaearon
Copy link
Contributor

gaearon commented Nov 3, 2024

Thanks! How do we test the change?

@remcohaszing
Copy link
Contributor Author

You’ll notice the difference in your editor. You need to use either the MDX language server or the MDX TypeScript plugin. Exact configurations can differ per editor. The MDX VSCode extension supports it by default. I will assume VSCode for the purpose of explaining.

Because MDX files are now included in the same TypeScript program that’s defined by tsconfig.json, you will now get matching IntelliSense, such as hover information, Go to definition support, autocompletions, etc.

Hover before:

A tooltip showing an unresolved import.

Hover after:

A tooltip showing a resolved type.

Because of the global MDXProvidedComponents, you now get completions and type errors for components provided via mdx-components.tsx:

A JSX prop marked as an error and JSX prop completion items.

@gaearon gaearon merged commit fca3f8e into bluesky-social:main Nov 7, 2024
@remcohaszing remcohaszing deleted the mdx-intellisense branch November 7, 2024 22:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants