Poor results with refmt and JSX



Is it just me or does refmt have some real problems with handling JSX? Here’s an example of an auto-formatted JSX snippet:

  <SidebarPanelO className="z-20 left-full" isExpanded>
    {facets->Array.length > 0 ? <div className="p-4"> {facets->Array.map(({label}) => {
            <PillC className="w-auto mr-2 mb-3" closable=true> {label->React.string} </PillC>
          })->React.array} </div> : <div
          className="flex font-bold justify-center items-center text-center w-full h-16">
          {React.string("No filters selected.")}

I think it’s almost unreadable, certainly not idiomatic JSX styling coming from the JS world.

Is my experience with formatting normal? Does anyone have suggestions on how to improve these results?


SieveR on Discord helped me out:

  1. Turns out that I was mistaken. I had assumed that the VS Code plugin that I was using (https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode) used refmt behind the scenes, but actually ReScript syntax uses bsc -format, which is a separate tool.
  2. There was a JSX formatting bug fixed in 8.4.2: https://github.com/rescript-lang/syntax/issues/182. Upgrading fixed my problem.

It would help if the ReScript docs mentioned how formatting uses bsc -format as there currently isn’t any explanation about formatting. I just saw refmt pop up in searches for “ReScript formatting” and “ReasonML formatting.”


It would be better to raise this as an issue on the ReScript forum, or even better, as a GitHub issue on their website repo.