Tutorial Como instalar Emmet el plugin que cambiara tu vida y el tiempo en el que escribes una estructura HTML – Emmet (antes Zen coding)
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 larga, vamos a ver la forma mas rápida de hacerlo, mediante el control de paquetes.
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:
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 los plugins actualizados.
Primero tenemos que entrar a la pagina del Control de Paquetes: https://sublime.wbond.net/
Una vez dentro tenemos que buscar el boton que dice Install y acceder.
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.
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.
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.
Carlos Ami me aparece este mensaje al intentarlo instalar, ¿Que puedo hacer?
Intenta abrir tu Sublime Text como administrador y luego ya pruebas, quizás es eso.
Perdon, Pero sigue el mismo error :8
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.
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
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
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.
por si te sirve
yo segui estos pasos y me funciono bien
con la tecla tab ;)
https://www.youtube.com/watch?v=SZr4AGpRzgc
El 30 de julio de 2014, 21:14, Disqus escribió:
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!
Es correcto, debes guardar primero tu archivo con extension html, a mi me funcionó correctamente.
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. . :$
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.
excelente sitio. Hablando sobre emmet los instalo y todo correcto cuando algo en css y ya lo conoce empieza a autocompletarme hasta ahora bien, pero cuando creo otro archivo css o styl cualquiera parece q no conoce las palabras para autocompletar solo en la medida que estoy codeando aprende palabras, como hago para que todo lo que he escrito en css anteriores las palabras queden para autocompletar en otro archivo gracias
Hola que tal, lo que pasa es que por ejemplo con el caso de stylus tienes que descargar los snipets, aqui tienes el articulo. Sobre css no deberías tener problema, me parece extraño.
https://www.falconmasters.com/recursos-herramientas/instalar-snippets-de-stylus-sublime-text/
viejo mi navegador es chrome donde pego el codigo espero me ayudes gracias (Y)
A que te refieres con donde pegas el código?
bueno a mi me dio este error u.u
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
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 FilesSublime Text 2
Py_GetProgramFullPath(): C:Program FilesSublime Text 2sublime_text.exe
Py_GetPath():
C:Program FilesSublime Text 2python26.zip;C:Program FilesSublime
Text 2DLLs;C:Program FilesSublime Text 2lib;C:Program FilesSublime
Text 2libplat-win;C:Program FilesSublime Text
2liblib-tk;C:Program FilesSublime Text 2
Py_GetPythonHome(): C:Program FilesSublime Text 2
catalogue loaded
found 6 files for base name Default.sublime-keymap
found 1 files for base name Default.sublime-mousemap
found 4 files for base name Main.sublime-menu
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2Packages_package_control_loader0-package_control.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2Packages_package_control_loader1-ssl-windows.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2Packages_package_control_loader2-bz2.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2Packages_package_control_loader2-select-windows.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesCSScss_completions.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultcomment.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultcopy_path.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultdelete_word.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultdetect_indentation.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultduplicate_line.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultecho.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultexec.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultfold.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultfont.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultgoto_line.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultindentation.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultkill_ring.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultmark.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultnew_templates.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultopen_file_settings.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultopen_in_browser.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultparagraph.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultsave_on_focus_lost.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultscroll.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultset_unsaved_view_name.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultside_bar.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultsort.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultswap_line.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaultswitch_file.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaulttransform.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaulttranspose.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDefaulttrim_trailing_white_space.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesDiffdiff.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesEmmetemmet-plugin.py
PyV8: Creating new thread
Emmet: Creating thread
Emmet: Loading https://api.github.com/repos/emmetio/pyv8-binaries/contents
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesHTMLencode_html_entities.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesHTMLhtml_completions.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesPackage ControlPackage Control.py
Emmet: You have the most recent PyV8 binary
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesPackage Controlbootstrap.py
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesStylusStylus.py
plugin init time: 22.2444
loading bindings
loading pointer bindings
found 1 files for base name Default.sublime-theme
theme loaded
app ready
pre session restore time: 30.335
startup cache, total files: 104 cache hits: 104
startup time: 31.4643 (package setup was not run)
loaded 837 snippets
Package Control: Installing 2 upgrades
ignored packages updated to: [Vintage, Emmet, Stylus]
found 1 files for base name Default.sublime-theme
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/Emmet/Emmet.sublime-settings
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/Emmet/Preferences.sublime-settings
found 1 files for base name Default.sublime-theme
Unloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesEmmetemmet-plugin.py
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/Stylus/Stylus.sublime-settings
Unloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesStylusStylus.py
found 4 files for base name Default.sublime-keymap
found 2 files for base name Main.sublime-menu
Generating syntax summary
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Package Control.sublime-settings
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Preferences.sublime-settings
theme loaded
theme loaded
found 1 files for base name Default.sublime-theme
theme loaded
Package Control: Upgraded Emmet to v2015.04.01.21.23.39
ignored packages updated to: [Stylus, Vintage]
found 1 files for base name Default.sublime-theme
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Package Control.sublime-settings
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Preferences.sublime-settings
theme loaded
found 1 files for base name Default.sublime-theme
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesEmmetemmet-plugin.py
Emmet: No need to update PyV8
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/Emmet/Emmet.sublime-settings
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/Emmet/Preferences.sublime-settings
found 5 files for base name Default.sublime-keymap
found 3 files for base name Main.sublime-menu
theme loaded
Generating syntax summary
Package Control: Upgraded Stylus to v2015.04.08.20.47.34
found 1 files for base name Default.sublime-theme
theme loaded
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Preferences.sublime-settings
found 1 files for base name Default.sublime-theme
theme loaded
ignored packages updated to: [Vintage]
found 1 files for base name Default.sublime-theme
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Package Control.sublime-settings
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Preferences.sublime-settings
theme loaded
found 1 files for base name Default.sublime-theme
Reloading plugin C:UsersYannyyssAppDataRoamingSublime Text 2PackagesStylusStylus.py
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/Stylus/Stylus.sublime-settings
found 6 files for base name Default.sublime-keymap
found 4 files for base name Main.sublime-menu
theme loaded
Generating meta info summary
Generating meta info summary
Generating meta info summary
Generating meta info summary
Generating meta info summary
Generating syntax summary
reloading /C/Users/Yannyyss/AppData/Roaming/Sublime Text 2/Packages/User/Preferences.sublime-settings
found 1 files for base name Default.sublime-theme
theme loaded
Writing file /C/Users/Yannyyss/Desktop/UT Bootstrap/Index/index.html with encoding UTF-8
error:
A plugin (emmet-plugin) may be making Sublime Text unresponsive by
taking too long (0.083000s) in its on_query_context callback.
This message can be disabled via the detect_slow_plugins setting
Hi, encontré la solución aquí, por si alguien tiene el mismo problema http://oftenabirdsong.blogspot.mx/2012/11/problemas-con-pyv8-instalacion-de-emmet.html Saludos.
Me quede en lo de install pero lo pongo y preciono enter y no pasa nada
Aún no has instalado Package Control…
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 asi como lo escribi y si les salen 10 etiquetas td esta bien y el plugin ya estara instalado. SUERTE
Tu ortografía es la que necesita un tutorial!
Te faltó un signo de exclamación, amigo sapiente.
Exelente! gracias amigo!
no sabia que funcionaba con la tecla de tabulación, estaba muriendo intentando hacer que funcionara n.n’
ya lo instale pero no me salen los atajos escribo como debe ser y no hace nada
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
SI GRACIAS ME SIRVIO MUCHO . INTENTEN COMO ESCRIBIO WILLIAN PORRAS
a mi me sale esto ayuda falcon masters o alguien plis
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
El mismo problema era el que tenia yo gracias Gonzalo Forero
muchas gracias Falcon Master, me ha funcionado, gracias
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
No se desactiva, simplemente abriendo de nuevo el editor deberías ser capaz de utilizar el plugin sin problemas.
Muchas gracias! Saludos.
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?
https://uploads.disquscdn.com/images/a9da70e37ac13eb3771554adecf8a787a71e8a90d44b2b60a048dbf9397e22ec.png
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. )
gracias me funciono
Resolví el problema con ayuda y combinación de diferentes fuentes, gracias a todos por su ayuda!
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/installation, 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
Esta botando este error.. ya intente manualmente y tampoco funciona :/
https://gyazo.com/b1964bb4d008eae4a39784eacca801b5
Intenta hacer lo que te dice el error. Reinicia el editor de codigo y luego vuelve a intentarlo.
pues jamas se pudo :/ a escribir de mas Xddd
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.
Gracias! No me había funcionado la instalación del Package Installer con código pero manualmente si pude.
como enlazo un archivo de javascript al html con emmet
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 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.
gracias FalconMasters!!!, saludos desde El Salvador.
¿Hay algun plugin que facilite el codigo PHP y CSS?, gracias.
funciona!! gracias.
Para que funcione script:src también hay que agregarlo a extencion.html?
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
Gracias Carlos buen aporte.
Saludos.
Genaro Chinchay.
http://www.titanicsoft.com
Hola a todos.
Para que me funcionara 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 me funcionó Emmet. Saludos
Gracias Francisco, la verdad es que lo intente muchas veces y nada. Después de un rato lo reviso y estaba activo, no se como se soluciono
A mi no me funcionaba al teclear html:5 + tab, en una pagina leí que debería hacerlo html:5 control + e, y me funciona, solo que no se aun el por que?? y si hay forma de que sea con la tecla tab??
Cierto me funcionó con el Ctrl+e. De igual forma si pones la Sintaxis en HTML (View->Syntax->HTML) ya funciona el tab también. Saludos
Me funciono tu solucion!
A mi me pasaba lo mismo, lo que pasa es que primero se debe guardar el archivo «.html» o «.css» para que te pueda funcionar, pero si funciona.
el package control incluye emmet?
Es que acá sólo veo las instrucciones para instalar el package control.
¡Gracias!
copie el codigo que aparece en la pagina y lo pegue en la consola pero no aparece ningun instalador.
https://uploads.disquscdn.com/images/7740f03a271c677f80b34e0dbb2e6087ef3e31893623cc716abe32dcf12f5123.png
Que hago?
ya lo instale de hecho escribo codigo pero cuando presiono la tecla tab del teclado de mi laptop no pasa nada porque?
¡Gracias!.
Hola, cual es el emmet para visual studio code?
Retomando lo que dicen en el historial de que el Emmet aveces funciona y aveces no, les platico que descubrí:
Después de seguir todas las instrucciones para instalar el plugin y de reiniciar Sublime, intente usar la abreviatura para crear la estructura de HTML5 y nada pasaba.
Lo que se me ocurrio hacer es salvar el archivo como HTML y escribir nuevamente la abreveciación y tecla TAB y listo agarro en automático con todo y los colores que distinguen el código.
También realice la prueba con las teclas que sugieren «ctrl+e» y también funciona pero no aplica los colores pero es muy buena opción.
Saludos
Gracias por los tutoriales Falcon y a todos por la aportación.
Nota: se que y a es un tema atrasado pero espero alguien lo lea.
::: hola encontré la solución:::
1..- copiamos el texto del tipo de versión que tengamos en sublimetext y la pegamos en Vista (view) / show console (mostar consola) / precionar enter
2. salir y volver abrir sublime text
3.- ir en Preferencia/sublime control – click en Package Control/ (ahi escribir Emmet y dar Enter)
4.- disfrutar de emmet,
Gracias, muy fácil de entender :)
Yo pienso, que eres un genio, pero que tu pagina web esta un poco desordenada :D
Hola, aunque he llegado un poco tarde a la fiesta, espero no hacerlo para recoger los platos y las sillas.
En la misma pagina de Emmet, esta la repuesta.
«Warning: this plugin may not work at all in some OSes since it written in JavaScript and uses PyV8 and Google V8 binaries to run. If you experience problems or editor crashes please fill an issue.»
Y es que tras hacer la instalación comienza la del PyV8 y mientras no este instalado no se ejecuta el emmet, solo le dan un tiempo que se instale y problema resuelto
falcon como le ago para instalar mas temas al sublime