如何配置Prettier使HTML属性始终换行（含单个属性）

Prettier原生的singleAttributePerLine选项确实只对多属性的HTML元素生效，没有直接配置项支持单属性也强制换行。不过可以通过以下两种方式实现需求：

• 自定义Prettier插件：
  你可以编写一个简单的Prettier插件，遍历HTML AST节点，当检测到元素只有单个属性时，手动将属性拆分为单独一行并调整缩进。核心思路是修改元素节点的格式输出逻辑，强制属性换行，不管属性数量多少。

• 结合ESLint规则（若项目使用ESLint）：
  如果项目中搭配了ESLint，可以结合eslint-plugin-prettier，或是借助html-eslint-parser编写自定义规则，检测单属性元素的格式并自动修复为属性换行的形式。不过这种方式需要额外配置ESLint，复杂度稍高。

以下是自定义插件的简化逻辑示例（伪代码）：

// 自定义插件核心逻辑
module.exports = {
  parsers: {
    html: require('prettier/parser-html'),
  },
  printers: {
    html: {
      print(path, options, print) {
        const node = path.getValue();
        if (node.type === 'Element' && node.attributes.length === 1) {
          // 强制拆分属性到新行并添加缩进
          const openingTag = [
            '<', node.name, '\n',
            options.indent, ' ', node.attributes[0].name, '=', '"', node.attributes[0].value, '"',
            '>\n', options.indent, ' ',
            print(path.get('children')),
            '\n', '</', node.name, '>'
          ].join('');
          return openingTag;
        }
        // 其他情况沿用原生Prettier逻辑
        return require('prettier/parser-html').printers.html.print(path, options, print);
      },
    },
  },
};

需要注意的是，自定义插件可能会和Prettier版本存在兼容性问题，需要随Prettier版本更新调整插件逻辑。

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