FalconMasters Tutoriales Cursos Necesitas Ayuda ?

Categorias  Inicio » Como instalar Emmet (zen coding) en Sublime Text

Busca algo que aprender hoy

 70
   
9.9k 5.3k 1.4k
 10 Fans Seguidores Seguidores

 0
 0   
147 141.1k 663
 Seguidores Suscriptores Suscriptores




Como instalar Emmet (zen coding) en Sublime Text

Tutorial Como instalar Emmet el plugin que cambiara tu vida y el tiempo en el que escribes una
Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
 estructura HTML – Emmet (antes Zen coding)

FalconMasters Carlos Arturo 17 mayo, 2014

Recursos y Herramientas

 70   10  0  0  

Si has entrado a este articulo es porque seguramente ya sabrás que es Emmet, si

aun no lo sabes entra a este post y descubre como crear una estructura html
mucho mas rápido con este plugin.

Vamos al grano, como instalar Emmet

Para instalar este plugin tenemos 2 formas, una sencilla y rápida y otra aburrida y Suscríbete y sigue
aprendiendo!
larga, vamos a ver la forma mas rápida de hacerlo, mediante el control de
paquetes.
Escribe tu Correo Electrónico
Si anteriormente ya has instalado otros plugins mediante el control de paquetes
entonces no es necesario que sigas estos pasos, si es la primera vez que instalas un
plugin puedes hacer tranquilamente lo siguiente:  Suscribirse

Primero necesitamos instalar el Package Controll (Controlador de Paquetes),

que es una especie de plugin que nos permite descargar e instalar plugins de una
forma muy rápida y genial, ademas de que el Control de Paquetes también mantiene Top 5 Artículos mas
los plugins actualizados. populares

Primero tenemos que entrar a la pagina del Control de Paquetes: Como hacer un
https://sublime.wbond.net/ menú
desplegable con

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

 Una vez dentro tenemos que buscar el boton que dice Install y acceder. HTML y CSS

Como hacer un
menú de
navegación
adaptable a dispositivos móviles
(Responsive Design)

Como hacer un
menú
desplegable y
adaptable a dispositivos móviles
(Responsive Design)

Explicando que
es Front-End, que
es Back-End y sus
caracteristicas
Una vez dentro vamos a seleccionar la pestaña de la versión de Sublime Text
que tengamos, ya sea la 2 o la 3 y vamos a copiar el código que hay en esa pestaña. Como escribir
código HTML y
CSS mas rápido
con Emmet (Zen Coding)

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

 Una vez que ya lo tenemos copiado vamos a ir a nuestro sublime text, en la parte
superior, en nuestro menú vamos a ir a View (ver) > Show Console (Mostrar
Consola), y debajo de nuestro editor de código nos aparecerá la consola, lo único
que tenemos que hacer es pegar el código y presionar Enter.

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

 Vamos a tener que esperar unos momentos a que se auto descargue y auto instale,
después de eso simplemente vamos a presionar Ctrl + Shift + P, nos aparecerá un
cuadro de texto en donde escribiremos Install y en las opciones tendremos
Package Control: Install Package podemos seleccionarla o simplemente presionar
Enter.

Nos va abrir otro menú con muchas opciones y otro cuadro de texto, solo tenemos
que escribir Emmet y presionar Enter. Y listo ya tienes instalado tu plugin, puedes
probarlo haciendo algunas abreviaturas, si no las conoces puedes acceder a mi
tutorial en donde explico como funciona Emmet.

 70   10  0  0  

FalconMasters Carlos Arturo

 Acerca de  Twitter  YouTube  Facebook  Google +

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

 54 Comments FalconMasters 
1 Login

 Recomendar 6 ⤤ Share ordenar por el mejor

Únete a la discusión...

Donaldo Tonche • hace 3 años ⚑

Carlos Ami me aparece este mensaje al intentarlo instalar, ¿Que puedo hacer?

⛺
3 • Reply • Share ›

Alex Hernandez J > Donaldo Tonche • hace 2 años ⚑

aqui esta la solucion amigo

