Autocomplete in .MDX files using VScode

Question

When I import something from .js or .ts files in .mdx files I would like to see autocomplete suggestions from VScode.

Also when I define variable inside .mdx file, I'm waiting that VScode will suggest me this variable's name.

// for example
const myVar = 'myVarValue';

<Meta title={myV /* In this moment VScode should show me suggestion */} />

Questions:

Is it possible at all?
If not then why and when it will be possible?
If yes then what should I do with my VScode to it became work as I expect?

At the time of writing this answer, there is still no VSCode plugin that provides intellisense for .mdx files. There is an issue open for vscode-mdx with a request for code completion - https://github.com/mdx-js/vscode-mdx/issues/165 - where a user has suggested a solution for this and hopefully it would be included at some point. — ardentia, Jan 21 '22 at 18:15

score 0 · Answer 1 · answered May 24 '23 at 21:37

There is now a VSCode extension, vscode-mdx, that enables this functionality.

Note that the IntelliSense feature is still described as being in experimental stage and is disabled by default. You can change this setting to enable the support and then restart your VSCode.

mdx.experimentalLanguageServer: Enable experimental IntelliSense support for MDX files. (boolean, default: false)

I have only just started using it so can't really vouch for it yet, but so far I'm finding it better than nothing. I'm using it for storybook's, and it correctly suggests the props for components and navigates to definitions correctly.

However I note that it does not do what the example in the description expects - trying to reference defined variables does not offer suggestions.

Autocomplete in .MDX files using VScode

1 Answers1