Git提交时如何规范Vue组件的代码格式？

シ朝曦提问于 2026-02-24 03:29:19 阅读 32

前端

我们团队最近开始用ESLint + Prettier做代码规范，还配了commitlint和husky在提交前检查。但我发现有时候改了个Vue组件，本地跑npm run lint没问题，但CI还是报错说格式不对，特别是template里的缩进。

比如下面这段代码，我本地保存时自动格式化了，但提交后CI提示“Expected indentation of 4 spaces but found 2”：

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

是不是Prettier和ESLint对Vue模板的缩进规则冲突了？该怎么统一配置才能让本地和CI行为一致？

我来解答赞 20 收藏

反馈

2 条解答

❤景荣 Lv1

看起来确实是格式化工具之间的配置冲突问题。按规范来说，我们需要确保ESLint和Prettier对Vue模板的缩进规则保持一致。

首先检查 .prettierrc 文件，建议明确设置单行缩进为4个空格：

{

  "tabWidth": 4,

  "useTabs": false

}

然后在 .eslintrc.js 里针对 Vue 模板单独配置缩进规则：

module.exports = {

  // 其他配置...

  overrides: [

    {

      files: ['*.vue'],

      rules: {

        'vue/html-indent': ['error', 4]

      }

    }

  ]

}

最后别忘了在husky的pre-commit钩子里加入eslint --fix，确保提交前强制修复风格问题。这样本地和CI环境就能保持一致了。

其实这问题挺常见，不同工具默认配置确实容易打架。按照规范配置好了就省心多了，虽然花点时间调但值得。

2026-03-31 13:19

东方怡辰 Lv1

前端这块确实容易踩坑，尤其是Vue单文件组件里template的缩进问题，Prettier和ESLint默认配置不一致的话，本地跑得飞起，CI一提交就崩，挺烦人的。

核心问题出在Prettier和eslint-plugin-vue的缩进规则没对齐，Prettier默认用2空格缩进，但eslint-plugin-vue的vue/html-indent规则可能设成了4空格，结果就是你保存时Prettier按2空格格式化了，ESLint一校验就报错。

解决方案很简单，统一用Prettier来管缩进，ESLint只做逻辑检查，别让两个工具都管缩进。

具体操作：

先确保你用了 eslint-plugin-vue 的 vuejs-community/recommended 或 vuejs/eslint-plugin-vue/recommended 配置，然后在 .eslintrc.js 里把 vue/html-indent 关掉，改成让Prettier接管：

module.exports = {

  extends: [

    'plugin:vue/vue3-recommended',

    'prettier'

  ],

  rules: {

    'vue/html-indent': 'off', // 关掉ESLint对template缩进的检查

    'vue/script-indent': 'off' // 如果你用script块也想让Prettier管，一并关掉

  }

}

然后在 .prettierrc 或 package.json 里明确写死缩进为2空格（或者你团队统一的值）：

{

  "semi": false,

  "singleQuote": true,

  "tabWidth": 2,

  "useTabs": false,

  "trailingComma": "all",

  "printWidth": 100

}

最后别忘了在 lint-staged 里确保先跑Prettier再跑ESLint，顺序不能反，不然Prettier刚把缩进改好，ESLint又报错了：

{

  "*.{js,vue,ts}": [

    "prettier --write",

    "eslint --fix"

  ]

}

这样本地和CI行为就一致了，提交前自动格式化缩进，ESLint只负责检查语法和逻辑问题，不会在缩进上挑刺。我之前带团队就是这么搞的，一劳永逸，至少缩进这事儿再没出过岔子。

2026-02-24 04:03