If for some reason the console installation instructions do not work for you (such as having
a proxy on your network), perform the following steps to manually install Package Control:

1.Click the Preferences > Browse Packages… menu

2.Browse up a folder and then into the Installed Packages/ folder

3.Download Package Control.sublime-package and copy it into theInstalled Packages/

directory

4.Restart Sublime Text

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
Reply
 • Reply • Share ›

Carlos Arturo Moder. > Donaldo Tonche • hace 3 años ⚑

Intenta abrir tu Sublime Text como administrador y luego ya pruebas, quizás es eso.
• Reply • Share ›

Donaldo Tonche > Carlos Arturo • hace 3 años ⚑

Perdon, Pero sigue el mismo error :8
• Reply • Share ›

Carlos Arturo Moder. > Donaldo Tonche • hace 3 años ⚑

Entonces la verdad no sabría decirte porque es que el programa no puede
conectarse a internet, copia ese mensaje y pegalo en google, puedes
obtener mejores respuestas hay.
• Reply • Share ›

William Porras • hace 2 años ⚑

Escuchen ya lo resolvi!! en sublime text 2 cuando se preciona (control+shift+p) y ponen install y
le dan enter no pasara nada aganlo otras 2 veces para estar seguros y despues cierren el
sublime text y esperen 1 minuto buelvanlo a abrir y les aparecera una ventana que le tienen que
dar aceptar despues de eso buelvan a precionar (control+shift+p) y escriban install y ya les saldra
la opcion de (Package Control: Install Package) y le dan clic y les saldra la otra ventana donde
tienen que escribir (Emmet) le dan enter y ya esta. para aser la prueba en un documento html que
ya tengan echo pongan td*10
y se preciona la tecla de tabulacion siempre con estos atajos y asi como lo escribi y si les salen
10 etiquetas td esta bien y el plugin ya estara instalado. SUERTE
para hacer mas pruebas busquen el tutorial de you tube de falcon masters Como escribir texto
html y css mas rapido y hai no sale como instalarlo hai sale como utilizarlo para que sepan que
atajos pueden tomar y bien explicado.
2 • Reply • Share ›

Angelo Merko > William Porras • hace 3 meses ⚑

Tu ortografía es la que necesita un tutorial!
• Reply • Share ›
Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
 Miguel Angel Hdz • hace un año ⚑
amigo Carlos Arturo tengo un problema, cuando quiero ir a su web oficial la pagina no me carga,
ya probe la conexion y si funciona en cualquier pagina exepto en esa
https://packagecontrol.io/inst..., tambien ya probe en los navegadores chrome, firefox y opera,
sera que el sitio se cayo o algo?, si se cayo me podrian pasar en codigo para ponerlo en la
consola o el archivo para moverlo a la carpeta de installed packages? Gracias por su atencion,
me gustan todos tus tutoriales, el de js y css me ayudaron bastante
1 • Reply • Share ›

Walter sanchez • hace 2 años ⚑

lo instale
pero la hacer la prueba de poner html:5 y presiono TAB no autocompleta, hace una tabulacion y
nada mas
Hay que configurar algo mas ? o que problema tendria?
Muchas gracias
Saludos
1 • Reply • Share ›

Carlos Arturo Moder. > Walter sanchez • hace 2 años ⚑

Pueden ser varias cosas:
1.- No funciona el comando html:5 si no has guardado tu archivo bajo una extencion.html
2.- Algunas veces las personas me dicen que no les funciono la tecla Tab, prueba con
otras teclas como Alt
3.- Es posible que se haya instalado mal, intenta reinstalandolo.
6 • Reply • Share ›

LorenaMora ™ > Carlos Arturo • hace 5 meses ⚑

A mi me funciona, pero tengo un detalle, que me sale es la estructura antigua de
html, es decir, ingreso html:5 + tab y nada, pero ingreso html + tab y me muestra.
de hecho, uso algunos de los tips y unos funcionan y otros no. me podrian decir
que mas debo instalar, no se, algo que falte para actualizar la estructura? por fiis!
gracias. . :$
• Reply • Share ›

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

 Carlos Arturo Moder. > LorenaMora ™ • hace 5 meses ⚑
