JS-Beautify 项目中 Angular 模板格式化问题解析

问题背景

在 JS-Beautify 项目中，当使用 Angular 模板功能格式化包含 <style> 和 <script> 标签的 HTML 文件时，出现了格式化不正确的问题。这个问题特别影响到了媒体查询和装饰器的代码格式。

问题表现

在格式化过程中，主要出现了以下两类问题：

1. 样式标签问题：<style> 标签内的媒体查询和 CSS 规则没有被正确缩进，且某些 CSS 属性被错误地换行
2. 脚本标签问题：<script> 标签内的装饰器和函数体缩进不一致

技术分析

这个问题源于 JS-Beautify 对 Angular 模板处理逻辑的实现方式。当前实现中：

1. 控制流标记（如 @if）的缩进依赖于 indent_handlebars 选项
2. 对于 <style> 和 <script> 标签内的内容，格式化逻辑没有充分考虑 Angular 特有的语法结构

解决方案

经过技术分析，决定采用以下改进方案：

1. 移除 indent_handlebars 条件依赖：当启用 Angular 模板功能时，控制流标记应始终进行缩进处理
2. 增强标签内容识别：改进对 <style> 和 <script> 标签内特殊语法（如装饰器、媒体查询）的处理逻辑

实现细节

改进后的格式化逻辑将：

1. 统一处理 Angular 控制流结构的缩进，不再依赖额外选项
2. 正确识别并保留装饰器语法（如 @log）的结构
3. 完善对 CSS 媒体查询和规则集的格式化处理
4. 确保函数体内部的代码保持一致的缩进级别

对开发者的影响

这一改进将使开发者能够：

1. 获得更一致的 Angular 模板格式化体验
2. 减少手动调整格式的工作量
3. 在样式和脚本标签中获得预期的格式化结果
4. 无需额外配置即可获得合理的控制流缩进

总结

JS-Beautify 对 Angular 模板支持的这一改进，解决了长期存在的样式和脚本标签格式化问题，为开发者提供了更可靠的工具支持。这一变更也体现了项目对现代前端开发工作流的持续优化。