如何使用Sublime Text 2重新格式化HTML代码？

作者: 真不错
发布时间: 2025-02-07 06:37:48 (1月前)
转自：

15 条回复

0#
回复此人
Ni | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是一般提示。我自动整理HTML的做法是安装包HTML_Tidy，然后将以下键绑定添加到默认设置（我使用）： </p> <pre> <code> { "keys": ["enter"], "command": "html_tidy" }, </code> </pre> <P> 每次输入都会运行HTML Tidy。这可能有弊端，我对Sublime自己很新，但似乎做了我想要的:) </p> </DIV>

编辑
1#
回复此人
流浪海。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我创建了一个名为的包的<strong> HTMLBeautify </强> 这在重新格式化HTML方面做得不错。我的基础是我在1997年发现的Perl脚本 - 更新它以使用所有新的现代标签。 :) </p> <P> 看看它，让我知道你的想法！ </p> <P> <a href="https://github.com/rareyman/HTMLBeautify" rel="noreferrer"> https://github.com/rareyman/HTMLBeautify </A> </p> </DIV>

编辑
2#
回复此人
WL | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有一个名为SublimeHtmlTidy的插件非常好用 </p> <P> <a href="https://github.com/welovewordpress/SublimeHtmlTidy" rel="noreferrer"> https://github.com/welovewordpress/SublimeHtmlTidy </A> </p> </DIV>

编辑
3#
回复此人
部落用户 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对我来说， <code> HTML Prettify </code> 解决方案非常简单。我去了 <a href="https://github.com/victorporof/Sublime-HTMLPrettify" rel="noreferrer"> HTML Prettify页面 </A> 。 </p> <OL> <LI> 需要的 <code> Sublime Package Manager </code> </LI> <LI> 按照安装包管理器的说明进行操作 <a href="https://sublime.wbond.net/installation" rel="noreferrer"> 这里 </A> </LI> <LI> 类型 <KBD> cmd + shift + p </KBD> 调出菜单 </LI> <LI> 类型化 <code> prettify </code> </LI> <LI> 选择 <code> HTML prettify </code> 菜单中的选择 </LI> </醇> <P> 繁荣。完成。看起来很棒 </p> </DIV>

编辑
4#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我还没有权利发表评论，所以这只是与@ peter相关的其他信息 <a href="https://stackoverflow.com/a/10888837/409023"> 回答 </A> 以上回答。 </p> <P> 如果IE，我发现HTML没有像预期的那样对齐 <a href="http://webdesign.about.com/cs/htmltags/a/aacommentsie.htm" rel="nofollow noreferrer"> 条件评论 </A> 标题中没有完全符合标题的内容，例如向左冲： </p> <pre> <code>    </code> </pre> </DIV>

编辑
5#
回复此人
雪浴冰灵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 简单地说吧 </p> <P> 编辑 - ＆gt;标签 - ＆gt;文档上的自动格式标记 </p> </DIV>

编辑
6#
回复此人
烏鴉喝酒 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在Sublime中有六种左右格式化HTML的方法。我测试了每个最流行的插件（参见 <a href="http://sublimetexttips.com/formatting-html-with-sublime-text/"> 我在博客上写的那篇文章 </A> 有关详细信息），但这里是一些最受欢迎的选项的快速概述： </p> <H2> 重新命令 </H2> <P> 优点： </p> <UL> <LI> 使用Sublime发货，因此无需安装插件 </LI> </UL> <P> 缺点： </p> <UL> <LI> 不删除额外的空行 </LI> <LI> 无法处理缩小的HTML，具有多个打开标记的行 </LI> <LI> 格式不正确 <code> <script> </code> 块 </LI> </UL> <H2> <a href="https://github.com/SublimeText/Tag"> 标签 </A> </H2> <P> 优点： </p> <UL> <LI> 支持ST2 / ST3 </LI> <LI> 删除多余的空白行 </LI> <LI> 没有二进制依赖 </LI> </UL> <P> 缺点： </p> <UL> <LI> PHP标签上的扼流圈 </LI> <LI> 不处理 <code> <script> </code> 正确阻止 </LI> </UL> <H2> <a href="https://github.com/welovewordpress/SublimeHtmlTidy"> HTMLTidy </A> </H2> <P> 优点： </p> <UL> <LI> 处理PHP标签 </LI> <LI> 一些调整格式的设置 </LI> </UL> <P> 缺点： </p> <UL> <LI> 需要PHP（回退到Web服务） </LI> <LI> 仅限ST2 </LI> <LI> 弃？ </LI> </UL> <H2> <a href="https://github.com/rareyman/HTMLBeautify"> HTMLBeautify </A> </H2> <P> 优点： </p> <UL> <LI> 支持ST2 / ST3 </LI> <LI> 简单而且没有binaray依赖 </LI> <LI> 支持OS X，Win和Linux </LI> </UL> <P> 缺点： </p> <UL> <LI> 使用内联注释略微扼杀 </LI> <LI> 是否扩展最小化/压缩代码 </LI> </UL> <H2> <a href="https://github.com/victorporof/Sublime-HTMLPrettify"> HTML-CSS-JS Prettify </A> </H2> <P> 优点： </p> <UL> <LI> 支持ST2 / ST3 </LI> <LI> 处理HTML，CSS，JS </LI> <LI> 与Sublime菜单的完美整合 </LI> <LI> 高度可定制 </LI> <LI> 每个项目设置 </LI> <LI> 保存选项格式 </LI> </UL> <P> 缺点： </p> <UL> <LI> 需要Node.js </LI> <LI> 对嵌入式PHP不太好 </LI> </UL> <H2> 哪个最好？ </H2> <P> HTML-CSS-JS Prettify是我书中的赢家。很多很棒的功能，没什么可抱怨的。 </p> </DIV>

