javascript - 如何为 <pre> 或 <code> block 禁用 Prettier，以便保留新行(换行符)？

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
}

但是在保存我的文件后，Prettier 删除了换行符，导致我的函数看起来像 - A - B - C - D。

我也尝试按照 https://prettier.io/docs/en/ignore.html#jsx 上的建议使用 {/* prettier-ignore */>

我已经看过这些:

• 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

问题

---

问题是由于 JSX 折叠了它认为不需要的空格和换行符

这意味着这不是格式化或缩进特定文件的问题，也就是说，无论你使用哪个插件来格式化文件，问题都会一直存在，直到你告诉 JSX 这个 block 不应该像那样“缩小”到说。

引用:How to use whiteSpace: 'pre-wrap' on React

解决方案

---

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是一个属性，您可以在 React 应用程序的 HTML 元素上使用它以编程方式设置它们的内容。您可以直接在元素上使用此属性，而不是使用选择器来获取 HTML 元素，然后设置其 innerHTML。

当使用 dangerouslySetInnerHTML 时，React 也知道该特定元素的内容是动态的，并且对于该节点的子节点，它只是跳过与虚拟 DOM< 的比较/strong> 以获得一些额外的性能。

正如该属性的名称所暗示的那样，使用它可能很危险，因为它会使您的代码容易受到跨站点脚本 (XSS) 攻击。这会成为一个问题，尤其是当您从第三方来源获取数据或呈现用户提交的内容时。

Interpolation in JSX

对于新版本的 React/JSX，没有必要危险地使用 SetInnerHTML
您可以使用以下语法:

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

代码

---

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> 

备注

---

如果这个答案不令人满意，或令人困惑，或没有回答问题，请发表评论，以便我进行编辑。

值得一提的是，我是用谷歌翻译来回答的，不便之处，敬请谅解