Sublime Text 2的Emmet插件安装

我的github http://github.com/wangqianfront

 

 

你想敲个“a”就生成一个链接标签吗?Emmet就是干这个的(原名叫Zen Coding),Sublime Text 2配上这个插件,写HTML就可以做到“键码如飞”了。

  1. Ctrl+Shift+P打开“Command Palette...”

  2. 输入“install”,打开“Install Package”

  3. 选择“Emmet”插件,安装之,看左下角状态栏的安装信息。如果安装不成功,可以去这里下载Emmet插件手动安装,通过“Browse Packages...”菜单项打开包目录,把Emmet插件安装包解压到此即可

  4. 重启Sublime,注意Emmet会安装PyV8,需要一定时间,见到PyV8错误提示稍安勿躁,需等待一小会儿。状态栏会有相应提示。如果安装失败,可以手动安装,手动安装参见这里

接下来就可以试试Emmet的威力了:

建一个HTML文件:

  • 输入html:5,按Tab或Ctrl+E键,看看发生了什么;
  • 输入a,同样按Tab或Ctrl+E键,看看发生了什么;
  • 输入div+p+bq......

 

咋样?很爽吧?^_^
部分快捷方式参考这里
具体的使用请参考:这里这里

 

Emmet 也有快速生成文件头的功能啊,而且更强大啊。输入下边加粗的缩写,然后Tab,就OK了啊

html:4t

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <htmllang="${lang}">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=${charset}">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:4s

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <htmllang="${lang}">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=${charset}">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:xt

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="${lang}">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=${charset}"/>
  5. <title></title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:xs

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="${lang}">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=${charset}"/>
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:xxs

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="${lang}">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=${charset}"/>
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

html:5

  1. <!doctype html>
  2. <htmllang="${lang}">
  3. <head>
  4. <metacharset="${charset}">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. ${child}
  9. </body>
  10. </html>

 

你可能感兴趣的:(sublime text 2,emmet)