Prettier 格式化 Vue 模板时为什么缩进不对？

闲人志利提问于 2026-03-04 12:13:18 阅读 43

前端

我用 Prettier 格式化 Vue 文件，但模板部分的缩进总是乱的，明明配置了 tabWidth 为 2，可它还是用 4 个空格。试过重启编辑器、重装插件都没用。

这是我的组件代码：

<template>
    <div class="container">
        <h1>Hello World</h1>
    </div>
</template>

期望缩进是 2 个空格，但保存后变成 4 个，是我哪里配错了吗？

我来解答赞 8 收藏

反馈

1 条解答

爱学习的建宇 Lv1

这大概率是配置冲突或者编辑器插件抢了格式化的控制权。Vue 项目里这种情况太常见了，Vetur 或者 Volar 插件有时候会用自己的规则覆盖 Prettier，导致你配了半天也没用。

最稳妥的办法是在项目根目录建一个 .prettierrc 文件，把配置写死，别依赖编辑器设置。内容直接写 JSON：

{

  "tabWidth": 2,

  "useTabs": false,

  "semi": false,

  "singleQuote": true

}

建好之后去 VS Code 设置里搜一下 default formatter，确保 Vue 文件的默认格式化程序选的是 Prettier - Code formatter。如果你装了 Vetur，记得把它的 vetur.format.defaultFormatter.html 之类的选项关掉或者指向 Prettier，别让它自作主张。

还有个容易被忽略的坑是项目里的 .editorconfig 文件。如果这个文件存在且里面设置了 indent_size = 4，它会覆盖 Prettier 的设置，优先级很高，一定要检查一下。

从代码安全和规范的角度来看，光靠编辑器配置是不够的，万一有人没装插件或者配置不一样，提交上去的代码格式就乱了。建议你在 package.json 里加个 lint 脚本，或者用 husky 在 commit 阶段做一次格式化校验，强制统一缩进，避免代码风格不一致引发的合并冲突。

2026-03-04 15:06