如何在Vim中编辑HTML？

Question

如何在Vim中编辑HTML？

13

我是Vim的新手，正在尝试适应它。我刚刚创建了一个.vimrc文件，并让Vim显示行号并进行增量搜索。我还启用了语法高亮功能。现在我想要启用一些能够使编写HTML更容易的东西。我在/usr/share/vim中搜索html.vim，并发现了这个：

/usr/share/vim/vim72/syntax/html.vim
/usr/share/vim/vim72/ftplugin/html.vim
/usr/share/vim/vim72/indent/html.vim

现在，我要如何启用HTML自动缩进？将这些文件复制到~/.vim目录下？还是创建符号链接？或者Vim会自动从/usr/share/vim/中加载它们？（它已经支持HTML语法高亮，所以我认为这是可能的——但它不支持HTML自动缩进）

我听说在.vimrc文件中加入set autoindent可以解决问题，但对于.c文件怎么办呢？我以为它们需要set cindent，但cindent能用于HTML吗？

- mrm8

可能的解决方案：https://dev59.com/DHRB5IYBdhLWcg3w77sn#462547 - namuol

2个回答

13

查看AutoCloseTag插件以在键入标记时关闭标记。而set autoindent应该为您处理HTML缩进。

此外，您应该阅读:help text-objects中的文档，了解如何使用内部和外部标记选择。例如，在正常模式下，您可以执行cit来更改当前标记内的文本。或者在可视化模式下，at将扩展可视化选择以将标记封装在光标周围。

最后，查看Surround.vim插件，它可以将选择或文本对象与标记环绕，或更改其周围的标记。

- Michael Berkowski

设置自动缩进？但是C语言呢？那个文件类型插件会为我处理这些情况吗？ - mrm8

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

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

- romainl · Accepted Answer

首先你应该尝试运行vimtutor并完成几次。一旦基础知识掌握后，就可以开始使用插件...

SnipMate受TextMate的代码片段启发，因此它非常美观，在默认情况下具有许多HTML代码片段，并且非常容易添加自己的代码片段。要使用它，请输入div然后按下 Tab 键即可获取：

<div id="|">

</div>

在双引号""之间放置插入符，准备输入标识符；再次按下Tab将插入符移动到空白行上：

<div id="myId">
    |
</div>

不错。很多编辑器都有这个功能。

如果你需要写大量的HTML，比如每天写几封邮件或新闻简报，另一个名为SparkUp的插件可以让你只需按下几个键和一些CSS知识就能生成复杂的HTML。你可以开始输入类似以下的内容：

table[id=myTable] > tr*3 > td*2 > img

然后你按下 <C-e> (CtrlE) 来获得：

<table cellspacing="0" id="myTable">
  <tr>
    <td>
      <img src="|" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
  <tr>
    <td>
      <img src="" alt="" />
    </td>
    <td>
      <img src="" alt="" />
    </td>
  </tr>
</table>

使用光标在第一个空的""位置内。按下<C-n>和<C-p>跳到下一个/上一个字段。

魔法般的操作。虽然插件也适用于更多编辑器。

我也喜欢文本对象和Surround.vim，它们非常有用。

另一个很酷的功能是可视块模式(:help visual-block)，可以选择文本列。比如你有这样一些文本：

<ul>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
    <li><p>My text doesn't mean anything</p></li>
</ul>

把光标放在第一个 <li> 的 > 上，然后按下 <C-v> 并向下移动光标到第四个 <li>。按下大写字母 I 进入插入模式，在 > 的前面输入 class="myElement"，然后按下 <Esc> 键得到：

<ul>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
    <li class="myElement"><p>My text doesn't mean anything</p></li>
</ul>

哦，耶！

说真的，Vim非常棒。