[插件]ZenCoding-HTML/CSS代码编辑利器

去年就知道了Sublime Text 2这款编辑器,当时就颇有好感,还用了一段时间来进行开发。最近,偶然知道了还有Zen
Coding这样的一个插件之后,简直对这个插件以及可以支持插件的Sublime Text 爱不释手。

先说什么是Zen Coding。

如果你用过jQuery,那么一定会对选择器有深刻的印象。Zen Coding由两个核心组件构成:一个缩写扩展器;一个HTML标签匹配器。

使用Ctrl + Alt + Enter 呼出ZenCoding,我们可以用
div#content>ul>li*3>a[href="javascript:void(0);"]{Links$}
这样短短的一句话,生成下面一段代码:

<did id="content">

<ul>

<li><a
href="javascript:void(0);">Links1</a></li>

<li><a
href="javascript:void(0);">Links2</a></li>

<li><a
href="javascript:void(0);">Links3</a></li>

</ul>

</did>

这样神奇的书写方式,配合Sublime Text 实时预览的功能,整个过程真是妙不可言。

Zen Coding 插件的安装

插件的安装过程在参考资料中说的非常清楚,这里摘录出来以备后用。

1、安装包控制 Package Control。

使用Ctrl + `调出Console,然后输入以下代码并执行。





import urllib2,os;pf=‘Package
Control.sublime-package‘
;ipp=sublime.installed_packages_path();os.makedirs(ipp) ifnot
os.path.exists(ipp) 
elseNone;open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(http://sublime.wbond.net/+pf.replace(
,‘%20‘)).read())

2、重启Sublime Text 2,在Preferences->Package Settings中看到Package
Control这一项表示安装成功。

3、通过Command + Shift+ P调出包管理,输入 Install ,选择Install Package

4、之后再输入zen coding来找到要安装的包,安装后就可以使用了。

安装完成后,我们就可以使用Ctrol + Alt + Enter
来呼出ZenCoding了。实际上,所有的安装包的路径,我们也可以直接下载ZenCoding的代码包,放到这个路径下。

除了Sublime Text 之外,Zen Coding还支持其他众多的编辑器,列表如下,看看有没有自己平时喜欢的编辑器吧。

Officially supported editors



Third-party supported editors


Zen Coding 的用法

使用ZenCoding编写代码时,需要遵循一定的缩写规则:

  • E
    元素名(div、p);

  • E#id
    带Id的元素(div#content、p#intro、span#error);

  • E.class
    带class的的元素(div.header、p.error),id和class可以连着写,div#content.column

  • E>N
    子元素(div>p、div#footer>p>span)

  • E*N
    多项元素(ul#nav>li*5>a)

  • E+N
    多项元素

  • E$*N
    带序号的元素

Sublime Text 中使用Zen Coding的一些技巧

1、缩写扩展(Expand Abbreviation)。

之前知道,通过Control + Alt +
Enter可以在一个新行中输入ZC的缩写,来生成代码。同时,如果我们在编辑中直接书写了ZC缩写,比如 div#content>p
当光标放置在p之后时,可以通过Tab键来扩展,ZC会从光标处开始向左侧搜索到第一个空白处,之间的代码作为ZC缩写,这样不必每次打开新行输入,提高了效率,缺点就是不能够实时预览。

2、嵌套代码(Wrap with Abbreviation)

如上图所示,可以实现在已经写好的代码外面嵌套其他的代码,实现方式是将光标放置到想要嵌套的标签上,然后使用Control + Alt + Enter
呼出ZC的命令行,就可以了。

其实Zen Coding还提供了很多方便代码编写的操作,例如标签匹配、返回上一个/下一个编辑点、更新img标签、合并行等,但是因为在Sublime
Text中没有提供完整的支持,所以这些特性还无法使用。

参考资料:

1、Sublime
Text 2 安装Zen Coding

2、百度百科 Zen
Coding

3、Zen Coding

4、关于使用Sublime Text
2的那些事儿

5、Sublime Text

6、ZenCoding CSS
Properties

7、Zen
Coding in Sublime Text 2

8、Zen Coding
让NotePad++代码书写健步如飞

9、Sublime
Text 2 编辑器实用技巧

[插件]ZenCoding-HTML/CSS代码编辑利器,布布扣,bubuko.com

时间: 2024-10-16 21:22:04

[插件]ZenCoding-HTML/CSS代码编辑利器的相关文章

Emmet插件:HTML/CSS代码快速编写神器

Emmet插件的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: 该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1.  初始化  HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入

sublime格式化css代码插件:css format

有时会从网上下载一些css压缩文件,打开后所有代码都在一行,不利于阅读,通过css format插件,能快速展开代码,方便阅读. 参考:Sublime Text 上最好用的 CSS 格式化插件 —— CSS Format css format 下载:https://github.com/mutian/Sublime-CSS-Format, 下载后解压到sublime Packages目录下,菜单栏preference-->Brower Packages 安装css format插件后,选择代码,

(webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:  Zen coding下的编码演示 去年年底,该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你

sublime 插件 Emmet(HTML/CSS代码快速编写神器)

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: 该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入&quo

代码编辑器之sublime text插件

Sublime SFTP CTags – 让Sublime Text支持CTags. SideBarEnhancement – 为侧边栏添加很多额外的功能. ActualVim – Vim in Sublime – 两个最爱的编辑器合二为一. SublimeLinter – 行内语法检测插件,支持: C/C++, Java, Python, PHP, JS, HTML, CSS, etc. CSScomb – CSS代码风格格式化. FixMyJS, Jsfmt and JsFormat – J

Emmet:一个Html/Css快速编辑神器的插件

一.介绍:Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度 二.使用方法: 参考自:http://www.iteye.com/news/27580 一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入“!”或“html:5

Sublime Text 3插件之Emmet:HTML/CSS代码快速编写神器

一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签.比如输入“!”或“html:5”,然后按Tab键: html:5 或!:用于HTML5文档类型 html:xt:用于XHTML过渡文档类型 html:4s:用于HTML4严格文档类型 2.  轻松添加类.id.文本和属性 连续输入元素名称和ID,Emmet会自动为你补全,比如p.bar#foo,会自动生成:

Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)

一.Emmet的安装与介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官方文档:http://docs.emmet.io/cheat-sheet/ Atom的emmet介绍页面:https://atom.io/packages/emmet 1,使用Emmet的好处 通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动我们的生产

sublime 安装格式化css代码插件:css format

1.先下载css format ,下载地址:https://github.com/mutian/Sublime-CSS-Format, 2.下载后解压到sublime Packages目录下,菜单栏preference-->Brower Packages 3.安装css format插件后,选择代码,菜单栏Edit-->css Format-->Expanded,展开代码.此时插件安装完成 原文地址:https://www.cnblogs.com/cui-cui/p/11429116.h