// prettier.config.js
module.exports = {
  arrowParens: 'always',
  bracketSpacing: true,
  endOfLine: 'auto',
  printWidth: 180,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

function TaskList(): JSX.Element {
  // prettier-ignore-start
  return (
    <pre style={{ maxWidth: '300px', overflow: 'auto' }}>
     - A
     - B
     - C
     - D
    </pre>
  );
  //  prettier-ignore-end
}

But then upon saving my file, Prettier deletes the linebreaks, causing my function to look like - A - B - C - D.

I've also tried using {/* prettier-ignore */} as suggested at .html#jsx

I've already looked at these:

• Is there a way to prevent Prettier from touching <pre><code> blocks in HTML files?
• ESLint and Prettier Conflict, Unable to Disable Prettier for code block

// prettier.config.js
module.exports = {
  arrowParens: 'always',
  bracketSpacing: true,
  endOfLine: 'auto',
  printWidth: 180,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

function TaskList(): JSX.Element {
  // prettier-ignore-start
  return (
    <pre style={{ maxWidth: '300px', overflow: 'auto' }}>
     - A
     - B
     - C
     - D
    </pre>
  );
  //  prettier-ignore-end
}

But then upon saving my file, Prettier deletes the linebreaks, causing my function to look like - A - B - C - D.

I've also tried using {/* prettier-ignore */} as suggested at https://prettier.io/docs/en/ignore.html#jsx

I've already looked at these:

• Is there a way to prevent Prettier from touching <pre><code> blocks in HTML files?
• ESLint and Prettier Conflict, Unable to Disable Prettier for code block

• javascript
• reactjs
• typescript
• prettier

Share Improve this question Follow edited Oct 16, 2022 at 13:40 Ryan asked Oct 10, 2022 at 20:50 RyanRyan 24.2k3535 gold badges209209 silver badges397397 bronze badges 1

• Any questions, please ment so I can edit my answer, I wish you success on your journey :) – Lucas Paixão Commented Oct 16, 2022 at 18:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I figured it out right after I offered the bounty.

Following the docs at https://prettier.io/docs/en/ignore.html#javascript I did:

function TaskList(): JSX.Element {
  // prettier-ignore
  return (
    <pre style={{ maxWidth: '300px', overflow: 'auto' }}>
     - A
     - B
     - C
     - D
    </pre>
  );
  
}

I used the Prettier Playground tool (demo) to try it out.

The problem

---

The problem is due to JSX collapsing the spaces and newlines that are judged unnecessary by it

This means that it is not a problem of formatting or indenting a specific file, that is, no matter which plugin you use to format the files, the problem will continue until you tell JSX that this block should not be "minified" like that to say.

Reference: How to use whiteSpace: 'pre-wrap' on React

The solution

---

dangerouslySetInnerHTML

dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of using a selector to grab the HTML element, then setting its innerHTML, you can use this property directly on the element.

When dangerouslySetInnerHTML is used, React also knows that the content of that specific element is dynamic, and, for the children of that node, it simply skips the parison against the virtual DOM to gain some extra performance.

As the name of the property suggests, it can be dangerous to use because it makes your code vulnerable to cross-site scripting (XSS) attacks. This bees an issue especially if you are fetching data from a third-party source or rendering content submitted by users.

Interpolation in JSX

For new versions of React/JSX, there is no need to use dangerouslySetInnerHTML
You can use this syntax:

return (
   <>
     {`
       -A
       -B
     `}
   </>
)

The code

---

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <pre style={{ maxWidth: '300px', overflow: 'auto' }}>
        {`
        - A
        - B
        - C
        - D
        `}
      </pre>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);

<script src="https://unpkg./react@18/umd/react.development.js"></script>
<script src="https://unpkg./react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div> 

Remarks

---

If this answer was not satisfactory, or confusing, or did not answer what was asked, please ment so I can edit it.

It's worth mentioning that I'm using google translator to answer, I apologize for any inconvenience

Can you try it like this?

function TaskList(): JSX.Element {
    return (
  <>
   <!-- prettier-ignore-start -->
    <pre style={{ maxWidth: '300px', overflow: 'auto' }}>
     - A
     - B
     - C
     - D
    </pre>
  <!-- prettier-ignore-end -->
 </>
  )/
}