如何配置Vue中ESLint的Mustache规则以调整模板代码格式

要实现你需要的格式转换，需配置eslint-plugin-vue中的几个核心规则，具体操作如下：

1. 确认依赖安装 #

确保项目已安装eslint-plugin-vue，未安装则执行：

npm install eslint-plugin-vue --save-dev
# 或
yarn add eslint-plugin-vue --dev

2. 添加规则配置 #

在项目的.eslintrc.js（或.eslintrc.json）中修改规则：

{
  "plugins": ["vue"],
  "rules": {
    // 强制Mustache插值与表达式无空格且在同一行
    "vue/mustache-interpolation-spacing": ["error", "never"],
    // 控制HTML标签内内容的缩进（根据项目缩进习惯调整数值）
    "vue/html-indent": ["error", 2, {
      "content": 4, // 标签内内容的缩进量，示例中8空格缩进可设为4（若基础缩进为2）
      "closeBracket": 0
    }],
    // 强制单行HTML元素的内容换行，避免插值与标签闭合符同行
    "vue/singleline-html-element-content-newline": ["error", {
      "ignoreWhenNoAttributes": false,
      "ignoreWhenEmpty": true,
      "ignores": ["pre", "textarea"] // 按需忽略不需要换行的元素
    }]
  }
}

规则说明 #

• vue/mustache-interpolation-spacing：设置为"never"后，会禁止{{与表达式、表达式与}}之间出现空格或换行，确保{{$t("common.back")}}在同一行。
• vue/html-indent：通过content选项控制标签内插值语句的缩进量，可根据项目基础缩进（2或4空格）调整数值，匹配目标格式的缩进要求。
• vue/singleline-html-element-content-newline：强制单行元素的内容换行，让<v-btn>的闭合符>后换行，插值语句单独占一行并缩进。

配置完成后，运行修复命令自动格式化代码：

npx eslint --fix src/目标组件文件.vue

内容的提问来源于stack exchange，提问作者Mehdi Torabi