身為一個前端工程師,一定要裝一個神奇的外掛 - EMMET, 省下的時間可以跟同事喝杯咖啡跟看喵星人影片。

1. 身為⼀個前端⼯程師，⼀定要裝⼀個神奇的外掛 - EMMET，
省下的時間可以跟同事喝杯咖啡。
PHOEBE PAN - 2015.10.22
前端開發神器 - EMMET

2. 前端開發神器 - EMMET
AGENDA
▸ Sublime plugin - Emmet
▸ Emmet HTML
▸ Emmet CSS & SASS
▸
▸ Emmet
▸
▸ References

3. 前端開發神器 - EMMET
EMMET 介紹
▸ Zen Coding Emmet
Zen Coding
(ZenCoding )
▸
▸ HTML from CSS
HTML CSS SASS
▸ JSON

4. 前端開發神器 - EMMET
使⽤ EMMET ⽣成 HTML 語法詳解
▸ HTML
▸ CSS
▸ javascript
▸ id class HTML
▸ >
▸ +
▸ ^
▸ *
▸ $
▸ {}
▸ [attr]
▸ ()
▸

5. 前端開發神器 - EMMET
使⽤ EMMET 提⾼編寫 CSS & SASS 效率
▸
▸
▸ Emmet http://docs.emmet.io/cheat-sheet/

6. 前端開發神器 - EMMET
常⽤功能
▸ Div
▸ #container, .item
▸
▸ p>lorem
▸ DOM
▸ > DOM
▸ + DOM
▸ ^
▸
▸ Class
▸ .one.two.three
▸ $
▸ .item${item$$}*5

7. 如何⾃刻⼀個的 HTML
結構 TEMPLATE?

8. 前端開發神器 - EMMET
⾃訂 EMMET 常⽤的網⾴標籤語法並快速輸出
▸ Sublime Preferences / Package Settings /Emmet / Settings-User

9. 前端開發神器 - EMMET
▸ "htmlmo" HTML Template
▸ n t

10. Ｑ＆Ａ

11. 補充
▸ Emmet

12. 補充
▸ Emmet Emmet LiveStyle
▸ https://www.youtube.com/watch?v=iQLhGbkupS4
▸ Emmet LiveStyle
▸ --
▸
▸
▸ CSS LiveStyle
▸
▸ Sublime Text 3 Google
▸ Sublime Text 3
▸ Sublime Text 3 Ctrl + Shift + P Install Package LiveStyle
▸ Chrome
▸ Chrome Emmet LiveStyle
▸
EMMET LIVESTYLE

13. 補充
▸
Github Available actions
▸ Tab
▸ Ctrl+Alt+→
▸ Ctrl+Alt+←
▸ Shift+Command+.
▸ Shift+Command+,
▸ Ctrl+D
▸ Command+D
▸ Ctrl+/
快速鍵

14. 補充
▸ ⌘(Command ) Apple
▸ ^(Control )
▸ ⌥(Option ) Alt
▸ ⇧(Shift )
▸ ⇪(Caps Lock) Caps Lock
▸ Fn ( ) Mac
▸ Command + ⌫
MAC 常⽤鍵盤符號

15. 前端開發神器 - EMMET
REFERENCES
▸ Emmet
▸ Emmet HTML
▸ Emmet CSS
▸ Emmet Documentation
▸ Emmet cheat sheet
▸ Emmet.sublime-setting
▸ Emmet
▸ Emmet
▸ Available-actions
▸ EMMET LIVESTYLE
▸ Emmet LiveStyle (beta)