html - 如何在 Vim 中编辑 HTML？

Question

我是 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？符号链接(symbolic link)他们？或者 Vim 会自动从/usr/share/vim/加载它们吗？ (它已经做了 HTML 语法高亮显示，所以我认为这是可能的 - 但它不做 HTML 自动缩进) 我听说 .vimrc 中的 set autoindent 可以解决问题，但是 .c 文件有什么用呢？我认为他们需要 set cindent，但 cindent 是否适用于 HTML？

Answer 1

您应该做的第一件事就是尝试 vimtutor并完成几次。一旦掌握了基础知识，您就可以开始使用插件了……

SnipMate灵感来自 TextMate 的代码片段并且/因此非常漂亮，默认情况下它有很多 HTML 代码片段并且添加您自己的代码片段非常容易。要使用它，请输入 div然后点击 Tab 获得:

<div id="|">

</div>

"" 之间有插入符准备好让你输入一个 id；再次点击 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，它们非常有用。

另一个很酷的功能是可视 block 模式 ( :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 (大写 I)在 > 之前进入 INSERT 模式然后输入 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 很棒。