如何在VI中整理HTML文件的缩进？

Question

如何在VI中整理HTML文件的缩进？

htmlvimviindentation

153

我该如何修复他那些混乱的大型HTML文件的缩进？

我尝试了通常用来修复代码文件缩进的"gg=G命令，但是它似乎在HTML文件上无法正常工作。它只是移除了所有格式。

我还尝试设置:filetype = xml，看看是否欺骗它认为这是一个XML文件会有所帮助，但它仍然没有解决问题。

- mmcdole

12个回答

98

在我的.vimrc文件中添加filetype indent on后，Vim会很好地对HTML文件进行缩进。

以shiftwidth为2的简单示例：

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>

- moinudin

17

将此问题页面的HTML复制粘贴到一个HTML文件中。使用VIM打开，输入“set smartindent”，然后输入“gg=G”，它无法修正文件的缩进。 - mmcdole

17

这对我很有效。设置文件类型为HTML，打开智能缩进，回到文件开头，并按=键进行自动排版。这样可以使页面格式更加整齐。 - Don Reba

6

+1 验证了 "filetype indent on/off" 开关可以打开或关闭自动缩进功能。 - Wim Coenen

4

是的，在设置了智能缩进、文件类型为HTML和启用文件类型识别之后，它对我很有效。 - mmcdole

23

从http://www.chovy.com/web-development/fix-indentation-and-tabs-in-vim/发现需要在filetype indent on之后使用:e重新加载文件。 - Marc Stober

显示剩余5条评论

77

使用智能缩进的主要问题是，如果XML（或HTML）位于一行上，它可能会从curl请求中返回，那么 gg = G 将不起作用。相反，我刚刚通过直接从VI调用整洁来获得良好的缩进体验：

:!tidy -mi -xml -wrap 0 %

这基本上告诉VI调用Tidy来清理一个XML文件，不将行包装到默认的68个字符宽度线上。我处理了一个29MB的大型XML文件，需要5或6秒钟。我猜对于一个HTML文件，命令应该是：

:!tidy -mi -html -wrap 0 %

正如评论中所提到的，tidy是一种基本工具，您可以在许多基础的Linux/MacOS系统上找到它。如果您需要它但没有它，请访问该项目页面：HTML Tidy。

- oscaroscar

1

我不认为需要HTML，因为它默认为HTML。 - lsiebert

4

同意您和@Isieber的观点。不过，我认为这样做可以更容易地理解逻辑，甚至有些人可能认为这是好的实践。 - oscaroscar

2

请注意，如果HTML包含SVG（例如图表等），则Tidy会出现故障。 - Alex Quinn

1

是的，如果HTML代码在一行上，vim缩进命令将无法工作！ - wisbucky

@BrunoBronosky tidy 随标准的类Unix操作系统一起发布。我在Mac上成功尝试了这个答案，而且以前从未听说过 tidy。 - Raman Shah

显示剩余6条评论

49

正如tylerl在上面所解释的那样，请设置以下内容：

:filetype indent on
:set filetype=html
:set smartindent

然而，请注意，在vim 7.4中，默认情况下不缩进HTML标签html，head，body等一些其他标签。这是有道理的，因为几乎所有HTML文件中的内容都属于这些标签。如果你真的想要，你可以像这样缩进这些标签：

:let g:html_indent_inctags = "html,body,head,tbody"

请参考"HTML indenting not working in compiled Vim 7.4, any ideas?"和"alternative html indent script"以获取更多信息。

- Cory Klein

15

由于我所有的HTML都在一行中，所以这些答案对我都没有用。

基本上，您需要首先使用以下命令将每行代码分开，该命令将><替换为相同字符但在中间插入换行符。

:%s/></>\r</g

然后是命令

gg=G

将缩进文件。

- Tomas G.

:%s/>\s*</>\r</g - Petr

12

这是我的解决方案，可以很好地打开“丑陋”的HTML，并以漂亮的间距方式呈现：

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"

sw命令是因为我的默认缩进为4，这对于HTML来说太高了。
然后在每个元素 (>) 后面添加一个新行（Vim 认为它是回车符，叹气）。
使用 =重新缩进整个文件。
取消突出显示 > (因为我在我的 vimrc 中设置了 set hlsearch )。
然后删除所有空白行或只包含空格的行（请参见 "Vim 删除空行" 以获取更多信息，也需要在 shell 中进行双重转义）。

