使用Vim掌握CSS和XHTML

Question

请指点我们如何使用Vim掌握（X）HTML，CSS。 我喜欢用手创建网页，我决定和Vim一起去。

任何有用的插件，提示和技巧，教程，how-tos，书籍，文章？

谢谢！

Answer 1

你将“使用Vim掌握（X）HTML，CSS”，就像你使用任何其他文本编辑器或语言一样：通过努力工作，阅读书籍，观看截屏视频和跟上新闻。 您选择的编辑器完全无关紧要。

也就是说，这里有一些本机功能和插件帮助了我很多：

• Omnicompletion是Vim自己的自动完成功能，除了它不是自动的。

  点击ctrl p或ctrl n以完成文档中其他位置的单词。

  按ctrl x ctrl o显示基于语言的可能完成列表。

  开始编辑

  另一个非常有用的功能是“文件路径完成”，开始键入文件的路径并点击<Cx><Cf>以显示可能完成的菜单。

  此外，上述功能可以使用插件自动化，我使用的是AutoComplPop 。

  结束编辑

• 对象允许您以疯狂的方式移动，选择和执行代码操作。

  假设你有<div>word</div>把光标放在o ，D I T将删除word ，C I T将删除word ，并将进行进一步的编辑等标签之间的光标...

  如果你知道什么是d ， c或v的意思是， i大概的意思是inside和a大概的意思是around那t意味着tag ，你已经有一个非常强大的工具，有。 Vim有其他对象对代码编辑非常有用： " ， ' ， ( ， [ ， { etc，type :help objects for more。

  对我来说，仅此功能足以证明抓取TextMate是合理的。

• Blockwise Selection完成了它的说法。 :help blockwise-visual获取更多信息。

• :normalize或:norm对于在一组行之前添加或附加内容也非常有用。

• SnipMate是一个受TextMate的片段系统启发的插件。 您键入form然后单击选项卡以展开到一个完整的样板<form>元素，您可以通过进一步按Tab键来编辑值和属性。

• Surround通过在选择周围添加标记对，删除标记对或更改标记对，将对象业务提升到另一个级别。

  如果您采用上面的示例，请点击c s t <p>以更正确的<p>word</p>更改它。 要为word添加一对标签，请使用v选择它，然后按S并键入所需的标签。

Answer 2

Sparkup是一个非常棒的插件。 除此之外，我通常使用snipMate和delimitMate ，尽管这些对于任何语言的编码都很有用。

Answer 3

TL;博士; 安装此vim安装程序https://github.com/jameslai/jvim

James Lai写了一篇关于Frontend Vim的惊人文章，当我回答这个问题时，这篇文章是404'。 它帮助我从ST2切换到VIM，所以我在这里发布。

---

为什么我使用VIM作为前端开发的首选编辑

詹姆斯赖

我已经使用VIM多年了，我无法摆脱它。 虽然许多人喜欢使用Sublime Text 2，但我不禁鼓励，如果您想使用可以随着您的知识扩展的编辑器，VIM应该是您的首选编辑。

轻松编辑标签内的内容

作为FED，我们不断编辑标签内的内容。 VIM通过其“标签”文本对象使这很简单 - t。 这是一个常见的场景，您的源代码如下所示：

<div>Some content within here</div>

在VIM中，要替换该标记内的内容，您只需要按cit。 这将改变内部标记，你将留下这个：

<div></div>

轻松替换HTML属性

与上面类似，我们一直处理引号内的内容，通常作为HTML中的属性。 您可能会看到以下内容：

<aside class="one-third author box">

在这种情况下，只需点击ci“。也许是关于这个技巧的最新部分，如果这是该行上唯一的内容，你甚至不需要你的光标靠近引号本身！VIM足够聪明，可以简单地清空报价的内容，无论其在该行中的位置如何，您将留下：

<aside class="">

在您编辑的位置之间跳回和第四

作为美联储，我们不断跳回到我们之前编辑的地方之间的第四位。 VIM维护一个“跳转列表”，可以通过Ctr + O（跳转到以前的位置）和Ctr + I（转发）轻松导航。 这使我们同时编辑许多文件的例程非常轻松。

有关跳跃的更多信息

在Mac上？ 在VIM中，您再次获得了正确的删除密钥

Mac键盘没有正常的“删除”键 - 我们基本上有一个退格键，但它标记为删除。 当然，你可以找到funcdelete，但是这个功能键肯定是顺便提一下。 相反，点击x！

