How to disable Prettier for <pre> or <code> blocks so that new lines (line breaks) are preserved?

Question

// 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

Answer 1

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 comparison 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 becomes 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.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/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 comment so I can edit it.

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