With the last WebStorm/PhpStorm EAP you can edit HTML and CSS code really fast usingZen Coding features.

To use it, you have to install Zen Coding plugin for Web IDE/IntelliJ IDEA: go to Zen Coding Project Download Page, download an archive that contains a set of live templates, and extract it to “<Your Home Directory>.WebIde10configtemplates” folder (“~/Library/Preferences/WebIde10/templates” for Mac OS X).

  • Zen Coding plugin involves more than 200 different HTML and CSS live templates. To see all of them, just open Settings (Ctrl+Alt+S), Live Templates, Zen Coding group.
  • Native Zen Coding support allows you to generate HTML structures using complex templates. For example, try to type “form.form-comment#comment>fieldset”in an HTML file and then press TAB. In this case, “form” and “fieldset are live templates but you can use simple tag names instead.
  • You can generate not only HTML but also XML structures. Basic features perfectly work for XML.
  • “TAG.CLASS” and “TAG#ID” templates allow you to specify class and id of HTML elements, but you can specify a value of any XML/HTML attribute, i.e. you can write“person[name=Jack]“.
  • You can use your own live templates as parts of complex templates. For example, suppose you have a template “entry” with the following template text:  To generate a list of entries, you just need to type “entry-list>entry[number=$]*5″ and press TAB. By default, the “number” attribute will be generated before “type”. If you want to customize the position where it’s generated, add ATTRS variable to your template – for example: ATTRS variable must have empty string as a default value and should be skipped:
  • Of course, you can disable Zen Coding support if you don’t need it (see Settings (Ctrl+Alt+S), XML Zen Coding).

To learn more about Zen Coding features, you can watch screencasts on Zen Coding project home page.

Note that Zen Coding native support is a part of IntelliJ IDEA Community Edition, and its source code is freely available.

Zen Coding support in WebStorm/PhpStorm的更多相关文章

  1. phpstorm使用zen coding 快速编辑补全html/css代码

    百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...

  2. 关于Zen Coding:css,html缩写

    zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件,其安装也是非常简单,只要安装插件,然后在项目中拷贝js文件就可以.像Webstorm6.0.2中已经包含这样的插件.什 ...

  3. Notepad++ 安装 Zen Coding / Emmet 插件

    Zen Coding 插件 ============== 下载: Zen.Coding-Notepad++.v0.7.zip ==Installation== 1. Copy contents of ...

  4. Sublime Text 2+Zen Coding

    自己长期使用editplus做代码编辑,使用过DW,还是习惯前者的使用环境.好友推荐,试试新的编码工具——Sublime Text 2.在代码制作过程中,最主要的是1)快速复制的模式化工作  2)零碎 ...

  5. 如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作

    Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...

  6. vim 中 也可以 直接安装 emmet 直接使用zen coding 生成 l指定个数的 lorem ipsum文字.

    超链接的写法: 当作为链接的文字, 比较长时, 整个作为链接 就显得不是 很适合. 可以取其中的某一个单词 作为 超链接的 关键字:如: click here to continue emmet中如何 ...

  7. 再说vundle: 完全vim字符编程的四个必须插件 - zen coding 和emmet插件的使用

    一个常识: 基本上vim插件的配置文集都是放在对应插件目录 的/autoload/ plugin_name.vim 文件中的 有四个必要/必须的插件,实现vim完全的字符界面的编程: NERDTree ...

  8. 在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作

    Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...

  9. zen coding和emmet

    zen coding 改名为 emmet http://emmet.io/download/

随机推荐

  1. PCB优化设计(二) 转载

    PCB优化设计(二) 2011-04-25 11:41:05|  分类: PCB设计   目 前SMT技术已经非常成熟,并在电子产品上广泛应用,因此,电子产品设计师有必要了解SMT技术的常识和可制造性 ...

  2. Java学习之路:2、Mysql 链接与查询

    1.事实上我发现有了php的功力在里面,学习java起来还是不是很费劲,只是java就没有面向过程这一说 package second; import java.sql.*;//导入 public c ...

  3. OData 集成

    OData 集成 文档目录 本节内容: 简介 安装 安装Nuget包 设置模块依赖 配置你的实体 创建控制器 示例 获取实体列表 请求 响应 获取单个实体 请求 响应 获取单个实体及导航属性 请求 响 ...

  4. C# Windows - TextBox 控件

    .NET Framework内置了两个基本控件来提取用户输入的文本: TextBox和RichTextBox.这两个控件都派生于基类TextBoxBase,而TextBoxBase派生于Control ...

  5. BZOJ 4127 Abs 解题报告

    这个题感觉很厉害的样子.. 首先我们注意到一点:每次加的 $d$ 都是非负的. 那么就说明一个数只可能从负数变成非负数并且只会变一次. 所以我们就可以暴力地去改变一个数的正负情况. 然后我们就可以用树 ...

  6. Unity3d + NGUI 的多分辨率适配(黑边)

    原地址:http://www.2cto.com/kf/201310/250921.html 一.当下移动设备的主流分辨率(数据来自“腾讯分析移动设备屏幕分辨率分析报告”) 1.1 iOS设备的分辨率主 ...

  7. 用 OneAPM Cloud Insight 监控 Docker 性能

    Docker 是构建和部署软件的一个新兴的轻量级的平台,也是一个减轻替代虚拟机的容器.Docker 通过给开发者提供兼容不同环境的镜像,成为解决现代基础设施的持续交付的一个流行的解决方案. 和虚拟机一 ...

  8. chardet安装

    1.下载 chardet-2.2.1.tar.gz (md5)   https://pypi.python.org/pypi/chardet#downloads 2.解压至C:\Python27\Li ...

  9. python url编码

    1.quote:使用适合URL内容的转义序列替换String中的特殊字符. 2.quote_plus:调用quote并使用“+”替换所有空格 3.unquote:使用转义字符的单字符对应物替换'%xx ...

  10. cocos2dx addchild坐标问题

    a.addchild(b); 会把a->getBoundingBox矩形的左下角坐标点和b的锚点贴合在一起.  ----- 其他引擎默认不是这样的,所以再跨平台导数据的时候,要注意这些细微的差别 ...