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

html HTML

GO飞云

2020-03-13

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

第1570篇《如何使用Sublime Text 2重新格式化HTML代码?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
Pro老丝 2020.03.13

您可以设置快捷键F12容易!!!

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

在这里查看详细信息

神乐Green 2020.03.13

有一个不错的开源CodeFormatter插件,它(以及重新缩进)可以美化脏代码,即使所有代码都在一行中。

阿飞Harry小胖 2020.03.13

我正在使用整洁的自定义构建系统来美化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+ bcmd+ b重新格式化文件内容即可。一个小问题是ST2不会自动重新加载文件,因此要查看结果,您必须切换到其他文件(或切换到其他应用程序)。

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

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

或将其添加到PATH。

西里神奇 2020.03.13

我认为这是您要寻找的:

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

Green逆天 2020.03.13

对我来说,HTML Prettify解决方案非常简单。我去了HTML Prettify页面

  1. 需要 Sublime Package Manager
  2. 按照此处的说明安装软件包管理器
  3. 输入cmd + shift + p以调出菜单
  4. 已输入 prettify
  5. HTML prettify在菜单中选择选择

繁荣。做完了 看起来很棒

神乐古一 2020.03.13

我创建了一个名为HTMLBeautify的程序包,该程序可以很好地重新格式化HTML。我以1997年发现的Perl脚本为基础,对它进行了更新,使其可以与所有新的有尖齿的现代标签一起使用。:)

检查一下,让我知道您的想法!

https://github.com/rareyman/HTMLBeautify

小小 2020.03.13

只需转到

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

老丝村村 2020.03.13

有一个名为SublimeHtmlTidy的插件,可以很好地工作

https://github.com/welovewordpress/SublimeHtmlTidy

小宇宙Sam 2020.03.13

尽管问题是针对HTML的,但我还要另外提供有关如何自动格式化Sublime Text 2的Javascript代码的信息

您可以选择所有代码(ctrl+ A)并使用应用程序内功能reindent(Edit-> Line-> Reindent),也可以使用JsFormat格式化插件,Sublime Text 2以获取关于如何格式化代码的更多自定义设置。 Sublime Text的默认选项卡/缩进设置。

https://github.com/jdc0589/JsFormat

您可以使用程序包控制(-> 轻松安装JsFormat打开程序包控制,然后输入install,hit然后输入并点击,完成。(软件包控制器将在的左下角显示安装状态以及成功和错误PreferencesPackage Controlenterjs formatenterSublime

将以下行添加到您的键绑定(Preferences-> Key Bindings User

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

我使用的是ctrl+ alt+ 2,您可以根据需要更改此快捷键。到目前为止,JsFormat是一个不错的插件,值得尝试!

希望这会帮助某人。

Tom神奇 2020.03.13

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

安装后,只需选择代码,然后按Ctrl+Shift+H

做完了!

凯ANear 2020.03.13

只是一般提示。我要做的是自动整理HTML,安装了软件包HTML_Tidy,然后将以下按键绑定添加到默认设置(我使用的是):

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

每次输入都会运行HTML Tidy。这样做可能有缺点,我对Sublime还是很陌生,但似乎可以满足我的要求:)

阳光Tom逆天 2020.03.13

我唯一能找到的包是Tag

您可以使用程序包控件进行安装。https://sublime.wbond.net

安装程序包控件后。转到程序包控制(“首选项” ->“ 程序包控制”),然后键入并install单击enter然后输入tag并点击enter

安装标签后,突出显示文本,按下快捷Ctrl+ Alt+ F

Pro路易 2020.03.13

您不需要任何插件即可执行此操作。只需选择所有行(Ctrl A),然后从菜单中选择编辑→行→重新缩进。如果您的文件使用扩展名包含HTML .html的扩展名,则此方法有效.php

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

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

如果未保存文件(例如,您只是将其粘贴到新窗口中),则可以language of choice在选择重新缩进选项之前,通过选择菜单视图→语法→来手动设置缩进语言

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android