当前位置： 文江博客话题详情

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

发布于 2024-12-26 16:12:30 字数 92 浏览 2 评论 0原文

我有一些格式不正确的 HTML 代码，我想重新格式化。是否有一个命令可以自动重新格式化 Sublime Text 2 中的 HTML 代码，使其看起来更好并且更易于阅读？

原文

I've got some poorly-formatted HTML code that I'd like to reformat. Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（17）

暮色兮凉城 2025-01-02 16:12:30

您不需要任何插件来执行此操作。
只需选择所有行 (CTRL+A)，然后从菜单中选择“编辑”→“行”→“重新缩进”。
如果您的文件使用包含 .html 或 .php 等 HTML 的扩展名保存，则此功能将起作用。

如果您经常这样做，您可能会发现此键映射很有用：

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

如果您的文件未保存（例如，您刚刚将片段粘贴到新窗口），您可以通过选择菜单“视图”→“语法”→ 手动设置缩进语言在选择重新缩进选项之前选择的语言。

You don't need any plugins to do this.
Just select all lines (CTRL+A) and then from the menu select Edit → Line → Reindent.
This will work if your file is saved with an extension that contains HTML like .html or .php.

If you do this often, you may find this key mapping useful:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

If your file is not saved (e.g. you just pasted in a snippet to a new window), you can manually set the language for indentation by selecting the menu View → Syntax → language of choice before selecting the reindent option.

回复 原文
笑看君怀她人 2025-01-02 16:12:30

在 Sublime 中格式化 HTML 的方法有六种左右。我已经测试了每个最流行的插件（请参阅我在博客上所做的文章< /a> 了解完整详细信息），但这里是一些最流行选项的快速概述：

Reindent 命令

优点：

  • 随 Sublime 一起提供，因此无需安装插件

缺点：

  • 不删除多余的空白行
  • 无法处理缩小的内容HTML，包含多个开放标签的行

Tag

优点：

  • 支持 ST2/ST3
  • 删除多余的空行
  • 无二进制依赖

项 缺点：

  • PHP 标签上的阻塞
  • 无法正确处理

HTMLTidy

优点：

  • 处理 PHP 标签
  • 一些调整格式的设置

缺点：

  • 需要 PHP（退回到 Web 服务）
  • 仅限 ST2
  • 已放弃？

HTMLBeautify

优点：

  • 支持 ST2/ST3
  • 简单且无二进制依赖性
  • 支持 OS X、Win 和 Linux

缺点：

  • 阻塞带有内联注释的一点
  • 不会扩展最小化或压缩的代码

HTML-CSS-JS Prettify

优点：

  • 支持 ST2/ST3
  • 处理 HTML、CSS、JS
  • 与 Sublime 菜单完美集成
  • 高度可定制的
  • 每个项目设置
  • 保存选项格式

缺点：

  • 需要 Node.js
  • 不需要非常适合嵌入式 PHP

哪一个最好？

HTML-CSS-JS Prettify 是我书中的获胜者。很多很棒的功能，没什么可抱怨的。

There are half a dozen or so ways to format HTML in Sublime. I've tested each of the most popular plugins (see the writeup I did on my blog for full details), but here's a quick overview of some of the most popular options:

Reindent command

Pros:

  • Ships with Sublime, so no plugin install needed

Cons:

  • Doesn't delete extra blank lines
  • Can't handle minified HTML, lines with multiple open tags
  • Doesn't properly format <script> blocks

Tag

Pros:

  • Supports ST2/ST3
  • Removes extra blank lines
  • No binary dependencies

Cons:

  • Chokes on PHP tags
  • Doesn't handle <script> blocks correctly

HTMLTidy

Pros:

  • Handles PHP tags
  • Some settings to tweak formatting

Cons:

  • Requires PHP (falls back to web service)
  • ST2 only
  • Abandoned?

HTMLBeautify

Pros:

  • Supports ST2/ST3
  • Simple and no binaray dependencies
  • Support for OS X, Win and Linux

Cons:

  • Chokes a bit with inline comments
  • Does not expand minimized or compressed code

HTML-CSS-JS Prettify

Pros:

  • Supports ST2/ST3
  • Handles HTML, CSS, JS
  • Great integration with Sublime's menus
  • Highly customizable
  • Per-project settings
  • Format on save option

Cons:

  • Requires Node.js
  • Not great for embedded PHP

Which is best?

HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.

回复 原文
清秋悲枫 2025-01-02 16:12:30

我能找到的唯一包是 Tag。

您可以使用包控件来安装它。 https://sublime.wbond.net

