{"id":43347,"date":"2024-09-10T12:07:47","date_gmt":"2024-09-10T18:07:47","guid":{"rendered":"https:\/\/webirix.com\/?p=43347"},"modified":"2024-09-10T12:07:47","modified_gmt":"2024-09-10T18:07:47","slug":"creacion-de-snippets-de-javascript-en-vs-code","status":"publish","type":"post","link":"https:\/\/webirix.com\/en\/creacion-de-snippets-de-javascript-en-vs-code\/","title":{"rendered":"Creaci\u00f3n de Snippets de JavaScript en VS Code"},"content":{"rendered":"<p>En esta ocasi\u00f3n te ense\u00f1aremos a crear tus propios snippets personalizados en visual studio code para JavaScript. Esto puede llegar a ser muy \u00fatil en casos donde tengas que crear el mismo c\u00f3digo base en varios de tus archivos sin tener que escribir todo el c\u00f3digo cada que crees un archivo nuevo.<\/p>\n<p>Por ejemplo, en lugar de crear una funci\u00f3n de flecha escribiendo a mano todo el siguiente c\u00f3digo:<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43355\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8-300x71.png\" alt=\"\" width=\"300\" height=\"71\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8-300x71.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8-335x79.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8.png 434w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Puedes simplemente escribir &#8220;arrowFunc&#8221;, presionar la tecla de tabular y crear todo el c\u00f3digo que acabamos de mencionarte.<\/p>\n<p>Bien, para crear tu propio snippet, debes presionar las teclas Shift + Control + P dentro de visual studio Code y escribir la palabra &#8220;snippets&#8221; y seleccionar la opci\u00f3n Configure Snippets.<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43348\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets1-300x71.png\" alt=\"\" width=\"300\" height=\"71\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets1-300x71.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets1-335x79.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets1.png 688w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Posteriormente, deber\u00e1s escribir JavaScript y abrir la opci\u00f3n javascipt.json<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43349\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets2-300x56.png\" alt=\"\" width=\"300\" height=\"56\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets2-300x56.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets2-335x63.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets2.png 670w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nUna vez abierto ver\u00e1s el siguiente c\u00f3digo comentado<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43350\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets3-300x111.png\" alt=\"\" width=\"300\" height=\"111\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets3-300x111.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets3-768x283.png 768w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets3-335x123.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets3.png 890w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nCopia el ejemplo y p\u00e9galo debajo de los comentarios y descomenta las l\u00edneas que acabas de copiar<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43351\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets4-300x164.png\" alt=\"\" width=\"300\" height=\"164\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets4-300x164.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets4-150x83.png 150w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets4-335x184.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets4.png 385w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nSi guardas este archivo y escribes &#8220;log&#8221; en un archivo .js ver\u00e1s el snippet de la siguiente manera:<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43352\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets5-300x51.png\" alt=\"\" width=\"300\" height=\"51\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets5-300x51.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets5-768x130.png 768w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets5-335x57.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets5.png 811w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nAqu\u00ed podemos apreciar lo siguiente:<\/p>\n<ul>\n<li>&#8220;Print Console&#8221; es el mensaje que nos sale a la derecha, es el &#8220;titulo&#8221; de lo nuestro snippet<\/li>\n<li>&#8220;prefix&#8221; es la palabra que debemos escribir para ejecutar nuestro snippet<\/li>\n<li>&#8220;body&#8221; es el contenido de nuestro snippet, este debe ir dentro de los corchetes &#8220;[ ]&#8221;<\/li>\n<li>&#8220;decription&#8221; es como su nombre lo indica una descripci\u00f3n de lo que hace nuestro snippet<\/li>\n<li>&#8220;${1:Template}&#8221; escribiendo esta palabra dentro del body, al momento de crear tu snippet se seleccionar\u00e1 todas las palabras donde este peque\u00f1o texto, si incrementas el n\u00famero al tabular el snippet pasar\u00e1 a editar la siguiente variable o texto<\/li>\n<\/ul>\n<p>Nota* Dentro de body cada l\u00ednea debe de ir entre comillas dobles ( &#8220;&#8221; ) y finalizar con una coma ( , )<\/p>\n<p>Bien, ahora editemos este snippet para crear una funci\u00f3n. Deber\u00eda quedar de la siguiente manera (al menos para este ejemplo, si\u00e9ntete libre de editarlo a tus necesidades)<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43353\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets6-300x140.png\" alt=\"\" width=\"300\" height=\"140\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets6-300x140.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets6-335x156.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets6.png 582w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Ahora vamos a crear nuestro archivo de pruebas y escribamos &#8220;arrowFunc&#8221; (o lo que le hayas\u00a0 escrito en tu caso)<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43354\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets7-300x66.png\" alt=\"\" width=\"300\" height=\"66\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets7-300x66.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets7-768x170.png 768w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets7-335x74.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets7.png 898w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Ahora tabulamos o presionamos enter y ejecutaremos nuestro snippet personalizado y como puedes ver,\u00a0 los campos donde escribimos ${1:nombreFuncion} est\u00e1n seleccionados, ahora si editamos estos textos se editar\u00e1n ambos al mismo tiempo.<\/p>\n<p><a href=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-43355\" src=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8-300x71.png\" alt=\"\" width=\"300\" height=\"71\" srcset=\"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8-300x71.png 300w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8-335x79.png 335w, https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/snippets8.png 434w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Bien, ahora que ya sabes crear snippets esperamos que este te ayude a ahorrar tiempo c\u00f3dificando<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En esta ocasi\u00f3n te ense\u00f1aremos a crear tus propios snippets personalizados en visual studio code para JavaScript. Esto puede llegar a ser muy \u00fatil en casos donde tengas que crear el mismo c\u00f3digo base en varios de tus archivos sin tener que escribir todo el c\u00f3digo cada que crees un archivo nuevo. Por ejemplo, en &#8230;<\/p>","protected":false},"author":4980,"featured_media":43358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2716],"tags":[],"class_list":["post-43347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"jetpack_featured_media_url":"https:\/\/webirix.com\/wp-content\/uploads\/2024\/09\/codigo-1024x546-1.jpg","_links":{"self":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/43347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/users\/4980"}],"replies":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/comments?post=43347"}],"version-history":[{"count":2,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/43347\/revisions"}],"predecessor-version":[{"id":43357,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/posts\/43347\/revisions\/43357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media\/43358"}],"wp:attachment":[{"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/media?parent=43347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/categories?post=43347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webirix.com\/en\/wp-json\/wp\/v2\/tags?post=43347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}