Si no te funciona html:5 intenta con el simbolo: ! y luego tab.
Me parece muy extraño que unos te funcionen y otros no, emmet es lo
unico que necesitas.
• Reply • Share ›

mario delgado > Carlos Arturo • hace un año ⚑

Es correcto, debes guardar primero tu archivo con extension html, a mi me
funcionó correctamente.
• Reply • Share ›

Juan Monroy > Carlos Arturo • hace un año ⚑

Gracias!!!!! Efectivamente hay crear un documento nuevo con la extencion HTML.
A mi me funciono después de esto!
Un gran saludo desde Québec!
• Reply • Share ›

Walter sanchez > Carlos Arturo • hace 2 años ⚑

por si te sirve
yo segui estos pasos y me funciono bien
con la tecla tab ;)

https://www.youtube.com/watch?...

El 30 de julio de 2014, 21:14, Disqus <notifications@disqus.net> escribió:

• Reply • Share ›

Francisco E. • hace 2 días ⚑

Hola a todos.
Para que te funcione Emmet, sigue los pasos que están descritos y al final en el editor de sublime
activa la sintaxis de HTML. Para esto le das click en View --> Syntaxis --> y seleccionas HTML. Y
con eso ya va a funcionar Emmet. Saludos
• Reply • Share ›

Gcm
Use our professional System
HTML • hace
to PDF API2at
meses
http://www.htm2pdf.co.uk!
 Gcm System • hace 2 meses ⚑
Gracias Carlos buen aporte.
Saludos.
Genaro Chinchay.
www.titanicsoft.com
• Reply • Share ›

Gilberto • hace 2 meses ⚑

Saludos Carlos Arturo, ya instalé el Emmet en Sublime Text 3, ahora tengo una duda, ¿se puede
personalizar los fragmentos de código a reutilizar? ¿Cómo se hace? te pregunto porque hay
fragmentos que son muy reutilizables y no están definidos, por lo que quisiera hacerlo.
Muchas Gracias
• Reply • Share ›

Andres Rivero • hace 3 meses ⚑

Para que funcione script:src también hay que agregarlo a extencion.html?
• Reply • Share ›

Marcela González Arias • hace 4 meses ⚑

funciona!! gracias.
• Reply • Share ›

Rodolfo Rodriguez • hace 6 meses ⚑

¿Hay algun plugin que facilite el codigo PHP y CSS?, gracias.
• Reply • Share ›

The Snoopy • hace 6 meses ⚑

gracias FalconMasters!!!, saludos desde El Salvador.
• Reply • Share ›

Alejandro G. Menéndez • hace 8 meses ⚑

A mí me funcionó con Sublime Text 3, pero primero teniendo en cuenta que tenía la combinación
de teclas CTRL-SHIFT-P que me hacía conflicto con el capturador de pantallas SNAGIT, luego
además no olvidar que hay que cerrar el editor y volver a entrar, y por último, que ANTES de usar
Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
 el TAB, tienes que haber grabado el archivo, aunque sea en blanco, como nombre.html o
nombre.css....es decir, nuestro fichero de trabajo tiene que estar grabado con la extensión antes
de funcionar.
• Reply • Share ›

Jhon F Montoya • hace 10 meses ⚑

como enlazo un archivo de javascript al html con emmet
• Reply • Share ›

Mariana García • hace un año ⚑

Gracias! No me había funcionado la instalación del Package Installer con código pero
manualmente si pude.
• Reply • Share ›

L'Enrique Peña • hace un año ⚑

Hola yo tenia el mismo error.. Lo solucione de esta forma:
1. Ir a la Pagina de Package Control
2. Copiar el Codigo de su Sublime Text en la consola..
3.Si da el Error descarguen el Paquete "Package Control.sublime-package" de la Pagina.
4. Abren Preference > Browse Package y en la carpeta USER pegan lo que descargaron..
5. Luego Ctrl + shift + p y Buscan Install Package y luego buscan emmet.. Esperan que
descargue PyV8 y Reinician Sublime Text.
6. Pueden entrar de nuevo a preferencias y ver si descargo la Carpeta PyV8.
Lo Instalan y Listo...! a mi me funciono.!

