ZenCoding.vim : [超速编写网页代码]vim plugins for HTML and CSS hi-speed coding.

blogdaren 2014-10-20 抢沙发 2228人次
先看效果图: 33.gif 英文版:
http://www.vim.org/scripts/script.php?script_id=2981
created by
Yasuhiro Matsumoto
 
script type
utility
 
description

This is vim script support expanding abbreviation like zen-coding.
ref: http://code.google.com/p/zen-coding/

There is a movie using zencoding.vim
ref: http://mattn.github.com/zencoding-vim

Source Repository.
ref: http://github.com/mattn/zencoding-vim

Type abbreviation
   +-------------------------------------
   | html:5_
   +-------------------------------------
"_" is a cursor position. and type "<c-y>," (Ctrl + y and Comma)
NOTE: Don't worry about key map. you can change it easily.
   +-------------------------------------
   | <!DOCTYPE HTML>
   | <html lang="en">
   | <head>
   |     <title></title>
   |     <meta charset="UTF-8">
   | </head>
   | <body>
   |      _
   | </body>
   | </html>
   +-------------------------------------
Type following
   +-------------------------------------
   | div#foo$*2>div.bar
   +-------------------------------------
And type "<c-y>,"
   +-------------------------------------
   |<div id="foo1">
   |    <div class="bar">_</div>
   |</div>
   |<div id="foo2">
   |    <div class="bar"></div>
   |</div>
   | _
   +-------------------------------------

Tutorial:

  http://github.com/mattn/zencoding-vim/raw/master/TUTORIAL

How work this:

  http://mattn.github.com/zencoding-vim

Tips:

You can customize behavior of expanding with overriding config.
This configuration will be marged at loading plugin.

  let g:user_zen_settings = {
  \  'indentation' : '  ',
  \  'perl' : {
  \    'aliases' : {
  \      'req' : 'require '
  \    },
  \    'snippets' : {
  \      'use' : "use strict\nuse warnings\n\n",
  \      'warn' : "warn \"|\";",
  \    }
  \  }
  \}

  let g:user_zen_expandabbr_key = '<c-e>'

  let g:use_zen_complete_tag = 1

You can set language attribute in html using zen_settings['lang'].
 
install details

# cd ~/.vim
# unzip zencoding-vim.zip

or if you install pathogen.vim:

# cd ~/.vim/bundle # or make directory
# unzip /path/to/zencoding-vim.zip

if you get sources from repository:

# cd ~/.vim/bundle # or make directory
# git clone http://github.com/mattn/zencoding-vim.git

中文版:

VIM 的确是个强大的编辑器,它可以折腾出很多种强大的功能, 这个VIM插件叫 Zen Coding , 我强烈推荐给经常和 HTML CSS 打交道的朋友。

下面的动态演示图,只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。
33.gif
 

先举一个复杂的例子:zen-coding 可以把这样的代码:div#header>ul.navigation>li*4>a,变成下面的 HTML 代码

    <div id=”header”>
        <ul class=”navigation”>
            <li><a href=”"></a></li>
            <li><a href=”"></a></li>
            <li><a href=”"></a></li>
            <li><a href=”"></a></li>
        </ul>
    </div>

看到这熟悉的语法结构,会 CSS 的朋友一定会惊声尖叫!最妙的是那个“*4”,直接生成 4 个 li 代码了。没错,Zen Coding 就是这样牛叉的东西,Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。

即使你不使用上面提到的编辑 器,那么还有一种选择,点击下载页面的最后一个链接: Zen Coding for <textarea>。这是一个网页版的 Zen Coding!打开 example.html 之后,把光标定位到文本框里面,按下 Ctrl + E 试试吧。

网页版快捷键说明:

    Ctrl + E:展开代码
    Ctrl + D:向外快速选中代码块
    Shift + Ctrl + D:向内快速选中代码块
    Shift + Ctrl + A:输入一个缩写,自动展开并包围所选代码
    Ctrl + Alt+→ :光标智能跳转到下一个编辑点(自己试试就知道多体贴了)
    Ctrl + Alt+←:光标智能跳转到上一个编辑点
    Ctrl + L:选择一行

官方演示视频:Zen CSS 和 Zen HTML。

另外,缩写的含义请看:Zen CSS Properties 和 Zen HTML Elements,各种插件的安装方法请看官方 wiki。

最后提醒一点:

在这个墙外的官方演示视频(高清)中,墙内观看地址,还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。

版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

本文链接:ZenCoding.vim : [超速编写网页代码]vim plugins for HTML and CSS hi-speed coding.

发表评论:

您的昵称:
电子邮件:
个人主页:

Free Web Hosting