像主人一样移动CSS

通常我需要重构一些CSS并在选择器之间移动属性。 使用VIM，我可以通过简单的方式将内容从各行移动到我的光标位置：

:<linenumber>,<linenumber>m

使用VIM可以轻松实现这些常见操作。

跳到行的结尾或开头

这在我的工作流程中非常常见 - 需要跳到一行的末尾。 也许我在CSS属性或Javascript行的末尾忘记了一个分号。 要跳到该行的末尾，只需点击A，您就会在该行的末尾处于插入模式。 需要在开头编辑（不计入标签）？ 使用I.

以思想的速度编辑

VIM的主要概念之一是防止需要触及鼠标。 当我在我的流程中时，除非它与我正在处理的网页进行交互，否则我永远不会触及鼠标。 熟悉VIM意味着您编辑和操作文本的能力几乎接近您能够多快地思考问题。 由于文本对象的概念，思考“我想删除这一行”变成了一个微不足道的dd，或用daw删除一个单词。 当您考虑问题时，您通常不会轻易地向编辑器描述。 在我看来，使用VIM进入流程的能力比大多数其他编辑更高。

轻松拆分窗户

完全改变我开发方式的东西是学习如何在VIM中真正利用分割窗口。 是的，VIM已拆分窗户，它们太棒了！ 有些编辑器具有此功能，但使用起来很麻烦，或者难以记住使用。

吐痰是强大的，因为我们经常在许多地方处理相同的项目。 如果您正在寻址元素，那么您通常会想要HTML文件。 如果你正在应用样式，你会想要CSS，如果你正在应用行为，你也会想要Javascript。 同时看到它们在编辑中给我带来了无数令人头痛的问题。 流程感觉非常“自然”，更不用说你的编辑器看起来多么棒了。 通常，我任何时候都会至少有4次分裂。

一个很好的入门方式是键入：Vex。 这将打开一个垂直探索窗口。 从这里，您可以浏览到您想要的任何文件，该文件将显示在拆分中。 还有总是色情的：性别命令，它将打开一个水平分裂的浏览器窗口。

垂直分割窗口

有关拆分的更多信息

有关文件资源管理器的更多信息

你的设置，任何地方

也许最引人注目的功能之一就是能够非常快速地进行自定义设置。 我将我的VIM配置保存在GitHub仓库中 ，这意味着无论我使用的是哪台机器，我都要完成两个命令。

......甚至在远程机器上

前端开发人员在某些时候将不可避免地在远程服务器上工作。 哎呀，我们中的许多人都在VM中复制我们的服务器环境。 你需要一个编辑器，而不是因为不知道如何实际跳舞而在VIM中摸索，或者使用像nano这样的基本和动力不足的编辑器，擅长VIM客户端意味着你要去成为主服务器端。

最后的想法

VIM是一个了不起的编辑器，虽然你可能认为它已经过时了，但它实际上不仅仅是今天编辑的任务。 无论新编辑如何进入市场，我都可以尝试一下，看看有哪些创新，但最后，我总是回到VIM进行编辑，我喜欢它。

Answer 4

我这样做。 我没有找到那么多的支持，所以我写了一些自己的。 我将它保留在Google代码托管上 。 我还使用嵌入了Python的Vim版本，并使用一些Python来扩展一些功能。 这是在pycopia.vimlib包中。

只有一点，但希望有用的东西。 你可以从那里开始。

Answer 5

埃米特 。 很久以前被称为zencoding，是一个很好的插件，适用于几个编辑器（包括vim），它们具有许多功能，使您能够非常快速地编写html和css代码。

例如，您可以键入div.some span.other<ctrl+y> ans，您将得到：

<div class="some>
   <span class="other>
      (cursor here) 
   </span>
</div>

Answer 6

1. 安装CSS3语法插件 。
2. 安装HTML5语法插件 。
3. 安装Syntastic语法检查器插件 。
   1. 您还必须安装CSS Lint的CLI工具 ，因为语法检查器使用它。

---

有一些与常规开发相关的插件，你可以在这个网站上散布的几个问题中找到，但上面的那些专门用于帮助编写更好的CSS和HTML。

Answer 7

我使用了很多zencoding，所以，如果你使用zen-coding尝试使用zenCoding插件为Vim 在这里找到它

如果你想了解更多关于zen-coding的信息，你可以阅读： zen coding vim tutorial