[SOLVED] Prevent vscode prettier wrap jsx attributes which has template literals in it

Prevent vscode prettier wrap jsx attributes which has template literals in it

I found that prettier will wrap my jsx attributes which has more than one template literal to new line.

For examples in my jsx file:

// before formatted and expected result
<DemoFrame html={`${demoPath}/frame1/index.html`} css={`${demoPath}/frame1/index.min.css`} />

// formatted
<DemoFrame
  html={`${demoPath}/frame1/index.html`}
  css={`
    ${demoPath}/frame1/index.min.css
  `}
/>

But these were not changed

<CodeChunk path={`${demoPath}/frame1/index.html`} lang="html" />
<DemoFrame html={`${demoPath}/frame1/index.html`} css={`/frame1/index.min.css`} />
<DemoFrame html={`${demoPath}/frame1/index.html`} css={demoPath + `/frame1/index.min.css`} />

I had tried adding these two lines to settings.json but not working.

"prettier.printWidth": 2000,
"prettier.singleAttributePerLine": false,

Solution

In your example for the ones that didn't get formatted, try swapping the usage of template literals in html and css values, for example:

// Your example (doesn't get formatted)
<DemoFrame html={`${demoPath}/frame1/index.html`} css={`/frame1/index.min.css`} />

// Swapped usage of template literals (before formatting)
<DemoFrame html={`/frame1/index.min.css`} css={`${demoPath}/frame1/index.html`} />

// Swapped usage of template literals (after formatting, breaks inside css value)
<DemoFrame
  html={`/frame1/index.html`}
  css={`
    ${demoPath}/frame1/index.min.css
  `}
/>

// Renamed css attribute to cssHref (doesn't get formatted)
<DemoFrame html={`/frame1/index.html`} cssHref={`${demoPath}/frame1/index.min.css`} />

If you rename attribute from css to any other name (for example cssHref), it doesn't get broken into multiple lines (doesn't matter how many of your attribute values use template literals). I couldn't find why this behaviour is baked into prettier, but hope this helps anyway.