如果您不想进入 Vim，只是清理文件，则甚至可以在结尾添加 | wq! fileOut.html。

- adam_0

好的解决方案！我对其进行了修改，变成了 :%s/>\s*/>\r/g（添加了一个 g 以进行全局替换，并添加了 \s* 以去除尾随空格）。我还添加了 :%s/</\r</g 以在开括号前添加换行符。否则像 <td>foo</td> 这样的标签将被分割成 <td> 和 foo</td>。 - wisbucky

公正的观点，我默认开启了全局替换，这就是为什么它不在我的解决方案中的原因。 - adam_0

8

我使用这个脚本： https://github.com/maksimr/vim-jsbeautify 在上面的链接中，您将找到所有信息：

安装
配置（从第一个示例中复制）
运行 :call HtmlBeautify()

优雅地完成了工作！

- SimonW

4

哈哈，为什么你想要使用node + js来清理Vim中的HTML呢？Vim自带这个功能比node出现的时间还要早...让我很困惑。 - mb21

5

以下是翻译的结果，仅供参考：

这里有一个重量级的解决方案，它可以让你进行缩进，以及所有你在编辑过程中不需要关心的HTML格式化。

首先，下载 Tidy。确保将二进制文件添加到您的路径中，这样您就可以从任何位置调用它。

接下来，创建一个描述你最喜欢的HTML风格的配置文件。虽然Tidy的文档并不是很好，但这里有一个概述和所有选项的列表。以下是我的配置文件：

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

将此内容保存为 tidyrc_html.txt，放在你的 ftplugin 文件夹下（vimfiles文件夹内）。

再添加一个文件：将以下行添加到（或者创建）html.vim，同样放在 ftplugin 文件夹下。

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

要使用它，只需打开HTML文件，然后输入/tidy。（那个/是<leader>键。）

这样就行了！虽然不是快速解决方案，但现在您对编辑那些混乱的大型HTML文件更加有把握了。

- Lemur

4

你尝试过在Vim网站上使用HTML缩进脚本吗？

http://www.vim.org/scripts/script.php?script_id=2075

- JaredPar

+1，我没有看到那个。如果不需要运行脚本就好了，但看起来这可能是唯一的方法。 - mmcdole

这个脚本现在已经被弃用了，而新版本随着vim一起发布（例如/usr/share/vim/vim74/indent/html.vim）。"2014年7月4日：Vim 7.4.356或更高版本包含了这个脚本的一个后代（官方脚本现在由Bram维护，并包含了大量的改变）"。 - wisbucky

3

您可以通过安装插件vim-autoformat自动集成tidy和html-beautify。之后，您可以通过单个按键执行任何已安装的格式化工具。

- chtenb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tylerl · Accepted Answer

217

有几件事情都需要做到位。为了将它们总结在一个位置：

设置以下选项：

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

然后，要么将光标移动到文件的顶部并向结尾缩进：gg =G
要么选择要缩进的文本，然后按下=来进行缩进。

- tylerl

@tyrel，谢谢，但对我来说不起作用。这是文件的内容：http://pastebin.com/gagia8W2。该文件名为`home.html`。我没有任何缩进`.php`文件的问题。这是我的`.vimrc`文件：http://pastebin.com/FAJ0MCA9 - tirenweb

1

有没有办法在.vimrc文件中设置这个？我不想每次打开HTML文件时都要告诉它这是一个HTML文件。非常感谢gg，=，G快捷键。非常方便。 - zakishaheen

1

请注意，在vim 7.4中，默认的缩进设置将失败，因为html，body和p默认情况下不会缩进。请参见此答案。 - Cory Klein

2

smartindent 不是必需的。而且它是针对 C 和 C++ 调整的，我更喜欢使用更通用的 autoindent。 - Kos

在我使用 :set smartindent 命令与 1G v G $ =（跳转到第一行，进入可视模式，跳转到最后一行，跳转到最后一行的末尾，智能缩进）相结合时效果很好。这将选择所有文本然后进行缩进。 - connorbode

显示剩余3条评论