`
wangshaofei
  • 浏览: 281665 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

vim插件ZenCoding一些常用的操作

    博客分类:
  • vim
vim 
阅读更多

相当的酷,记录一些常用的操作

安装很方便,不再像我以前使用的sparkup.vim得配置python环境了,可直接到http://github.com/mattn/zencoding-vim下载zencoding.vim文件放到vimfiles/plugin.vim/plugin目录就OK了。

接下来介绍些使用方法(Copy自LazyHack的使用zen coding for vim快速编写html代码

  • 展开缩写

输入 div>p#foo$*3>a 这样的缩写,然后按 ctrl + y + , 来展开(注意那个逗号),展开后它应该是这个样子的

 <div>
      <p id="foo1">
          <a href=""></a>
      </p>
      <p id="foo2">
          <a href=""></a>
      </p>
      <p id="foo3">
          <a href=""></a>
      </p>
  </div>
  • 多行缩写

输入如下:

test1
test2
test3

然后进入行选择模式,选中这三行按 ctrl + y + ,,接着它会提示你要使用的tag名称,TAG: 输入 ‘ul>li* 会变成如下的样子

<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>

如果是输入blockquote,那么会变成这样

  <blockquote>
      test1
      test2
      test3
  </blockquote>
  • 跳转到下一个标签编辑位置

输入ctrl + y + n 进入插入模式

  • 跳转到上一个标签编辑位置

输入ctrl + y + N 进入插入模式

  • 更新标签中图片大小

假如有以下内容

<img src="foo.png" />

光标移动到img标签上,按下ctrl + y + i 该插件会自动获取foo.png的大小并插入宽高属性 看起来像这个样子

<img src="foo.png" width="32" height="48" />
  • 切换注释

如有以下段

<div>
    hello world
</div>

光标移动到此段落,输入ctrl + y + /变成

<!-- <div>
    hello world
</div> -->

再次输入则还原

  • 生成url连接

将光标移动到一个url上,如:

http://www.google.com/

输入ctrl + y + a 它会自动获取url页面的标题并生成一个连接

<a href="http://www.google.com/"></a>

zencoding.vim更新十分频繁,大家可以关注下。

VIM官方插件地址:http://www.vim.org/scripts/script.php?script_id=2981

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

分享到:
评论

相关推荐

    zencoding-vim

    "zencoding-vim" 是一个专为Vim编辑器设计的插件,它引入了Zen Coding的概念,大大提升了前端开发者的工作效率。Zen Coding,后来更名为Emmet,是前端开发领域中一个快速编写HTML和CSS的工具。这个插件将Emmet的功能...

    zencoding-vim-master.zip

    关于Zencoding的常用命令,以下是一些基本操作: 1. `Ctrl+E`:激活Zencoding模式,让你能够输入缩写。 2. `Tab`:自动完成缩写。当你输入一部分缩写后,按下Tab键,Vim会尝试匹配一个合适的HTML元素。 3. `.`:...

    Zen Coding.vim

    Zen Coding: 一种快速编写HTML/CSS代码的方法 输入 div#i$-test.class$$$*5 …然后调用”展开缩写”行为 会被转换成为: &lt;div id="i1-test" class="class111"&gt;&lt;/div&gt; &lt;div id="i2-test" class="class222"&gt;&lt;/div&gt; ...

    vim插件,IC工程师常用

    1. **Vim基础知识**:首先,了解Vim的基本操作是使用任何插件的前提。Vim有三种模式:正常模式、插入模式和命令行模式,用户需要在这些模式之间灵活切换以完成不同的编辑任务。 2. **NERDTree**:这是Vim的一个文件...

    zencoding使用手册

    本文档将详细介绍如何在Vim环境下使用zencoding插件,帮助用户更高效地编写HTML代码。 #### 二、安装与配置 1. **安装**:首先确保您的编辑器或IDE支持zencoding,并按照官方文档完成插件的安装。 2. **配置**:...

    eclipse的vim插件

    Eclipse的Vim插件提供了三种主要的操作模式:正常模式(Normal Mode)、插入模式(Insert Mode)和可视模式(Visual Mode)。在正常模式下,用户可以使用Vim的快捷键执行各种编辑操作,如移动光标、复制粘贴、删除文本等;...

    notepad++使用vim插件

    Notepad++的Vim插件不仅提供了基本的Vim操作,如移动光标、插入/替换模式、文本对象选择和多行编辑,还可能包括Vim的高级特性,如宏录制和播放、正则表达式搜索替换以及可视模式等。 总的来说,通过在Notepad++中...

    vim插件-linux使用

    Fugitive 是一个强大的Git集成插件,可以让你在Vim内执行几乎所有的Git操作,如提交、查看差异、切换分支等。NERDTree 是一个文件浏览器插件,帮助你在Vim中浏览项目文件结构。 除了基础操作,Vim 插件还能实现诸如...

    eclipse colortheme plug and zencoding plugin

    【ZenCoding(现更名为Emmet)插件】 ZenCoding是一款强大的前端开发辅助工具,现在被称为Emmet。它极大地提升了HTML和CSS编写的速度。Emmet支持快速输入缩写,然后自动扩展成完整的HTML或CSS代码。例如,输入"div&gt;...

    vim配置插件-dierge

    vim配置插件

    javacc的vim插件,vim插件系列

    javacc的vim插件~~~~~ 十分好用哦

    VSCode+Vim插件

    而“VSCode+Vim插件”指的是在VSCode中安装并使用Vim模拟器,将VSCode转换为具有Vim编辑模式的环境,让习惯于Vim操作的开发者可以在VSCode中享受到类似Vim的高效编码体验。 Vim是一款历史悠久且功能强大的文本编辑...

    ubuntu下的vim插件

    在Ubuntu操作系统中,Vim(Vi IMproved)是一款强大的文本编辑器,被广泛用于编程和其他文本操作。为了提升Vim的使用体验和效率,开发者们创建了许多插件,以增加额外的功能和便捷性。在您提供的信息中,我们关注到...

    VS+IDEA-vim插件

    对于习惯于Vim编辑器快捷键和操作模式的开发者来说,VSCode和IDEA都提供了Vim插件,使得这两款现代化的IDE也能拥有类似Vim的编辑体验。 标题中的"VS+IDEA-vim插件"指的是在VSCode和IDEA中安装并使用的Vim仿真插件,...

    notepad++ 的 vim插件

    ViSimulator for Notepad++.txt文件可能是该插件的说明文档或使用指南,它可能包含安装步骤、配置方法、快捷键列表以及常见问题解答等内容。用户应该仔细阅读这份文档,以便更好地理解和使用Visimulator插件。 在...

    linux vim插件

    安装Vim插件的另一种常见方法是使用像Vundle、Pathogen、NeoBundle或Plug这样的插件管理器。这些工具简化了安装、更新和管理多个Vim插件的过程。例如,如果你使用Vundle,可以在`.vimrc`文件中添加插件的GitHub仓库...

    vim常用插件集合

    标题提及的“vim常用插件集合”是一组能够增强Vim功能的扩展,这些插件包括ctags、TagList、minibuffer、winmanager以及可能未详述的"a"插件。以下是对这些插件的详细说明: 1. **ctags**:这是一个源代码导航工具...

    vim插件-配合数字电路systemverilog编程时使用

    Vim是一款强大的文本编辑器,深受程序员喜爱,尤其在系统级Verilog编程中,通过搭配合适的插件,可以显著提高代码编写效率。SystemVerilog是一种广泛应用于数字电路设计的硬件描述语言,它允许设计师在高层次上描述...

    vim插件集合和配置

    ### 常用插件介绍 - ** dein.vim**:一个轻量级且高效的Vim/Neovim插件管理器,支持异步安装和更新。 - **Airline**:提供美观的底部状态栏,显示当前模式、行数等信息。 - **coc.nvim**:用于Vim的Language ...

    vim常用插件配置说明

    **Vim常用插件配置详解** 在编程世界中,Vim作为一个强大的文本编辑器,以其高效的操作和高度可定制性赢得了众多程序员的喜爱。为了提升Vim的使用体验和工作效率,许多开发者选择安装并配置各种插件。本篇将详细...

Global site tag (gtag.js) - Google Analytics