如何让Prettier忽略JSX/TSX中的SVG代码块格式化？

以下是几种可行方案，让SVG保持单行显示：

方案一：使用Prettier忽略注释 #

在JSX的SVG代码前后添加Prettier忽略注释，直接跳过这段内容的格式化：

{/* prettier-ignore */}
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill="currentColor"/></svg>
{/* prettier-ignore-end */}

方案二：将SVG放入模板字符串（需注意安全） #

把SVG代码作为字符串传入dangerouslySetInnerHTML，Prettier默认不会格式化模板字符串内的HTML内容：

const CustomIcon = () => (
  <div 
    dangerouslySetInnerHTML={{ 
      __html: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill="currentColor"/></svg>` 
    }} 
  />
);

注意：仅当SVG来源可信时使用此方法，避免XSS风险。

方案三：使用Prettier插件 #

安装专门跳过SVG格式化的插件，比如prettier-plugin-skip-svg：

1. 安装插件：

npm install prettier-plugin-skip-svg --save-dev
# 或
yarn add prettier-plugin-skip-svg --dev

2. 在Prettier配置文件（如.prettierrc）中添加插件：

{
  "plugins": ["prettier-plugin-skip-svg"]
}

配置完成后，Prettier会自动跳过JSX中SVG标签的格式化，保持其原始单行状态。

内容的提问来源于stack exchange，提问作者ByteVictor