{"id":16084,"date":"2023-08-25T13:00:00","date_gmt":"2023-08-25T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=16084"},"modified":"2023-08-24T08:17:59","modified_gmt":"2023-08-24T06:17:59","slug":"atajos-de-emmet-para-visual-studio-code","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/","title":{"rendered":"Atajos de Emmet para Visual Studio Code"},"content":{"rendered":"\n<p>Escribir c\u00f3digo puede resultar una tarea muy pesada. La sintaxis de cada lenguaje se debe respetar a la perfecci\u00f3n. \u00bfCu\u00e1ntas veces te ha pasado que terminas de escribir el c\u00f3digo de una p\u00e1gina y no se ve como quieres? Esto es el d\u00eda a d\u00eda de un programador. Muchas de las causas son producidas por errores de sintaxis. Falta cerrar una llave o nos hemos dejado unas comillas por poner, por ejemplo. Adem\u00e1s, gastamos mucho tiempo en escribir el c\u00f3digo. <\/p>\n\n\n\n<p>\u00bfQu\u00e9 me dir\u00edas si te dijera que puedes ahorrar tiempo y evitar cometer muchos errores de sint\u00e1xis con una herramienta gratuita?<\/p>\n\n\n\n<p>En este art\u00edculo encontrar\u00e1s <strong>los atajos m\u00e1s utilizados de Emmet<\/strong> para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo. Podr\u00e1s hacerlo de forma r\u00e1pida y sin errores. Adem\u00e1s, al final del art\u00edculo te dejamos un <strong>regalo<\/strong> para que puedas sacarle mayor partido a esta extensi\u00f3n de VS Code. No seas impaciente y lee hasta el final.<\/p>\n\n\n\n<p>\u00a1Adelante!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ahorra tiempo escribiendo c\u00f3digo con atajos de Emmet<\/h2>\n\n\n\n<p>Antes que nada vamos a entender qu\u00e9 es <a href=\"https:\/\/emmet.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Emmet<\/a>. Se trata de una <strong>extensi\u00f3n de Visual Studio Code<\/strong> que permite realizar comandos y atajos que nos evitan tener que escribir toda la sintaxis de un c\u00f3digo. Tambi\u00e9n es posible usarla con otros editores como Sublime Text, Atom o Notepad++.<\/p>\n\n\n\n<p>Emmet cuenta con atajos para los siguientes lenguajes y librer\u00edas de programaci\u00f3n:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>HTML<\/li>\n\n\n\n<li>Haml<\/li>\n\n\n\n<li>Pug<\/li>\n\n\n\n<li>Slim<\/li>\n\n\n\n<li>Handlebars<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>JSX<\/li>\n\n\n\n<li>XML<\/li>\n\n\n\n<li>XSL<\/li>\n\n\n\n<li>CSS<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Scss<\/li>\n\n\n\n<li>Sass<\/li>\n\n\n\n<li>Less<\/li>\n\n\n\n<li>PHP<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<p>La diferencia con otros editores es que esta extensi\u00f3n actualmente <strong>viene integrada con Visual Studio<\/strong>, por lo que no requiere de una instalaci\u00f3n adicional. Sin embargo, si tienes una versi\u00f3n antigua de este editor que no venga con Emmet puedes instalarlo directamente desde el apartado de extensiones. Lo puedes ver en la barra lateral izquierda del editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"273\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/ahorra-tiempo-escribiendo-codigo-con-emmet.gif\" alt=\"Ahorra tiempo escribiendo c\u00f3digo con Emmet\" class=\"wp-image-16089\"\/><figcaption class=\"wp-element-caption\">GIF extra\u00eddo de code.visualstudio.com<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Atajos para operadores en Visual Studio Code<\/h2>\n\n\n\n<p>Aunque Emmet cuenta con <strong>abreviaturas y atajos espec\u00edficos para HTML, CSS y XSL<\/strong> realmente la sintaxis es muy sencilla. Tan solo es necesario conocer los atajos para cada operador.<\/p>\n\n\n\n<p>Para emplear los atajos simplemente podemos empezar a\u00f1adiendo el nombre de cualquier elemento HTML en una hoja de VS Code y pulsando la <strong>tecla \u00abTab\u00bb<\/strong> de nuestro teclado. De esta forma, Emmet har\u00e1 su magia y crear\u00e1 autom\u00e1ticamente la sintaxis del elemento que queremos a\u00f1adir.<\/p>\n\n\n\n<p>A partir de ah\u00ed, puedes concatenar diferentes operadores con elementos HTML para crear niveles de profundidad mayores con pocos caracteres. Para ver esta parte, a continuaci\u00f3n te detallamos los operadores m\u00e1s comunes que puedes utilizar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Operador hijo<\/h3>\n\n\n\n<p>Este operador se usa para anidar un hijo dentro de un contenedor padre mediante el <strong>s\u00edmbolo \u201c&gt;\u201d<\/strong>. Esto permite crear anidamiento de elementos y niveles de profundidad. Es el atajo m\u00e1s esencial de los que veremos.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-hijo-emmet-1.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador hermano<\/h3>\n\n\n\n<p>Este operador de Emmet se utiliza para a\u00f1adir elementos que son hermanos. Es decir, que est\u00e1n uno al mismo nivel que el otro. Para ello se utiliza el <strong>s\u00edmbolo \u00ab+\u00bb<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-hermano-emmet-1.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador padre<\/h3>\n\n\n\n<p>A trav\u00e9s de este operador podemos llamar a un elemento padre. Esto quiere decir que, una vez nos hemos metido en nivel de anidamiento, podemos volver a un nivel anterior con este operador. Para ello podemos utilizar el <strong>s\u00edmbolo \u00ab^\u00bb<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-padre-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador de agrupaci\u00f3n<\/h3>\n\n\n\n<p>Otra opci\u00f3n similar a la anterior es agrupar elementos hijo dentro de un elemento padre. De esta forma podemos continuar con el atajo para los siguientes elementos padre sin utilizar el operador padre. En este caso podemos usar los <strong>par\u00e9ntesis \u00ab()\u00bb<\/strong> para agrupar todos los elementos hijo que queramos.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-agrupacion-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador de multiplicaci\u00f3n<\/h3>\n\n\n\n<p>Este atajo de Emmet se emplea para crear varios elementos iguales en funci\u00f3n del n\u00famero de repeticiones que queramos. Esto se utiliza mucho, por ejemplo, para crear elementos <em>&lt;li&gt;<\/em> sin tener que ir uno por uno. El <strong>s\u00edmbolo<\/strong> que se utiliza es <strong>\u00ab*\u00bb<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-multiplicacion-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador de texto<\/h3>\n\n\n\n<p>Los atajos tambi\u00e9n nos permiten introducir texto personalizado dentro de elementos. Esto es \u00fatil por ejemplo, para botones, enlaces, encabezados o p\u00e1rrafos. Para ello, el texto introducido debe ir entre <strong>llaves \u00ab{}\u00bb<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-texto-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador de numeraci\u00f3n<\/h3>\n\n\n\n<p>Adicionalmente al operador anterior, podemos crear r\u00e1pidamente una numeraci\u00f3n que se puede unir al operador de texto. Resulta muy \u00fatil para paginaciones o men\u00fas de prueba. El <strong>s\u00edmbolo<\/strong> que se emplea es <strong>\u00ab$\u00bb<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-numeracion-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador de atributos ID y CLASE<\/h3>\n\n\n\n<p>Como su propio nombre indica, es posible a\u00f1adir clases e IDs r\u00e1pidamente a elementos HTML con la <strong>misma sintaxis que en CSS<\/strong>. Es decir, para <strong>clases<\/strong> basta con a\u00f1adir un <strong>punto \u00ab.\u00bb<\/strong> seguido del nombre de la clase a un elemento. Para <strong>IDs<\/strong> ser\u00eda lo mismo sustituyendo el punto por <strong>\u00ab#\u00bb<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-clases-ids-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Operador de atributos personalizados<\/h3>\n\n\n\n<p>Al igual que podemos a\u00f1adir clases e IDs a elementos tambi\u00e9n es posible a\u00f1adir atributos personalizados. Tan solo debemos a\u00f1adir el atributo entre <strong>corchetes \u00ab[]\u00bb<\/strong> al elemento en cuesti\u00f3n. La sintaxis ser\u00eda la siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p&#91;title=\"Hola mundo\"]<\/code><\/pre>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:80%\">\n<figure class=\"wp-block-video aligncenter\"><video height=\"420\" style=\"aspect-ratio: 1200 \/ 420;\" width=\"1200\" autoplay loop src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajo-operador-atributos-emmet.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusiones<\/h2>\n\n\n\n<p>Puedes combinar estos atajos entre ellos y experimentar como quieras. Cuando los tengas dominados te dar\u00e1s cuenta de que ya no puedes vivir sin esta herramienta en tu editor de texto. Como ya hemos comentado, puedes ahorrar mucho tiempo escribiendo c\u00f3digo. Emmet te permite realizar otro tipo de acciones muy \u00fatiles. <\/p>\n\n\n\n<p>Si has llegado hasta el final recordar\u00e1s que al principio te coment\u00e9 que tendr\u00edas un regalo. Se trata de una <a href=\"https:\/\/docs.emmet.io\/cheat-sheet\/\" target=\"_blank\" rel=\"noreferrer noopener\">gu\u00eda con todos los atajos y comandos de Emmet<\/a> para Visual Studio Code. Si quieres que profundicemos y hagamos otro art\u00edculo sobre otros atajos de Emmet para Visual Studio Code puedes dejarnos un comentario.<\/p>\n\n\n\n<p>Igualmente, te recuerdo que si no tienes mucha idea de programaci\u00f3n, pero te gustar\u00eda <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\/\">tener una web<\/a> con un dise\u00f1o atractivo, usable e ineractivo puedes contactar con nosotros.  Estaremos encantados de ayudarte.<\/p>\n\n\n\n<p>\u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns sabermas is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/cambiar-el-idioma-en-visual-studio-code\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/10\/idioma-visual-studio-code-1024x604.jpg\" alt=\"cambiar idioma visual studio code\" class=\"wp-image-7137\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/10\/idioma-visual-studio-code-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/10\/idioma-visual-studio-code-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/10\/idioma-visual-studio-code-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/10\/idioma-visual-studio-code.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/atajos-de-teclado-en-visual-studio-code\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/vs-atajos-1024x604.jpg\" alt=\"Atajos de teclado de Visual Studio Code\" class=\"wp-image-4966\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/vs-atajos-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/vs-atajos-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/vs-atajos-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/05\/vs-atajos.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Conoce los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo. Podr\u00e1s hacerlo de forma r\u00e1pida y sin errores.<\/p>\n","protected":false},"author":14,"featured_media":16164,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93,92],"class_list":["post-16084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css","tag-html"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Atajos de Emmet para Visual Studio Code - Caronte Studio<\/title>\n<meta name=\"description\" content=\"Te contamos los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Atajos de Emmet para Visual Studio Code - Caronte Studio\" \/>\n<meta property=\"og:description\" content=\"Te contamos los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-25T11:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajos-de-emmet-para-visual-studio-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Juan Felipe Fonseca\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Felipe Fonseca\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/\"},\"author\":{\"name\":\"Juan Felipe Fonseca\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/68dbb0701e132684b98907bc7051f327\"},\"headline\":\"Atajos de Emmet para Visual Studio Code\",\"datePublished\":\"2023-08-25T11:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/\"},\"wordCount\":1019,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/atajos-de-emmet-para-visual-studio-code.jpg\",\"keywords\":[\"CSS\",\"HTML\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/\",\"name\":\"Atajos de Emmet para Visual Studio Code - Caronte Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/atajos-de-emmet-para-visual-studio-code.jpg\",\"datePublished\":\"2023-08-25T11:00:00+00:00\",\"description\":\"Te contamos los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/atajos-de-emmet-para-visual-studio-code.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/atajos-de-emmet-para-visual-studio-code.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Atajos de Emmet para Visual Studio Code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/atajos-de-emmet-para-visual-studio-code\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Atajos de Emmet para Visual Studio Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/68dbb0701e132684b98907bc7051f327\",\"name\":\"Juan Felipe Fonseca\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9736a714928349b20d491e7339328f2ddf579584a26a9d082ecd19f7910dc4a4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9736a714928349b20d491e7339328f2ddf579584a26a9d082ecd19f7910dc4a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9736a714928349b20d491e7339328f2ddf579584a26a9d082ecd19f7910dc4a4?s=96&d=mm&r=g\",\"caption\":\"Juan Felipe Fonseca\"},\"description\":\"\u00bfTe interesa todo lo relacionado con SEM y\\\/o SEO? Juan Felipe Fonseca te trae los \u00faltimos consejos y tendencias sobre posicionamiento de pago y org\u00e1nico as\u00ed como herramientas, t\u00e9cnicas y recursos \u00fatiles para optimizar los resultados.\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/juanfe\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Atajos de Emmet para Visual Studio Code - Caronte Studio","description":"Te contamos los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/","og_locale":"es_ES","og_type":"article","og_title":"Atajos de Emmet para Visual Studio Code - Caronte Studio","og_description":"Te contamos los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo.","og_url":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2023-08-25T11:00:00+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajos-de-emmet-para-visual-studio-code.jpg","type":"image\/jpeg"}],"author":"Juan Felipe Fonseca","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Juan Felipe Fonseca","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/"},"author":{"name":"Juan Felipe Fonseca","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/68dbb0701e132684b98907bc7051f327"},"headline":"Atajos de Emmet para Visual Studio Code","datePublished":"2023-08-25T11:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/"},"wordCount":1019,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajos-de-emmet-para-visual-studio-code.jpg","keywords":["CSS","HTML"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/","url":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/","name":"Atajos de Emmet para Visual Studio Code - Caronte Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajos-de-emmet-para-visual-studio-code.jpg","datePublished":"2023-08-25T11:00:00+00:00","description":"Te contamos los atajos m\u00e1s utilizados de Emmet para Visual Studio Code que te ahorrar\u00e1n tiempo a la hora de escribir c\u00f3digo.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajos-de-emmet-para-visual-studio-code.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2023\/08\/atajos-de-emmet-para-visual-studio-code.jpg","width":1250,"height":737,"caption":"Atajos de Emmet para Visual Studio Code"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/atajos-de-emmet-para-visual-studio-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Atajos de Emmet para Visual Studio Code"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/68dbb0701e132684b98907bc7051f327","name":"Juan Felipe Fonseca","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/9736a714928349b20d491e7339328f2ddf579584a26a9d082ecd19f7910dc4a4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9736a714928349b20d491e7339328f2ddf579584a26a9d082ecd19f7910dc4a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9736a714928349b20d491e7339328f2ddf579584a26a9d082ecd19f7910dc4a4?s=96&d=mm&r=g","caption":"Juan Felipe Fonseca"},"description":"\u00bfTe interesa todo lo relacionado con SEM y\/o SEO? Juan Felipe Fonseca te trae los \u00faltimos consejos y tendencias sobre posicionamiento de pago y org\u00e1nico as\u00ed como herramientas, t\u00e9cnicas y recursos \u00fatiles para optimizar los resultados.","url":"https:\/\/carontestudio.com\/blog\/author\/juanfe\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/16084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=16084"}],"version-history":[{"count":61,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/16084\/revisions"}],"predecessor-version":[{"id":16172,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/16084\/revisions\/16172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/16164"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=16084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=16084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=16084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}