Vue模板空格处理与Prettier全局配置技术咨询

解决方案 #

1. 优先调整Prettier配置，避免生成问题空白

这个方案不会改动Vue编译逻辑，只是让Prettier不再生成导致空格异常的换行缩进，是最推荐的方式。

在项目根目录的.prettierrc（或.prettierrc.json）中添加以下配置：

{
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": ["*.vue"],
      "options": {
        "parser": "vue"
      }
    }
  ]
}

htmlWhitespaceSensitivity: 'ignore'会让Prettier忽略HTML元素的空白敏感性，针对<li>这类元素，会自动把标签和文本放在同一行，避免生成多余的缩进空白，从根源上解决Vue编译后出现开头空格的问题。

2. 调整Vue编译选项，控制空白压缩

如果Prettier的配置无法满足需求，可以修改Vue的编译规则，但注意这个设置是全局生效的，可能影响其他布局。

Vue 2.7 配置

在vue.config.js中修改vue-loader的编译选项：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          // 保留元素内所有空白，不压缩为单个空格
          preserveWhitespace: true
          // Vue 2.7也支持Vue 3的whitespace选项，可尝试：
          // whitespace: 'preserve'
        }
        return options
      })
  }
}

Vue 3 配置（迁移后）

如果使用Vue CLI：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          whitespace: 'preserve'
        }
        return options
      })
  }
}

如果使用Vite：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ]
})

3. 折中方案：局部忽略特定列表的Prettier格式化

如果不想全局修改，可以在问题列表所在的<template>块添加忽略注释，跳过Prettier格式化：

<template>
  <!-- prettier-ignore -->
  <ul>
    <li>第一项内容</li>
    <li>第二项内容</li>
  </ul>
</template>

内容的提问来源于stack exchange，提问作者Gábor Kovács