Sublime text3 013 emmet 插件

Posted 2020-11-19 qy123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Sublime text3 013 emmet 插件相关的知识，希望对你有一定的参考价值。

Sublime text3 013 emmet 插件
------------------------------------------------------------------------------
如果有什么不明白的，加QQ群：186970878

经常会有错字或语句不通的，欢迎联系本人，方便快速修正，也方便后来者阅读。

联系本人QQ： 2071551682
------------------------------------------------------------------------------
----------------- Emmet 插件用处 ------------

新建一个 html 文件，输入 ! , html:5 , <html 前面三种代码任意一个，按 Tab 键 ( Ctrl + E ) ，自动补全。

------------- 默认生成代码 --------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

------------- 以上默认生成代码 --------------

----------------- Emmet简介 ------------------

　　Emmet (前身是 Zen Coding)是一个前端开发不可缺少的插件，它让编写 HTML 和 CSS 代码变得简单，节省大量时间。Emmet可使开发者用缩写形式书写代码，再用“扩展”功能自动将代码扩展至完整样式。

　　早在2009年，Zen Coding作为具有革命性的 HTML 和 CSS 代码编辑插件一经问世，直到现在帮助了无数的开发者，减少他们的时间，使得编写代码变得简便有趣。现在，Emmet已经超越了Zen Coding到达了更高层次，普适性的功能将给更多的开发者带来便利。

　　插件下载：https://github.com/sergeche/emmet-sublime

----------------- emmet 插件安装 ------------------------------

Installed Packages 执行完成后

菜单 > Tools > Command Palette (命令面板) Ctr + Shift + P
Menu > 工具 > 命令面板

菜单 > 首选项 > Package Control
Menu > Preferences > Package Control (两处菜单都可以打开这个插件面板)

如果命令面板里有 package control: 这样的字样，就代表安装完成。

然后输入 Install Package，选择第一个 Package Control: Install Package

在出现的插件面板输入 emme 安装这个插件 Emmet。

----------------------------------------------------------------------------------
去菜单中找一下安装的插件 Preferences > Package Settings > 有这个菜单，就说明已经安装成功

这回再去安装 Install Package , 查找 emmet 找不到，也说明已经安装。

----------------------------------------------------------------------------------
------------ ************ 下面是安装成功提示 ************* ------------

Emmet
-----

Thank you for installing Emmet -- a toolkit that can greatly improve your workflow. Note that this plugin automatically downloads and installs PyV8 binary (see status bar message).

******************************
Please restart editor
to finish installation process
after PyV8 was downloaded.
******************************

Tab key handler
==========================

By default, Emmet allows you to expand abbreviations with Tab key in HTML, XML, HAML and CSS/SASS/LESS/Stylus documents. As a side effect, you can’t use some of your ST2 snippets.

Please read https://github.com/sergeche/emmet-sublime#tab-key-handler about how Tab handler works and how to tweak its behavior to match your needs.

Enter key
==========================

In HTML and XML documents, Emmet overrides Enter key to insert formatted line breaks between opening and closing tags. In some cases it will break character input (for example, in Japanese language).

To disable Enter key handler, simply add the following option in your user‘s Preferences file:

"disable_formatted_linebreak": true

Actions shortcuts
==========================

Emmet has a number of actions with keyboard shortcuts that may override ones you‘re using commonly (for example, Ctrl-E or Ctrl-Down). Please read the project main page to get list of available actions and keyboard shortcuts and how to disable them:
https://github.com/sergeche/emmet-sublime

Documentation and examples:
http://emmet.io

------------------------------
Follow me on Twitter: @emmetio
------------------------------