{"componentChunkName":"component---src-templates-blog-template-js","path":"/blog/2020-04-28-html-shortcuts-react/","result":{"data":{"site":{"id":"Site","siteMetadata":{"siteUrl":"https://fredybustos.com"}},"markdownRemark":{"id":"fd9fa35c-2590-5094-9daa-c8949ce296e3","html":"<p>Existe un plugin muy famoso que todos conocemos que se llama <strong><em><a href=\"https://atom.io/packages/emmet\">emmet</a>,</em></strong> que está para muchos editores de texto, pues por alguna razón este plugin no me funciona con<em>React</em>, trate de solucionarlo de muchas maneras hasta que me canse y no lo intente más. Teniendo en cuenta esto, y que cuando estamos desarrollando nos gustaría agilizar a la hora de usar un tag en html, donde debemos abrir una etiqueta, luego cerrarla, poner una clase, agregar un id, etc. En esto es bueno <em>emmet</em>, pero el problema es que no me funciona.</p>\n<p>Cansado de esto hice mis propios <em>snippets</em>, los que más uso a diario, y los tenía solo para mi uso, pensé ‘¿por qué no compartirlos? ¿quizá le sean de utilidad a alguien más? ¿alguien con el mismo problema que yo?.</p>\n<p>Busque en la documentación de <em>Atom</em> cómo crear y subir estos <em>snippets</em> que tenia para mi uso, y bueno decidí crearlo y compartirlo. Documentación de Atom <strong><a href=\"https://flight-manual.atom.io/hacking-atom/sections/package-word-count/\">aquí</a></strong>.</p>\n<p>Bueno sin mas largas les presento <strong><em><a href=\"https://atom.io/packages/html-shorcuts-react\">html-shorcuts-react</a></em></strong></p>\n<p><img src=\"/img/atom-package.png\" alt=\"atom-package\" title=\"Atom package\"></p>\n<p>Un pequeño plugin que nos ayuda con los <em>tags</em> de html en<em>React</em>.</p>\n<p>En el repositorio de <strong><em><a href=\"https://github.com/fredybustos/atomPackage\">GitHub</a></em></strong> esta la documentación y en el <strong><em><a href=\"https://github.com/fredybustos/atomPackage/wiki\">wiki</a></em></strong> del mismo, todos los <em>shortcuts</em> que puedes usar.</p>\n<p>Si quieren hacer un <em>request</em> estaré encantado de recibirlo. Comentarios siempre bien recibidos.</p>\n<p>Saludos.</p>","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Existe un plugin muy famoso que todos conocemos que se llama "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://atom.io/packages/emmet"},"children":[{"type":"text","value":"emmet"}]},{"type":"text","value":","}]}]},{"type":"text","value":" que está para muchos editores de texto, pues por alguna razón este plugin no me funciona con"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"React"}]},{"type":"text","value":", trate de solucionarlo de muchas maneras hasta que me canse y no lo intente más. Teniendo en cuenta esto, y que cuando estamos desarrollando nos gustaría agilizar a la hora de usar un tag en html, donde debemos abrir una etiqueta, luego cerrarla, poner una clase, agregar un id, etc. En esto es bueno "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"emmet"}]},{"type":"text","value":", pero el problema es que no me funciona."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cansado de esto hice mis propios "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"snippets"}]},{"type":"text","value":", los que más uso a diario, y los tenía solo para mi uso, pensé ‘¿por qué no compartirlos? ¿quizá le sean de utilidad a alguien más? ¿alguien con el mismo problema que yo?."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Busque en la documentación de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Atom"}]},{"type":"text","value":" cómo crear y subir estos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"snippets"}]},{"type":"text","value":" que tenia para mi uso, y bueno decidí crearlo y compartirlo. Documentación de Atom "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://flight-manual.atom.io/hacking-atom/sections/package-word-count/"},"children":[{"type":"text","value":"aquí"}]}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno sin mas largas les presento "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://atom.io/packages/html-shorcuts-react"},"children":[{"type":"text","value":"html-shorcuts-react"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"/img/atom-package.png","alt":"atom-package","title":"Atom package"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un pequeño plugin que nos ayuda con los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"tags"}]},{"type":"text","value":" de html en"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"React"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En el repositorio de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/fredybustos/atomPackage"},"children":[{"type":"text","value":"GitHub"}]}]}]},{"type":"text","value":" esta la documentación y en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/fredybustos/atomPackage/wiki"},"children":[{"type":"text","value":"wiki"}]}]}]},{"type":"text","value":" del mismo, todos los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"shortcuts"}]},{"type":"text","value":" que puedes usar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si quieren hacer un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"request"}]},{"type":"text","value":" estaré encantado de recibirlo. Comentarios siempre bien recibidos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Saludos."}]}],"data":{"quirksMode":false}},"frontmatter":{"date":"June 24, 2017","title":"Plugin atom html shortcuts!","metaDescription":null,"thumbnail":{"id":"4adda2da-6842-53a2-9273-611be48b1697","childImageSharp":{"id":"3b21361b-a132-5d41-b157-5daa86ff2605","fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAABdUlEQVQoz4VSSU/CUBDuz+ZuOLgcvEhCPAgBFLFAZW0RWtAWiGURCCAte1vasnQR1GA0ceRgSKNp8vKSeW9mvmUG0RcTyzGW05U6Ymmy36m9mjNjMXlusQt5YKymlkzEEmvz8cac0SSejqJFiuDb1dugPxm+hmNqAvzaFG/f5rkkBviqxEcCXkXgvj70bCK6lIc2yOZK4NoVn9sVOHefHR1GL3251C2Fx4EFaFnr0j44so/5oon3mSSklgt3p05ng6UnfAuUl/JEkSSgUb9bh5zfesRiFerzyEJPGLRdJ8fKlDtwOAbdOnBe66I46oS8F38XwxOwAocqDEln02G/p1rKS+MuPDIkUSsXGIpgSHyfOWK12piBtnQkBDcW9C+V4ftG7bVYKh1TRB4c+dewHbi444l9brWnxwfQuTYkTR3jGAoztxkVyIZ9SEVCcTQIVJsVJnFzlcdjBSLx08V2zsBNFrhhrwEhLMyIa5bymbnUh76W5G9aQTRe0imjIwAAAABJRU5ErkJggg==","aspectRatio":1.9021739130434783,"src":"/static/49cc8167bfcc869b31700e6ac3c14061/73c85/atom.png","srcSet":"/static/49cc8167bfcc869b31700e6ac3c14061/d4144/atom.png 175w,\n/static/49cc8167bfcc869b31700e6ac3c14061/a5370/atom.png 350w,\n/static/49cc8167bfcc869b31700e6ac3c14061/73c85/atom.png 700w,\n/static/49cc8167bfcc869b31700e6ac3c14061/4ff95/atom.png 1050w,\n/static/49cc8167bfcc869b31700e6ac3c14061/f3583/atom.png 1200w","sizes":"(max-width: 700px) 100vw, 700px"}}}}}},"pageContext":{"id":"fd9fa35c-2590-5094-9daa-c8949ce296e3","previous":{"id":"daf6302b-0a6a-5322-846e-0ed40c1b0390","fields":{"slug":"/blog/2020-04-28-como-he-optimizado-mi tiempo/"},"frontmatter":{"date":"June 21, 2017","title":"Como he optimizado mi tiempo!!"}},"next":{"id":"791c204a-5ca8-52ee-a39e-78a407a9eebe","fields":{"slug":"/blog/2020-02-20-with-code/"},"frontmatter":{"date":"September 15, 2018","title":"Descargar archivos csv"}}}}}