Vue项目中如何让</a>闭合标签同行、其余标签换行？解决ESLint冲突

方案1：精准配置ESLint的vue/html-closing-bracket-newline规则 #

在ESLint配置文件（.eslintrc.js或.eslintrc.json）中，修改规则配置，让多行属性的标签开始闭合符>与内容保持同行：

module.exports = {
  // ...其他配置
  rules: {
    // ...其他规则
    "vue/html-closing-bracket-newline": [
      "error",
      {
        singleline: "never",
        multiline: "never",
        // 可选：只针对特定行内标签生效，比如a、span等
        // ignoreTags: ['a', 'span', 'strong']
      }
    ],
    // 配合调整闭合括号间距，避免多余空格
    "vue/html-closing-bracket-spacing": ["error", {
      startTag: "never",
      endTag: "never",
      selfClosingTag: "always"
    }]
  }
};

方案2：协调ESLint与Prettier的配置冲突 #

如果同时使用Prettier，需确保两者规则对齐：

1. 安装eslint-config-prettier禁用冲突规则：

npm install eslint-config-prettier --save-dev

2. 在ESLint配置中引入该插件：

module.exports = {
  extends: [
    // ...其他继承规则（如plugin:vue/vue3-essential）
    "prettier" // 放在最后覆盖冲突规则
  ],
  // ...其他配置
};

3. 修改Prettier配置文件（.prettierrc或prettier.config.js）：

module.exports = {
  // ...其他配置
  htmlWhitespaceSensitivity: "ignore",
  bracketSameLine: true // 让多行属性标签的闭合符与内容同行
};

验证配置 #

运行ESLint修复命令测试效果：

npx eslint --fix src/**/*.vue

这样就能全局实现期望的a标签格式，无需逐行添加禁用注释。

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