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

[wooorm]

--watch can write, but doesn’t write if the output is also the input.
As that would be an infinite loop (plugins can do anything, such as writing the current timestamp out). Same as nodemon.
I run remark etc without --watch, I don’t particularly need it always, just, before pushing? Same as xo or prettier or etc?
Running on save sounds more like a VS Code thing — Does remark-vscode not have what you want? https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-remark

[liltechnomancer]

I didn't know about remark-vscode thanks!

[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.