MacVim 安装 Zen-Coding 插件

最新推荐文章于 2023-03-20 17:13:31 发布

yang3wei

最新推荐文章于 2023-03-20 17:13:31 发布

阅读量2.2k

点赞数

分类专栏： Mac OS 学习笔记 Mac高质量软件推荐小技巧积累

学习笔记同时被 3 个专栏收录

70 篇文章

订阅专栏

Mac OS

58 篇文章

订阅专栏

Mac高质量软件推荐

50 篇文章

订阅专栏

本文详细介绍了如何在MacVim中安装并使用Zen Coding插件，该插件能显著提高HTML/CSS代码编写效率，通过快捷指令自动生成常用代码模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：http://www.reake.com/macvim-install-zen-coding-plug-in/

这两天自定义配置苹果电脑下的macvim神器(参考:整理并学习macvim神器)，折腾了一天，还是决定自己个性配置并学习，虽然周期和过程是曲折的，但结果是快乐的。

然后为macvim插上第一款插件Zen Coding，是一个很不错的快速写HTML/CSS代码的方式，受到了不少前端人士的追捧和青睐，试想只要输入div#content>h1+p即可得到<div id=”content”><h1></h1><p></p></div>这么一段代码，无疑减少了很多次对键盘的敲击，省力省键盘。

关于Zen-Coding.vim 插件可以到Github上找到这个VIM插件的的最新情况http://github.com/mattn/zencoding-vim。

将下载包(autoload/doc/plugin/)复制到~/.vim目录对应目录下，重启一下macvim就可以了使用了

Zen-Coding.vim插件提供的默认展开代码的快捷键是,也就是Ctrl + y + ,。例如输入html:5_(_为光标的位置)，然后输入“<c+y+,>”，就会展开成

<!DOCTYPE html>
 <html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
</head>
<body>

</body>
</html>

输入div#foo$*2>div.bar，然后输入“Ctrl + y + ,>”就会展开成

<div id="foo1">
   <div class="bar">_</div>
</div>
<div id="foo2">
    <div class="bar"></div>
</div>

这里要注意：如果你创建的macvim配置文件命名为.gvimrc的话，下面的自定义快捷键是无效的。必须在.vimrc文件里加入下面自定义脚本才能生效哦。这个问题让我纠结了一个晚上，因为我当时在配置时习惯性用.gvimrc当macvim的配置文件，至于一晚上在使劲地百度和重启macvim…

当然，你也可以根据自己的习惯设置展开代码的快捷键，你可以通过在你的vimrc配置文件里写入以下配置来覆盖zencoding.vim插件的默认设置。

  let g:user_zen_expandabbr_key = '<D-e>'    "设置为commend+e展开
  let g:use_zen_complete_tag = 1

更多请参考官方文档
VIM官方插件地址：ZenCoding.vim
zencoding.vim在Github的地址：http://github.com/mattn/zencoding-vim
Zen Coding官方地址：http://code.google.com/p/zen-coding/
Zen Coding官方提供的速查手册(PDF)：http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf