VS Code使用Prettier时p标签内长文本被拆分为多行如何解决

编辑器自带的word wrap仅为视觉换行，不会修改文件实际内容，你遇到的自动拆分是Prettier的格式化逻辑导致，可通过以下方式配置禁用：

• 方案1：项目级配置（推荐，可随项目同步给其他开发者）
  在项目根目录新建/编辑.prettierrc配置文件，添加如下参数：

  {
    "proseWrap": "preserve",
    "htmlWhitespaceSensitivity": "css"
  }
  

  参数说明：

  • proseWrap：控制HTML、Markdown等富文本内容的换行逻辑，设为preserve后会完全保留你原本的换行状态，不会自动将单行长文本拆分为多行
  • htmlWhitespaceSensitivity：设置HTML空格敏感度，设为css会按照CSS的空格规则处理内容，不会随意拆分p标签这类行内文本

• 方案2：VS Code全局配置
  如果你想对本地所有项目生效，可直接修改编辑器设置：

  1. 使用快捷键Ctrl+,（Windows）/Cmd+,（Mac）打开设置页
  2. 搜索Prettier: Prose Wrap，将下拉选项改为preserve
  3. 搜索Prettier: HTML Whitespace Sensitivity，将下拉选项改为css
     配置完成后重启VS Code即可生效。

• 方案3：单文件/单标签临时禁用
  如果仅需对个别文件或标签关闭该功能，可使用Prettier忽略注释：

  • 对整个HTML文件禁用：在文件最顶部添加<!-- prettier-ignore -->
  • 仅对单个p标签禁用：在对应标签前添加<!-- prettier-ignore -->，示例如下：

    <!-- prettier-ignore -->
    <p>这是一段不会被Prettier自动拆分的超长文本内容</p>
    

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