Sublime text3 013 emmet 插件

時間 2019-11-26

標籤 sublime text3 text emmet 插件欄目 HTML 简体版

原文原文鏈接

Sublime text3 013 emmet 插件
------------------------------------------------------------------------------
若是有什麼不明白的，加QQ羣：186970878css

常常會有錯字或語句不通的，歡迎聯繫本人，方便快速修正，也方便後來者閱讀。html

聯繫本人QQ： 2071551682
------------------------------------------------------------------------------
----------------- Emmet 插件用處 ------------前端

新建一個 html 文件，輸入 ! , html:5 , <html 前面三種代碼任意一個，按 Tab 鍵 ( Ctrl + E ) ，自動補全。html5

------------- 默認生成代碼 --------------git

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

</body>
</html>github

------------- 以上默認生成代碼 --------------ide

----------------- Emmet簡介 ------------------工具

　　Emmet (前身是 Zen Coding)是一個前端開發不可缺乏的插件，它讓編寫 HTML 和 CSS 代碼變得簡單，節省大量時間。Emmet可以使開發者用縮寫形式書寫代碼，再用「擴展」功能自動將代碼擴展至完整樣式。this

　　早在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
------------------------------