【04】emmet系列之編輯器

 

　  【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
• <textarea>
• CodeMirror2/3
• Brackets

在線編輯器的支持：

•  JSFiddle
•  JS Bin
•  CodePen
•  ICEcoder
•  Divshot
•  Codio

第三方插件的支持

下面這些編輯器的插件都是由第三方開發者所提供的，因此可能並不支持全部Emmet的功能和特性。

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