【04】emmet系列之编辑器_html/css_WEB-ITnose

【01】emmet系列之基础介绍

　　【02】emmet系列之HTML语法

　　【03】emmet系列之CSS语法

　　【04】emmet系列之编辑器

　　【05】emmet系列之各种缩写

前端开发人员，常用的是sublime和webstorm。

emmet在sublime上的效果：

1). css ：他与其它编辑器的区别在于细节上，比如ctrl,alt+方向键可以修和里边的数值

2). html 效果：

3). sublime的emmet规则修改：

packages->Emmet->emmet->snippets.json

emmet在webstorm上的效果：

只有一个例外jetbrain公司的产品线：webstorm,phpstorm,intellij idea都是内置的，不需要安装。

1).

写js的效果：

2). webstorm的emmet规则修改：Files -> settings -> Live Templates

定制

你还可以定制Emmet插件：

添加新缩写或更新现有缩写，可修改snippets.json文件 更改Emmet过滤器和操作的行为，可修改preferences.json文件 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

针对不同编辑器的插件

Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：

Sublime Text 3/2 TextMate 1.x Eclipse/Aptana Coda 1.6 and 2.x Espresso Chocolat （通过“Install Mixin”对话框添加) Komodo Edit/IDE （通过Tools → Add-ons菜单添加) Notepad++ PSPad CodeMirror2/3 Brackets

在线编辑器的支持：

JSFiddle JS Bin CodePen ICEcoder Divshot Codio

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。

SynWrite WebStorm PhpStorm Vim HTML-Kit HippoEDIT CodeLobster PHP Edition TinyMCE

查看更多关于【04】emmet系列之编辑器_html/css_WEB-ITnose的详细内容...