Emmet - инструмент для веб-разработчика

  • Published on
    28-Nov-2014

  • View
    1.048

  • Download
    2

Embed Size (px)

DESCRIPTION

by Sergej Chikuyonok on Frontend DEV Conf'13 http://bit.ly/Sergey_Chikuyonok

Transcript

  • 1. Emmet | http://emmet.io
  • 2. Emmet? HTML CSS JavaScript,
  • 3. Emmet?
  • 4. -
  • 5. 1990-: Microsoft FrontPage
  • 6. 2000-: -
  • 7. 2010-: Sublime Text,WebIDE
  • 8. Sublime Text WebIDE API
  • 9. -:Sublime Text WebIDE HTML CSS API Java API AST,
  • 10. -
  • 11. ?
  • 12. !
  • 13. : , ,
  • 14. :
  • 15. : JavaScript HTML CSS DOM
  • 16. Emmet -
  • 17. Emmet JavaScript
  • 18. Emmet .js .json-
  • 19. HTML- CSS- DOM-
  • 20. HTML-
  • 21. HTML-
  • 22. emmet.exec(function(require, _) {require(filters).add(my_filter, function process(tree, profile) {_.each(tree.children, function(item) {// HTMLitem.start = < + item.name() + >;item.end = + item.name() + >;// Jadeitem.start = item.name() + n;item.padding = t;// item.start = item.start.replace(/, /g, >);// process(item, profile);});});}); div>em|my_filter
  • 23. var tag = emmet.require(htmlMatcher).tag(hello world, // , 12 // , );tag.open = { // name: em,selfClose: false, // range: new Range() // {start: 6, end: 10}};tag.close = {...}; // tag.innerRange = new Range(); // {start: 10, end: 15}tag.innerContent = function(){}; // worldtag.outerRange = new Range(); // {start: 6, end: 20}tag.outerContent = function(){}; // worldtag.range = innerRange || outerRange;tag.content = innerContent || outerContent; HTML-
  • 24. emmet.exec(function(require, _) {require(actions).add(rename_tag, function(editor) {var tag = require(htmlMatcher).tag(editor.getContent(), editor.getCaretPos());if (tag) {var newName = editor.prompt( );if (tag.close) {editor.replaceContent( + newName + >,tag.close.range.start,tag.close.range.end);}editor.replaceContent(< + newName,tag.open.range.start,tag.open.range.start + tag.open.name.length + 1);}});});:
  • 25. HTML CSS(EditTree) HTML- CSS- DOM /,
  • 26. var tree = emmet.require(xmlEditTree).parse();tree.value(attr1); // val1tree.get(attr1).range(); // {start: 5, end: 17}tree.value(attr1, Hello world);tree.remove(attr2);tree.add(a, b, 0);tree.source; // HTML(xmlEditTree)
  • 27. var tree = emmet.require(cssEditTree).parse(div {color: red});// parseFromPosition(content, pos)// tree.value(color, black);tree.value(position, relative);tree.source; // div {color: black;position: relative;} CSS(cssEditTree)
  • 28.
  • 29. ?serge.che@gmail.comhttp://emmet.io@emmetio

Recommended

View more >