使用Vim掌握CSS和XHTML_Html_Css_Vim_Xhtml

使用Vim掌握CSS和XHTML

html css vim

使用Vim掌握CSS和XHTML,html,css,vim,xhtml,Html,Css,Vim,Xhtml,请告诉我一些关于如何使用Vim掌握（X）HTML、CSS的指南。我倾向于手工创建网页，我决定使用Vim 有没有有用的插件、技巧、教程、指南、书籍、文章谢谢我就是这样做的。我还没有找到那么多支持它的人，所以我自己写了一点。我一直开着。我还使用了一个嵌入Python的Vim版本，并使用一些Python来扩展一些功能。那在包裹里只有一点点，但希望有用的东西。你可以从那里开始是一个非常棒的插件。除此之外，我通常同时使用和，尽管它们对任何语言的编码都很有用。你将“掌握（X）HTML、CSS和Vim

请告诉我一些关于如何使用Vim掌握（X）HTML、CSS的指南。我倾向于手工创建网页，我决定使用Vim

有没有有用的插件、技巧、教程、指南、书籍、文章

谢谢

我就是这样做的。我还没有找到那么多支持它的人，所以我自己写了一点。我一直开着。我还使用了一个嵌入Python的Vim版本，并使用一些Python来扩展一些功能。那在包裹里

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

是一个非常棒的插件。除此之外，我通常同时使用和，尽管它们对任何语言的编码都很有用。

你将“掌握（X）HTML、CSS和Vim”，就像你对任何其他文本编辑器或语言所做的那样：通过努力工作、阅读书籍、观看屏幕广播和跟上新闻。你选择的编辑器完全不相关

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

Omnicompletion是Vim自己的类似自动完成的功能，只是它不是自动完成的
点击ctrlp或ctrln以完成文档中其他地方包含的单词
点击ctrlxctrlo以显示基于语言的可能完成的列表
开始编辑
另一个非常有用的功能是“文件路径完成”，开始键入文件的路径，然后点击
以显示包含可能完成的菜单
另外，上面提到的特性可以通过插件实现自动化，我使用的插件是
结束编辑
对象允许您以非常酷的方式在代码上移动、选择和执行操作
假设您有
```
word
```
，光标位于
```
o
```
，dit将删除
```
word
```
，cit将删除
```
word
```
，并将光标放在标签之间以供进一步编辑，以此类推
如果你知道
```
d
```
，
```
c
```
或
```
v
```
是什么意思，那么
```
i
```
大致意思是
```
内部
```
和
```
a
```
大致意思是
```
周围
```
，而
```
t
```
则意味着
```
标签
```
你已经有了一个非常强大的工具，在那里。Vim还有其他对代码编辑非常有用的对象：
```
“
```
，
```
”
```
，
```
（
```
，
```
[
```
，
```
{
```
等，键入
```
：help objects
```
了解更多信息
对我来说，仅此功能就足以证明抓取TextMate是合理的
分块选择按其说明执行。
```
：帮助分块视觉
```
了解更多信息
```
：normalize
```
或
```
：norm
```
对于在一组行中预先添加或附加某些内容也非常有用
是一个受TextMate snippets系统启发的插件。您可以键入
```
表单
```
，然后点击tab以扩展到一个完整的样板文件
元素，在该元素中，您可以通过进一步点击tab来编辑值和属性

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

如果您以上面的示例为例，请按cst

将其更改为更正确的word
。要向word
添加一对标记，请用v选择它，然后按S并键入所需的标记

我使用了很多zencoding，因此，如果您使用zen编码，请尝试Vim的zencoding插件
如果您想了解更多有关zen编码的信息，请阅读：


。
您还必须这样做，因为语法检查器使用它


还有更多与一般开发相关的插件，您可以在本网站上分散的几个问题中找到这些插件，但是上面的那些插件特别有助于编写更好的CSS和HTML。
tl；dr；安装此vim安装程序
写了一篇关于前端Vim的精彩文章，当我回答这个问题时，它是404'ing。它帮助我从ST2切换到Vim，所以我将它发布在这里

为什么我使用VIM作为前端开发的首选编辑器
借
我已经使用VIM很多年了，我就是无法摆脱它。虽然很多人喜欢使用Sublime Text 2，我也忍不住要绝对鼓励，如果你想使用一个可以根据你的知识进行扩展的编辑器，VIM应该是你的首选编辑器
轻松编辑标记中的内容
作为美联储，我们不断地编辑标签中的内容。VIM通过其“标签”文本对象-t简化了这一过程。下面是一个常见的场景，您的源代码如下所示：
<div>Some content within here</div>

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

这里有一些内容

在VIM中，要替换该标记内的内容，只需按cit。这将更改内部标记，您将保留以下内容：
<div></div>



轻松替换HTML属性
与上述内容类似，我们一直在处理引号中的内容，通常作为HTML中的属性。您可能有如下内容：
<div>Some content within here</div>

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


在mac上？在VIM中，您又有了一个正确的删除键
Mac键盘没有一个普通的“delete”键-我们基本上有一个退格键，但它的标签是delete。当然，你可以伸手去拿funcdelete，但这个功能键肯定是多余的。相反，点击x
像大师一样移动CSS
通常，我需要重构一些CSS并在选择器之间移动属性。使用VIM，我可以通过简单的操作将内容从不同的行移动到光标位置：
:<linenumber>,<linenumber>m

：，m

使用VIM，像这样的常见操作变得轻松可笑
跳到一行的末尾或开头
这在我的工作流中非常常见-需要跳转到行尾。可能我忘记了CSS属性或Javascript行末尾的分号。要跳转到行尾，只需点击a，行尾就处于插入模式。需要在开头编辑（不包括tabb）