vue/singleline-html-element-content-newline如何针对文本节点配置免换行校验

方案1（最优解）：升级 eslint-plugin-vue 到 v9.14.0 及以上版本 #

该版本的 vue/singleline-html-element-content-newline 规则新增了ignoreTextOnly配置项，专门适配仅包含文本节点的元素场景，无需额外忽略组件，配置如下：

// .eslintrc 规则配置
rules: {
  'vue/singleline-html-element-content-newline': ['error', {
    ignoreTextOnly: true
  }]
}

配置生效后，只要元素的直接子节点只有纯文本，无论元素是否携带属性，都不会强制要求内容换行，完全匹配你预期的格式化效果，同时不会影响多子节点、子节点为组件/元素的场景校验。

方案2：搭配 Prettier 格式化的场景 #

如果你的项目已经接入 Prettier 做统一格式化，可直接关闭这条 ESLint 规则，用 Prettier 的 HTML 换行逻辑管控：

rules: {
  'vue/singleline-html-element-content-newline': 'off'
}

Prettier 默认会对仅包含短文本的带属性行内元素做同行处理，同时会自动过滤掉多余的换行缩进字符，和你期望的输出结果一致。

方案3：低版本依赖临时适配方案 #

如果暂时无法升级 eslint-plugin-vue 版本，可以在共用配置里统一维护原生行内元素忽略列表，不需要各项目单独添加自定义组件：

rules: {
  'vue/singleline-html-element-content-newline': ['error', {
    ignores: ['span', 'a', 'strong', 'em', 'b', 'i', 'u', 's', 'sup', 'sub', 'button']
  }]
}

自定义行内组件可以通过 ESLint 配置的 globals 字段全局注册到共用配置中，避免各项目单独配置导致的不一致问题。

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