安装包控件后。转到包控制（首选项 -> 包控制），然后键入 install，按 enter。然后输入 tag 并按 enter。

安装 Tag 后，突出显示文本并按快捷键 Ctrl+Alt+F。

The only package I've been able to find is Tag.

You can install it using the package control. https://sublime.wbond.net

After installing package control. Go to package control (Preferences -> Package Control) then type install, hit enter. Then type tag and hit enter.

After installing Tag, highlight the text and press the shortcut Ctrl+Alt+F.

回复 原文
生来就爱笑 2025-01-02 16:12:30

我推荐这个插件：HTML/CSS/JS Prettify，它确实有效。

安装后，只需选择代码并按CTRL+SHIFT+H即可。

完毕！

I recommend this plugin: HTML/CSS/JS Prettify, It really works.

After the installation, just select the code and press CTRL+SHIFT+H.

Done!

回复 原文
忱杏 2025-01-02 16:12:30

只是一般提示。我自动整理 HTML 的方法是安装 HTML_Tidy 包，然后将以下键绑定添加到默认设置（我使用的）：

{ "keys": ["enter"], "command": "html_tidy" },

这会在每次输入时运行 HTML Tidy。这可能有缺点，我自己对 Sublime 还很陌生，但它似乎做了我想要的:)

Just a general tip. What I did to auto-tidy up my HTML, was install the package HTML_Tidy, and then add the following keybinding to the default settings (which I use):

{ "keys": ["enter"], "command": "html_tidy" },

this runs HTML Tidy with every enter. There may be drawbacks to this, I'm quite new to Sublime myself, but it seems to do what I want :)

回复 原文
自在安然 2025-01-02 16:12:30

尽管问题是针对 HTML 的，但我还想提供有关如何为 Sublime Text 2 自动格式化 Javascript 代码的信息；

您可以选择所有代码 (CTRL+A) 并使用应用内功能重新缩进(Edit -> Line -> Reindent），或者如果您想对如何将代码格式化为更多可自定义的设置，您可以使用 Sublime Text 2 的 JsFormat 格式化插件除了Sublime Text 的默认制表符/缩进设置。

https://github.com/jdc0589/JsFormat

您可以轻松安装JsFormat使用包控制（首选项 -> 包控制）打开包控制，然后键入 install，按 ENTER。然后输入 js format 并按 ENTER，就完成了。
（包控制器将在 Sublime 的左下栏显示安装成功和错误的状态）

将以下行添加到您的键绑定中（Preferences -> 按键绑定用户）

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

我正在使用CTRL+ALT+2，您可以随意更改此快捷键想要。到目前为止，JsFormat是一个不错的插件，值得尝试！

希望这会对某人有所帮助。

Altough the question is for HTML, I would also additionally like to give info about how to auto-format your Javascript code for Sublime Text 2;

You can select all your code(CTRL+A) and use the in-app functionality, reindent(Edit -> Line -> Reindent) or you can use JsFormat formatting plugin for Sublime Text 2 if you would like to have more customizable settings on how to format your code to addition to the Sublime Text's default tab/indent settings.

https://github.com/jdc0589/JsFormat

You can easily install JsFormat with using Package Control (Preferences -> Package Control) Open package control then type install, hit ENTER. Then type js format and hit ENTER, you're done.
(The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime)

Add the following line to your key bindings (Preferences -> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

I'm using CTRL+ALT+2, you can change this shortcut key whatever you want to. So far, JsFormat is a good plugin, worth to try it!

Hope this will help someone.

回复 原文
傲娇萝莉攻 2025-01-02 16:12:30

对我来说，HTML Prettify 解决方案非常简单。我访问了 HTML Prettify 页面。

  1. 需要 Sublime Package Manager 按照
  2. 安装包管理器的说明进行操作
  3. 此处输入的 CMD+SHIFT+P 调出菜单
  4. 键入 prettify
  5. 选择 Boom菜单中的 HTML prettify 选择

。完毕。看起来很棒

For me, the HTML Prettify solution was extremely simple. I went to the HTML Prettify page.

  1. Needed the Sublime Package Manager
  2. Followed the Instructions for installing the package manager here
  3. typed CMD+SHIFT+P to bring up the menu
  4. Typed prettify
  5. Chose the HTML prettify selection in the menu

Boom. Done. Looks great

回复 原文
远山浅 2025-01-02 16:12:30

有一个名为 SublimeHtmlTidy 的插件，效果非常好

https://github.com/welovewordpress/SublimeHtmlTidy

There's a plugin called SublimeHtmlTidy which works pretty well

https://github.com/welovewordpress/SublimeHtmlTidy

回复 原文
慢慢从新开始 2025-01-02 16:12:30

只需转到

编辑 ->标签->文档上的自动格式标记

Simply go to

Edit -> Tag -> Auto-format tags on document

回复 原文
瑶笙 2025-01-02 16:12:30

我认为这就是您正在寻找的：

https://github.com/victorporof/Sublime-HTMLPrettify< /a>

I think this is what you're looking for:

https://github.com/victorporof/Sublime-HTMLPrettify

回复 原文
病毒体 2025-01-02 16:12:30

我创建了一个名为 HTMLBeautify 的包，它在重新格式化 HTML 方面做得很好。我将它基于我在 1997 年发现的 Perl 脚本 - 我对其进行了更新以适用于所有新的现代标签。 :)

看看并让我知道你的想法！

https://github.com/rareyman/HTMLBeautify

I created a Package called HTMLBeautify that does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. :)

