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

[CristhianMotoche]

Thanks for the suggestion @wooorm The README doesn't mention the option but I read the code and I noticed it accepts a printWidth option to pass it to mdxToMarkdown. I set it in this way:

  const cc = `
<MyCustomComponent foo={"Hello"} bar={"world!"} anotherProp={["this is a list of strings", "with some examples", "kind of long, isn't it?"]} />
  `;
  const processed = await unified()
        .use(remarkParse)
        .use(remarkMdx, { printWidth: 80 })
        .use(mdxStringify)
        .process(cc);
  const final = String(processed);
  console.log("CL - final", final);

but it didn't limit the width. Perhaps, I'm missing something.

[wooorm]

package.json:

{
  "type": "module",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {
    "remark-cli": "^11.0.0",
    "remark-mdx": "^2.3.0"
  }
}

example.mdx

<MyCustomComponent foo={"Hello"} bar={"world!"} anotherProp={["this is a list of strings", "with some examples", "kind of long, isn't it?"]} />

Now running:

./node_modules/.bin/remark --use "remark-mdx=printWidth:20" example.mdx 

Yields:

<MyCustomComponent
  foo={"Hello"}
  bar={"world!"}
  anotherProp={["this is a list of strings", "with some examples", "kind of long, isn't it?"]}
/>

Alternatively, running:

./node_modules/.bin/remark --use "remark-mdx=printWidth:240" example.mdx 

Yields:

<MyCustomComponent foo={"Hello"} bar={"world!"} anotherProp={["this is a list of strings", "with some examples", "kind of long, isn't it?"]} />

[liltechnomancer]

I have a question about running this on file save with -o to modify the saved file.
The --watch flag doesn't re-write the files until the process exits, and since I am having it change the file I am editing nodemon isn't really an option as it causes an infinite loop. Does anyone have a solution for running this on save?

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