Prettier 插件不格式化 Vue 单文件组件里的 script 部分怎么办？

Designer°利利提问于 2026-03-25 10:00:20 阅读 19

工具

我装了 Prettier 和 @prettier/plugin-pug、prettier-plugin-vue 这些插件，但保存时 Vue 文件里的 script 代码还是没被格式化，template 和 style 可以正常格式化。这是我的测试代码：

export default {
  name: 'TestComponent',
data() {
return { msg: "hello" };
}
}

已经确认 .prettierrc 里配置了 vueIndentScriptAndStyle: true，也重启过编辑器，但 script 里的缩进和引号就是不按规则处理，到底漏了哪一步？

我来解答赞 5 收藏

反馈

1 条解答

Mr-思捷 Lv1

直接用这个配置试试，确保 prettier 能识别 vue 文件并且正确格式化 script 部分

prettier.config.js

module.exports = {

  semi: false,

  singleQuote: true,

  vueIndentScriptAndStyle: true,

  overrides: [

    {

      files: '*.vue',

      options: {

        parser: 'vue'

      }

    }

  ]

}

还有检查下你的编辑器设置，确保它使用 prettier 格式化工具，并且对 vue 文件启用了格式化功能。有时候编辑器插件需要手动配置一下。

2026-03-25 10:08