De cualquier Forma pueden hacer todos los pasos de nuevo pero con el archivo descargado ya
en la carpeta Preference > User.
• Reply • Share ›

HourGlass Dm • hace un año ⚑

Esta botando este error.. ya intente manualmente y tampoco funciona :/
https://gyazo.com/b1964bb4d008...
• Reply • Share ›

Carlos Arturo Moder. > HourGlass Dm • hace un año ⚑

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
 Carlos Arturo Moder. > HourGlass Dm • hace un año ⚑
Intenta hacer lo que te dice el error. Reinicia el editor de codigo y luego vuelve a intentarlo.
• Reply • Share ›

HourGlass Dm > Carlos Arturo • hace un año ⚑

pues jamas se pudo :/ a escribir de mas Xddd
• Reply • Share ›

mario delgado • hace un año ⚑

Resolví el problema con ayuda y combinación de diferentes fuentes, gracias a todos por su
ayuda!
• Reply • Share ›

Leonardo Martin • hace un año ⚑

gracias me funciono
• Reply • Share ›

Esteban Cañete • hace un año ⚑

Estimados me aparece esto: urllib.error.HTTPError: HTTP Error 407: Proxy Authentication
Required ( Forefront TMG requiere autorización para satisfacer la solicitud. Se ha denegado el
acceso al filtro de proxy web. )
• Reply • Share ›

Javier Moreno • hace un año ⚑

Disculpa, el dia de ayer lo instale y super bien sumamente útil. Nomas tengo un problema, ayer lo
deje funcionando sin problemas pero corre y apague mi computadora. Como vuelvo activar la
paqueteria? Gracias de ante mano Falcon
• Reply • Share ›

Carlos Arturo Moder. > Javier Moreno • hace un año ⚑

No se desactiva, simplemente abriendo de nuevo el editor deberías ser capaz de utilizar el
plugin sin problemas.
1 • Reply • Share ›

Use our professional HTML to PDFMarcela > Carlos Arturo • hace un año
API at http://www.htm2pdf.co.uk! ⚑
 Marcela > Carlos Arturo • hace un año ⚑
Hola que tal, me sale un problema. Lo instale perfecto, pero luego de haber
cerrado el SUBLIIME, no me aplica para nada el emmet. A que se debería eso?
• Reply • Share ›

Marcela > Marcela • hace un año ⚑

• Reply • Share ›

Javier Moreno > Carlos Arturo • hace un año ⚑

Muchas gracias! Saludos.
• Reply • Share ›

Henry Bravo • hace un año ⚑

muchas gracias Falcon Master, me ha funcionado, gracias
• Reply • Share ›

gonzalo forero • hace 2 años ⚑

Pues les cuento que ami me pasaba lo mismo que a ustedes y resulta que no me ejecutaba pq
estaba escribiendo html 5: y es html:5 es algo muy obvio pero depronto alquien se este matanto
la cabeza como yo. Gracias miles por sus aportes maestros
• Reply • Share ›

Cristian Parada > gonzalo forero • hace 10 meses ⚑

El mismo problema era el que tenia yo gracias Gonzalo Forero
Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
 El mismo problema era el que tenia yo gracias Gonzalo Forero
• Reply • Share ›

Rodolfo Rios • hace 2 años ⚑

a mi me sale esto ayuda falcon masters o alguien plis

⛺
• Reply • Share ›

oldivier hurtado correa • hace 2 años ⚑

SI GRACIAS ME SIRVIO MUCHO . INTENTEN COMO ESCRIBIO WILLIAN PORRAS
• Reply • Share ›

Cristian Rodriguez • hace 2 años ⚑

Carlos tiene razon tienen que guardar el Archivo antes como html antes de escribir el atajo ya
guardado el archivo como html escriben html:5 y tab y listo crea la estructura básica ;) saludos
• Reply • Share ›

jesus • hace 2 años ⚑

