Ace Editor Beautify扩展未按预期对HTML代码换行的问题求助

Hey Jon, 我看了你遇到的问题——用Ace Editor搭配Beautify扩展处理<div><ul><li>aaaaa</li></ul></div>时，没法得到带换行和空格的格式化结果，代码还是挤在一行。这事儿我之前也碰到过，大概率是两个原因：要么编辑器没正确识别HTML语言模式，要么Beautify的默认配置没开启换行相关的规则。

下面给你具体的解决步骤，亲测有效：

1. 先给Ace Editor指定HTML语言模式 #

Beautify需要知道当前编辑的是HTML文件，才能调用对应的格式化逻辑。你得在初始化编辑器时加上这行：

const editor = ace.edit("editor");
editor.session.setMode("ace/mode/html"); // 这步很关键，别漏了！

2. 自定义Beautify的HTML格式化配置 #

Beautify的默认HTML设置比较保守，不会强制给嵌套标签换行。你可以手动配置参数，让它按照你的需求格式化：

// 先获取Beautify扩展
const beautify = ace.require("ace/ext/beautify");

// 自定义格式化规则
const formatOptions = {
  html: {
    indent_size: 2,          // 缩进用2个空格
    indent_char: " ",        // 缩进字符选空格（也可以用\t）
    wrap_line_length: 0,     // 设置为0表示不限制行长度，强制给嵌套标签换行
    indent_inner_html: true, // 给内部标签加缩进
    preserve_newlines: true, // 保留原有换行（这里本来就是单行，影响不大）
    end_with_newline: true   // 格式化后结尾加个换行
  }
};

// 调用格式化
beautify.beautify(editor.session, formatOptions);

3. 确保在正确的时机调用格式化 #

比如你可以绑个按钮点击事件，触发格式化：

document.getElementById("beautifyBtn").addEventListener("click", () => {
  const beautify = ace.require("ace/ext/beautify");
  const formatOptions = {
    html: {
      indent_size: 2,
      wrap_line_length: 0,
      indent_inner_html: true
    }
  };
  beautify.beautify(editor.session, formatOptions);
});

这样配置后，你的目标HTML代码会被格式化成这种标准的缩进格式：

<div>
  <ul>
    <li>aaaaa</li>
  </ul>
</div>

（注：和你预期的<div> <ul> <li>aaaaa</li> </ul> </div>略有不同，这种缩进换行是更通用的HTML格式化规范，可读性更强；如果一定要每个标签后加空格再换行，可以把wrap_line_length设为1，不过这种格式其实很少用哦）

最后再确认下，你已经正确引入了Beautify的脚本文件，比如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ext-beautify.js"></script>

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