Check it out and let me know what you think!

https://github.com/rareyman/HTMLBeautify

回复 原文
橘香 2025-01-02 16:12:30

我还没有发表评论的权限，所以这只是与@peter的答案上述答案相关的附加信息。

我发现如果 IE 条件注释 中的 HTML 未按预期对齐标头不完全内联，例如向左齐平：

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I am yet to have the privilege to comment so this is simply additional information related to @peter's answer above answer.

I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
回复 原文
德意的啸 2025-01-02 16:12:30

有一个很好的开源 CodeFormatter 插件，它（连同重新缩进）可以美化脏代码，甚至可以美化所有脏代码它是单行的。

There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.

回复 原文
[旋木] 2025-01-02 16:12:30

我使用 tidy 和自定义构建系统来美化 HTML。

我的 Packages/User/ 目录中有 HTMLTidy.sublime-build ：

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

同一目录中有 tidy_config.cfg 文件：

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

只需选择构建系统并按 CTRL+B 或CMD+B 重新格式化文件内容。一个小问题是 ST2 不会自动重新加载文件，因此要查看结果，您必须切换到其他文件并返回（或切换到其他应用程序并返回）。

在 Mac 上，我使用 macports 来安装 tidy，在 Windows 上，您必须自己下载它并在构建系统中指定 tidy 所在的工作目录：

"working_dir": "c:\\HTMLTidy\\"

或将其添加到 PATH 中。

I'm using tidy together with custom build system to prettify HTML.

I have HTMLTidy.sublime-build in my Packages/User/ directory:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

and tidy_config.cfg file in the same directory:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

And just select build system and press CTRL+B or CMD+B to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).

On Mac I've used macports to install tidy, on Windows you'd have to download it yourself and specify working directory in the build system, where tidy is located:

"working_dir": "c:\\HTMLTidy\\"

or add it to the PATH.

回复 原文
时光瘦了 2025-01-02 16:12:30

您可以轻松设置快捷键F12！！！

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

请参阅此处详细信息。

you can set shortcut key F12 easy!!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

see detail here.

回复 原文
简单气质女生网名 2025-01-02 16:12:30

HTML-CSS-JS Prettify - 毫无疑问是最好的。

  1. 安装 Package Control
  2. ⌘ + left shift + p （或 ctrl + alt + left shift + p）->包控制：安装包
  3. 输入HTML-CSS-JS Prettify
  4. 安装节点
  5. 重新启动Sublime Text

Enjoy。

HTML-CSS-JS Prettify - Hands down the best.

  1. Install Package Control
  2. ⌘ + left shift + p (or ctrl + alt + left shift + p) -> Package Control: Install Package
  3. Enter HTML-CSS-JS Prettify
  4. Install node
  5. Restart Sublime Text

Enjoy.

回复 原文
十雾 2025-01-02 16:12:30

考虑使用 JsPrettier，它是 更漂亮。 Prettier 是一种广泛使用和积极开发的现代代码格式化程序。除了 HTML 之外，它还支持很多其他语言。需要 JavaScript 运行时才能运行（Node.js 或 德诺）。

Consider using JsPrettier, which is a front end for Prettier. Prettier is a modern code formatter widely used and actively developed. Besides HTML, it supports a whole lot of other languages. JavaScript runtime is required for it to run (Node.js or Deno).

回复 原文
~没有更多了~

关于作者

素年丶

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卖梦商人

文章 0 评论 0

聊慰

文章 0 评论 0

再可℃爱ぅ一点好了

文章 0 评论 0

内心荒芜

文章 0 评论 0

mb_vBKS9whW

文章 0 评论 0

俯瞰星空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文