ya lo instale pero no me salen los atajos escribo como debe ser y no hace nada
• Reply • Share ›

William Porras • hace 2 años ⚑

Me quede en lo de install pero lo pongo y preciono enter y no pasa nada
• Reply • Share ›

Daniel Alberto Huerta Sanchez > William Porras • hace 2 años ⚑

Aún no has instalado Package Control...
• Reply • Share ›

yannyyss • hace 2 años ⚑

Hola. Hace tiempo lo instalé con este procedimiento, pero ya no
Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!
 Hola. Hace tiempo lo instalé con este procedimiento, pero ya no
funciona. Me marca error. Serías muy amable si me pudieras ayudar a
arreglarlo. Muchas gracias! :)

Esto es lo que me aparece en la consola de Sublime:

startup, version: 2221 windows x64 channel: stable

executable: /C/Program Files/Sublime Text 2/sublime_text.exe
working dir: /C/WINDOWS/system32
packages path: /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages
settings path: /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Settings
PackageSetup not required
Py_GetProgramName(): sublime_text.exe
Py_GetExecPrefix(): C:\Program Files\Sublime Text 2
Py_GetProgramFullPath(): C:\Program Files\Sublime Text 2\sublime_text.exe
Py_GetPath():
C:\Program Files\Sublime Text 2\python26.zip;C:\Program Files\Sublime
Text 2\DLLs;C:\Program Files\Sublime Text 2\lib;C:\Program Files\Sublime
Text 2\lib\plat-win;C:\Program Files\Sublime Text
ver más

• Reply • Share ›

yannyyss > yannyyss • hace 2 años ⚑

Hi, encontré la solución aquí, por si alguien tiene el mismo problema
http://oftenabirdsong.blogspot... Saludos.
• Reply • Share ›

Sebastián Palivoda • hace 2 años ⚑

bueno a mi me dio este error u.u

⛺
• Reply • Share ›

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

 Santiago > Sebastián Palivoda • hace 2 años ⚑
instala el que es para sublime text 3... igual me salia ese mismo por que intentaba instalar
el package control para el 2 y es el 3
• Reply • Share ›

Load more comments

TAMBIÉN EN FALCONMASTERS

Guiá básica de Transiciones en CSS3, Curso completo de Bootstrap desde 0

transiciones para nuestros elementos 14 comments • hace 2 años•
6 comments • hace 2 años• Carmen Sabella — Hola Carlos, muy bueno tu
Mike Amezcua 22 — Que pasa si quiero tutorial. Hice todo y me quedó bien, pero no se
aplicar este efecto pero a una imagen? como hacer que el color de fondo …

Como hacer una App Lista de Tareas con
Javascript
19 comments • hace un año•
Jetpack83 — ¿Como puedo hacer para que
las tareas se guarden? cada vez que refresco
la pagina, se borran las tareas.
Como hacer un Acordeón con HTML, CSS y
Javascript (Jquery)
32 comments • hace 2 años•
Jose Manuel Tello R — Buenas tardes dime
por favor donde coloco el Codigo Jquery: en el
HTML gracias

✉ Subscribe d Agrega Disqus a tu sitio � Privacidad

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!

  Aprende con nuestros cursos

Curso básico de Curso cómo hacer un Curso completo de

Escribe CSS como un
PRO, Curso Básico de
SASS
Optimiza, Organiza y escribe
tu código CSS como un
profesional con SASS.
 Inicia el curso
WordPress desde 0
Aprende a utilizar Wordpress
desde 0 y crea sitios web,
blogs, galerías e incluso
tiendas online.
 Inicia el curso
Sitio Web básico con Bootstrap desde 0
Bootstrap
Curso básico de Bootstrap,
Aprende como hacer un sitio Aprende a crear sitios web
web básico utilizando lo adaptables a dispositivos
mejor de Bootstrap móviles con este poderoso
framework.
 Inicia el curso
 Inicia el curso

  
Héroes de la web Necesitas Ayuda ? 5.3k 141.1k 9.9k
Seguidores Suscriptores Fans

Use our professional HTML to PDF API at http://www.htm2pdf.co.uk!