如果我理解正确的话，js-beautify 在确定要包装的内容时所采用的整个方法在概念上是被破坏的。
假设我有以下 HTML：
<li>Install at least one Git client. <span class="tip">Recommended: <a
href="https://www.sourcetreeapp.com/">SourceTree</a> (Windows, Mac)</span>all Git commands.</li>
注意<a>标签属性中的所有空格和换行符。 如果我把span作为unformatted元素之一，那么 js-beautify 不会改变任何东西！ 它留下了所有丑陋的空白！
另一方面，如果我从unformatted元素中删除span ，那么 js-beautify 会给我这个：
<li>Install at least one Git client.
<span class="tip">Recommended: <a href="https://www.sourcetreeapp.com/">SourceTree</a> (Windows, Mac)</span>all Git commands.</li>
请注意，js-beautify 现在在<span>之前添加了一个换行符！ 这也是完全不正确的--- <span>是一个内联短语元素，这里没有必要中断。
问题似乎是 js-beautify 使用“未格式化”的想法等同于“内联”元素。 这是错误的方法，与 HTML/CSS 语义不匹配！！ 块与内联的想法与是否应该包装元素完全正交。
js-beautify 应该确定一个元素是块还是内联。 块元素之前应该有换行符； 内联元素不应该。
“未格式化”的概念是一个独特的概念； 它应该告诉 js-beautify 不理会它，不管元素是块元素还是内联元素。
就像现在一样，没有办法告诉 js-beautify 一个元素应该_not_有一个换行符，但它的内容应该被格式化。
整个设计都被打破了。 请解决这个基本问题。 （或者向我解释我错了，并且 js-beautify 没有混淆“块/内联”和“格式化/未格式化”的概念。）
garretwilson
所有6条评论
你关于它应该如何工作的建议听起来很合理。 请列出哪些元素应该是内联的，哪些应该是未格式化的。 然后请实施并提交拉取请求。
bitwiseman
于 2016-01-14
我不确定你是否明白我在说什么。 所有元素都应该格式化！ 只是有些是内联的，有些是块元素。 这就是几十年来 XML/HTML/CSS 的情况。
如果它是一个块元素，那么它会在视觉上创建一个新块。 这些东西，在格式化 HTML 源代码时，几乎总是在它们之前有一个换行符（在源代码和渲染中）。 内联元素之前没有换行符（在源代码和显示中）。 但这并不意味着它的 _contents_ 不应该被格式化。 （这_确实_意味着它的内容不应该添加换行符，但是，除非您要换行。）
所以这不是一个调整。 这是对 js-beautify 用于格式化的整个范式的认可。 （我不是刻薄——我只是客观，并试图通过解释来帮助你。）你需要区分三个不同的事情：
- “格式化” - 此元素是否格式化？ （默认情况下，所有元素都应该格式化，除非有人将其关闭。）
- “块/显示” - 这是块还是显示元素？ 如果是块元素，在开始标签前应该有一个换行符_prepended_，并且应该缩进到当前的缩进级别。 如果没有，它前面应该没有换行符。
- “容器” - 这个东西通常只用于包含其他块元素吗？ 如果是这样，那么应该在开始标记之后、结束标记之后生成换行符，并且内容应该在新的缩进级别缩进。 这是最有争议的，也就是说，这将根据用户的口味而有所不同。 一个明显的候选者是
<ul>； 它的内容（例如<li>）应该缩进。 有些人会想要将<p>添加到此列表中，以便<p>标签位于不同的行中。 其他人（例如我）不希望它们在单独的行中。
我建议您查看 CSS 盒模型并了解块与内联的工作原理。 然后重写 js-beautify HTML 格式化逻辑，考虑到 CSS 框模型（因为源代码应该反映最终将如何完成渲染）。
默认情况下，不应“未格式化”。 一切都应该格式化——只是适当地格式化。 “未格式化”应该是用户说“嘿，我不喜欢 js-beautify 正在做的事情，所以不要碰这个元素，让我来处理它”的最后手段设置。
garretwilson
于 2016-01-14
PS 我已经在#840 中为您提供了一个开始，说明了什么构成了 HTML5 中的内联元素。 不过，我现在没有时间重写整个格式化引擎。 如果我有那个时间，我自己写会更有效率。 因此，与此同时，我正在努力帮助您，以便您可以使自己的工作正常进行，这对我们双方都是最好的。 祝你好运，让我知道我可以提供哪些进一步的信息。
garretwilson
于 2016-01-14
我完全理解你最初说的话。 您认为 html 美化器中存在错误。 您想将其描述为“js-beautify 用于格式化 [html] 的整个范式已损坏”。 我没有设计或实现 html 美化模块，在我作为这个项目的维护者的时间里，它的改进最少。 它绝对需要注意和大量的返工，CSS 美化器也是如此。
然而，尽管存在缺陷，html 美化器确实以一种相当可通过的方式做一些事情。 我质疑你的评估，特别是处理 #840 需要“重写”或改变“范式”。 它是与其他任何增强一样的增强。 可能有很多方法可以实现它，从丑陋的黑客技术到完全重新设计和重写。
无论范围如何，我认为您所描述的更改最终都是值得做的，但我已经有了一个相当大的具体、详细描述、需求量很大的错误修复和对项目具有总体更高优先级的功能的列表。 我必须在这些项目上花费我在这个项目上的很少时间。 如果您真的认为现在值得修复，您将需要花时间这样做。 我欢迎拉取请求。
bitwiseman
于 2016-01-14
您认为 html 美化器中存在错误。
不，我是说没有办法告诉 js-beautify 不要在 _before_ 元素之前放置换行符，而同时告诉 js-beautify 不要在 _inside_ 元素中设置任何格式。 这是真的还是假的？
您想将其描述为“js-beautify 用于格式化 [html] 的整个范式已损坏”。
如果 js-beautify 不知道“不能在它们之前添加换行符的东西”和“我必须完全忽略的东西”之间的区别，那么是的，它的范式即使是简单的 HTML 也是不够的。 毕竟，我不想在<dfn>之前换行（因为这是一个内联元素），但是如果<dfn>包含一个<img> ，我不想要js-beautify 放弃格式化<img>标签。 （这是一个人为的例子；它适用于任何内嵌图像。）
所以你告诉我。 js-beautify 可以在<img>内格式化<dfn>而不在<dfn>之前放置换行符吗？
我所说的重点是“不要格式化此元素的内容”与“不要在此元素之前放置换行符”不同。 所以让我再问你一次。 js-beautify 是否理解这两者之间的区别，还是将这些概念混为一谈？ 如果它不理解差异，它的基本模型就被破坏了。
但可以肯定的是，有时您可以解决基本缺陷。 所以我回来再次问你：我将如何解决这个缺陷？ 我如何告诉 js-beautify 不要在<code>之前放置换行符，而是仍然在<code>格式化<img>元素？
garretwilson
于 2016-01-16
@garretwilson这在1.8.0-rc2 中可用。
bitwiseman
于 2018-07-08
相关问题
chaenu
·
5评论
sebRomeo
·
4评论
aeschli
·
3评论
gabrielmaldi
·
3评论
Gennady-G
·
4评论
最有用的评论
我不确定你是否明白我在说什么。 所有元素都应该格式化！ 只是有些是内联的，有些是块元素。 这就是几十年来 XML/HTML/CSS 的情况。
如果它是一个块元素，那么它会在视觉上创建一个新块。 这些东西，在格式化 HTML 源代码时，几乎总是在它们之前有一个换行符（在源代码和渲染中）。 内联元素之前没有换行符（在源代码和显示中）。 但这并不意味着它的 _contents_ 不应该被格式化。 （这_确实_意味着它的内容不应该添加换行符，但是，除非您要换行。）
所以这不是一个调整。 这是对 js-beautify 用于格式化的整个范式的认可。 （我不是刻薄——我只是客观，并试图通过解释来帮助你。）你需要区分三个不同的事情：
<ul>； 它的内容（例如<li>）应该缩进。 有些人会想要将<p>添加到此列表中，以便<p>标签位于不同的行中。 其他人（例如我）不希望它们在单独的行中。我建议您查看 CSS 盒模型并了解块与内联的工作原理。 然后重写 js-beautify HTML 格式化逻辑，考虑到 CSS 框模型（因为源代码应该反映最终将如何完成渲染）。
默认情况下，不应“未格式化”。 一切都应该格式化——只是适当地格式化。 “未格式化”应该是用户说“嘿，我不喜欢 js-beautify 正在做的事情，所以不要碰这个元素，让我来处理它”的最后手段设置。