Vue3+Prettier+VSCode：字符串渲染含多余空格致测试不通过

问题分析 #

在Vue3模板中，当文本单独占一行（比如带缩进的换行内容），浏览器会把模板里的缩进、换行解析为空格，导致渲染后的文本前后出现多余空格，进而导致测试不通过。

解决方案 #

1. 使用v-text指令绑定文本 #

直接通过指令绑定内容，跳过模板空白字符的解析：

<!-- 直接绑定字符串 -->
<div v-text="'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti, dignissimos aliquam numquam voluptatibus qui dolores neque!'"></div>

<!-- 绑定变量更易维护 -->
<template>
  <div v-text="content"></div>
</template>

<script setup>
const content = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti, dignissimos aliquam numquam voluptatibus qui dolores neque!'
</script>

2. 用HTML注释消除模板空白 #

在文本前后添加注释，吃掉缩进和换行产生的空白，同时保留Prettier的格式化效果：

<div><!--
  -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
  pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
  dignissimos aliquam numquam voluptatibus qui dolores neque!<!--
--></div>

3. 短文本强制同行显示 #

针对testing这类短文本，调整Prettier配置让文本与标签同行：
在项目根目录的.prettierrc中添加规则：

{
  "htmlWhitespaceSensitivity": "strict",
  "printWidth": 120
}

htmlWhitespaceSensitivity: "strict"会让Prettier严格处理HTML空白，避免不必要的换行拆分。

4. 用<pre>配合样式保留格式（需保留换行时） #

如果需要保留文本的换行结构，同时去掉多余空格，可使用<pre>并重置默认样式：

<template>
  <pre class="clean-pre">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
dignissimos aliquam numquam voluptatibus qui dolores neque!</pre>
</template>

<style>
.clean-pre {
  margin: 0;
  padding: 0;
  white-space: pre-line; /* 保留换行，合并连续空白 */
  border: none;
  background: transparent;
}
</style>

原理说明 #

浏览器解析HTML时，会将连续的空白字符（空格、换行、制表符）合并为单个空格，Vue模板中的缩进和换行属于这类空白，因此会被渲染出来。上述方法分别通过直接绑定文本、消除模板空白、调整格式化规则或控制样式来规避这个问题。

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