如何阻止VSCode中Prettier换行含模板字面量的JSX属性

问题现象 #

在JSX代码中，当属性值是包含插值的模板字面量时，Prettier会自动将属性换行，同时给模板字面量内部添加换行和缩进，不符合预期：

// 格式化前（期望结果）
<DemoFrame html={`${demoPath}/frame1/index.html`} css={`${demoPath}/frame1/index.min.css`} />

// 格式化后（实际结果）
<DemoFrame
  html={`${demoPath}/frame1/index.html`}
  css={`
    ${demoPath}/frame1/index.min.css
  `}
/>

但以下几种情况不会触发该问题：

• 单个属性带插值模板字面量：

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

尝试设置printWidth: 2000和singleAttributePerLine: false后，问题仍未解决。

原因分析 #

你设置的printWidth和singleAttributePerLine是控制JSX属性整体换行的规则，但Prettier对带插值的模板字面量在JSX属性中的处理有独立逻辑：当模板字面量包含插值时，Prettier会默认对其进行内部换行格式化，同时可能强制将该属性单独拆行，这两个设置无法覆盖这个特殊逻辑。

解决方案 #

1. 用注释忽略特定行格式化 #

如果只是个别场景需要保留格式，直接在目标行上方添加/* prettier-ignore */注释，强制跳过该行的格式化：

/* prettier-ignore */
<DemoFrame html={`${demoPath}/frame1/index.html`} css={`${demoPath}/frame1/index.min.css`} />

2. 升级Prettier到最新版本 #

部分旧版本的Prettier在处理JSX属性与模板字面量的组合场景时存在逻辑判断问题，升级到最新稳定版本（比如3.x系列）可能修复该行为。

3. 排查配置冲突 #

检查是否有ESLint规则、Prettier插件（如eslint-plugin-prettier）或其他格式化工具干扰了Prettier的配置，确保你的settings.json中的Prettier配置是生效的（可以通过Prettier的格式化日志或编辑器的Prettier插件状态确认）。

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