编辑
7#
回复此人
Hey ou | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我推荐这个插件： <a href="https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify" rel="noreferrer"> HTML / CSS / JS Prettify </A> ，真的行。 </p> <P> 安装完成后，只需选择代码并按 <KBD> 按Ctrl + Shift + H </KBD> 。 </p> <P> 完成！ </p> </DIV>

编辑
8#
回复此人
你咖喱人biss嗷 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我能找到的唯一包装是 <a href="https://github.com/SublimeText/Tag" rel="noreferrer"> 标签 </A> 。 </p> <P> 您可以使用包控件安装它。 <a href="https://sublime.wbond.net" rel="noreferrer"> https://sublime.wbond.net </A> </p> <P> 安装包控件后。转到包裹控制（ <EM> 喜好 </EM> - ＆GT; <EM> 包装控制 </EM> ）然后键入 <code> install </code> ，打 <KBD> 输入 </KBD> 。然后输入 <code> tag </code> 并击中 <KBD> 输入 </KBD> 。 </p> <P> 安装标签后，突出显示文本并按快捷方式 <KBD> 按Ctrl </KBD> + <KBD> Alt键 </KBD> + <KBD> F </KBD> 。 </p> </DIV>

编辑
9#
回复此人
时间 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 有一个很好的开源 <a href="https://github.com/akalongman/sublimetext-codeformatter" rel="noreferrer"> CodeFormatter插件 </A> ，（沿着reindenting）可以美化脏代码甚至所有它都是单行。 </p> </DIV>

编辑
10#
回复此人
猫南北 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想这就是你要找的东西： </p> <P> <a href="https://github.com/victorporof/Sublime-HTMLPrettify" rel="noreferrer"> https://github.com/victorporof/Sublime-HTMLPrettify </A> </p> </DIV>

编辑
11#
回复此人
一号位 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以设置快捷键 <KBD> F12 </KBD> 简单！！！ </p> <pre> <code> { "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } } </code> </pre> <P> 看细节 <a href="http://how-to-sublime-text.blogspot.com/2014/11/reformat-code.html" rel="nofollow noreferrer"> 这里 </A> 。 </p> </DIV>

编辑
12#
回复此人
威斯特 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我正在使用 <a href="http://tidy.sourceforge.net/" rel="nofollow"> 整洁 </A> 与自定义构建系统一起来美化HTML。 </p> <P> 我在Packages / User /目录中有HTMLTidy.sublime-build： </p> <pre> <code> { "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"] } </code> </pre> <P> 和tidy_config.cfg文件在同一目录中： </p> <pre> <code> indent: auto tab-size: 4 show-warnings: no write-back: yes quiet: yes indent-cdata: yes tidy-mark: no wrap: 0 </code> </pre> <P> 然后选择构建系统并按 <KBD> CTRL </KBD> + <KBD> b </KBD> 要么 <KBD> CMD </KBD> + <KBD> b </KBD> 重新格式化文件内容。一个小问题是ST2不会自动重新加载文件，以便查看您必须切换到其他文件并返回（或其他应用程序和返回）的结果。 </p> <P> 在Mac上我使用macports来安装整洁，在Windows上你必须自己下载它并在构建系统中指定工作目录，其中tidy位于： </p> <pre> <code> "working_dir": "c:\\HTMLTidy\\" </code> </pre> <P> 或将其添加到PATH。 </p> </DIV>

编辑
13#
回复此人
纾潆锦袖迷子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你不需要任何插件来做到这一点。只需选择所有行（ <KBD> 按Ctrl </KBD> <KBD> 一个 </KBD> ）然后从菜单中选择编辑鈫鈫Line鈫鈫Reindent。如果您的文件使用包含HTML的扩展名保存，则此功能将起作用 <code> .html </code> 要么 <code> .php </code> 。 </p> <P> 如果经常这样做，您可能会发现此键映射很有用： </p> <pre> <code> { "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } } </code> </pre> <P> 如果您的文件未保存（例如，您只是将代码段粘贴到新窗口中），则可以通过选择菜单查看鈫鈫语法鈫鈫手动设置缩进语言。 <code> language of choice </code> 在选择reindent选项之前。 </p> </DIV>

编辑

登录后才能参与评论