Recommended formatter?

[frankandrobot]

Currently using prettier@2.7.1, but it formats this text block incorrectly

And that's when I had the "AHA!" moment---can't we just follow the React model
of regular ol' code plus JSX? We'd get an expressive API that makes enhancements
super simple. For example, you could easily write a <i>Transition</i>s to use
 
<i>ThreeJS</i> instead of <i>PixiJS</i>.

It's supposed to be a single paragraph but it adds the new line 🤷. So was wondering if there was a formatter specific to MDX.

[wooorm]

I recommend remark-cli with remark-mdx. That’s why I used everywhere, including in this monorepo. I also have my own preset with a bunch of strict style stuff, remark-preset-wooorm

[remcohaszing]

Does remark-vscode not have what you want?

No, this is blocked upstream. remarkjs/vscode-remark#129 (comment)

[sebas1208]

I've been using remark-cli + remark-mdx with printWidth and works fine. But I would like to format JSX even more (with prettier for example). Let's say I have this

<MyComp 
  a={[{foo: "bar", baz: "bar"}, {foo: "bar", baz: "bar"}, {foo: "bar", baz: "bar"}, {foo: "bar", baz: "bar"}]}
/>

And I want to get this output:

<Testing
  a={[
    { foo: "bar", baz: "bar" },
    { foo: "bar", baz: "bar" },
    { foo: "bar", baz: "bar" },
    { foo: "bar", baz: "bar" },
  ]}
/>

I don't wan't to run prettier on the whole document either as it conflicts with other rules. Any idea on how to achieve this?

[wooorm]

Hi! Nothing yet.

You found some options for JSX. From remark-mdx, which come from syntax-tree/mdast-util-mdx-jsx. More features could be requested/developed there.
Or, specifically for JS in JSX tags: that’s not really touched by the tools here.

There could be a different tool, say a plugin, that formats JS in JSX.

Over the years there’s been more interest in closer JS integration to the ecosystem. So I made https://github.com/mdx-js/recma yesterday. Which also included recma-minify, which I made yesterday. That’s different but kinda close to this question.

Some plugin could benefit from these JS tools, to format JS in JSX.

[jasikpark]

Could something be added as a prettier-plugin-mdx sort of plugin? to override the default mdx handling to support v3?

[wooorm]

Probably yeah. And that may actually unblock stuff. Prettier has a ton of code to handle weird edge cases and fixtures for them. But MDX 2/3 was a breaking change. So without that legacy, allowing a breaking change, a plugin is probably easier to do!

[remcohaszing]

You can now also use mdxlint. This is essentially the same as remark-cli + remark-lint, but it supports editor integration via a language server and VSCode plugin.