1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Instalación de Sublime Text 2 + Package Control + Emmet

Tema en 'Herramientas y Utilidades' comenzado por Creigthon, 19 de Enero de 2015.

  1. Creigthon

    Creigthon
    Moderador

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    181
    Me gusta recibidos:
    110
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Programador analista y Diseñador Gráfico.
    Localización:
    La Serena, Chile
    Sublime Text es un editor de texto y editor de código fuente está escrito en C++ y Python para los plugins.

    Se distribuye de forma gratuita, sin embargo no es software libre o de código abierto, se puede obtener una licencia para su uso ilimitado, pero el no disponer de ésta no genera ninguna limitación más allá de una alerta cada cierto tiempo.
    • Minimapa: consiste en una previsualización de la estructura del código, es muy útil para desplazarse por el archivo cuando se conoce bien la estructura de este.
    • Multi Selección: Hace una selección múltiple de un término por diferentes partes del archivo.
    • Multi Cursor: Crea cursores con los que podemos escribir texto de forma arbitraria en diferentes posiciones del archivo.
    • Multi Layout: Trae siete configuraciones de plantilla podemos elegir editar en una sola ventana o hacer una división de hasta cuatro ventanas verticales o cuatro ventanas en cuadrícula.
    • Soporte nativo para infinidad de lenguajes: Soporta de forma nativa 43 lenguajes de programación y texto plano.
    • Syntax Highlight configurable: El remarcado de sintaxis es completamente configurable a través de archivos de configuración del usuario.
    • Búsqueda Dinámica: Se puede hacer búsqueda de expresiones regulares o por archivos, proyectos, directorios, una conjunción de ellos o todo a la vez.
    • Auto completado y marcado de llaves: Se puede ir a la llave que cierra o abre un bloque de una forma sencilla.
    • Soporte de Snippets y Plugins: Los snippets son similares a las macros o los bundles además de la existencia de multitud de plugins.
    • Configuración total de Keybindings: Todas las teclas pueden ser sobrescritas a nuestro gusto.
    • Acceso rápido a línea o archivo: Se puede abrir un archivo utilizando el conjunto de teclas Cmd+P en Mac OS X o Ctrl+P en Windows y Linux y escribiendo el nombre del mismo o navegando por una lista. También se puede ir a una línea utilizando los dos puntos ":" y el número de línea.
    • Paleta de Comandos: Un intérprete de Python diseñado solo para el programa con el cual se puede realizar infinidad de tareas.
    • Coloreado y envoltura de sintaxis: Si se escribe en un lenguaje de programación o marcado, resalta las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura.
    • Pestañas: Se pueden abrir varios documentos y organizarlos en pestañas.
    • Resaltado de paréntesis e indentación: Cuando el usuario coloca el cursor en un paréntesis, corchete o llave, resalta ésta y el paréntesis, corchete o llave de cierre o apertura correspondiente.

    Descarga:
    La versión actual de Sublime Text 2 es 2.0.2.
    Sublime Text 2 puede ser descargado y evaluado de forma gratuita, sin embargo, una licencia debe ser comprado para su uso continuado. Actualmente no hay ningún límite de tiempo impuesto para la evaluación.

    Pacacke Control:
    Es un gestor de paquetes de Sublime Text que hace que sea extremadamente fácil de encontrar, instalar y mantener paquetes actualizados. para realizar la instalación de él es necesario eligir las opciones en el menú horizontal superior (View > Show Console) y se debe introducir este script:
    Se debe esperar que la instalación se finalice, despues reinicie Sublime Text 2 y el plugins estara correctamente instalado.

    Emmet:
    Anteriormente Codificación Zen es un conjunto de herramientas de desarrollador web que puede mejorar en gran medida su flujo de trabajo de HTML y CSS.
    Con Emmet, puede escribir expresiones en CSS como que se puedan analizar de forma dinámica, y producir una salida en función de lo que se escribe en la abreviatura. Emmet es desarrollado y optimizado para desarrolladores web cuyo flujo de trabajo depende de HTML / XML y CSS, pero se puede utilizar con los lenguajes de programación también.

    Por ejemplo, esta abreviatura:

    ul # nav> li.item $ * 4> a {Artículo} $

    ... al presionar la tecla TAB, Se puede ampliar en:

    <Ul id = "nav">
    <Li class = ""> <a item1 href=""> artículo 1 </a> </ li>
    <Li class = ""> <a item2 href=""> artículo 2 </a> </ li>
    <Li class = ""> <a elemento3 href=""> artículo 3 </a> </ li>
    <Li class = ""> <a elemento4 href=""> artículo 4 </a> </ li>
    </ Ul>
    Para la instalación de él es necesario eligir las opciones en el menú horizontal superior (Preferences > Package Control) y se debe introducir: install y presionar la tecla ENTER, luego introducir emmet y presionar la tecla ENTER. Esperar la instalación de emmet y al terminar reiniciar Sublime Text 2.

    Algunas abreviaciones de implementacion de emmet en Sublime Text 2 son las siguientes:

    nav.menu>ul>li.menu-item*5>a{Enlace $}
    HTML:
    <nav class="menu">
        <ul>
            <li class="menu-item"><a href="">Enlace 1</a></li>
            <li class="menu-item"><a href="">Enlace 2</a></li>
            <li class="menu-item"><a href="">Enlace 3</a></li>
            <li class="menu-item"><a href="">Enlace 4</a></li>
            <li class="menu-item"><a href="">Enlace 5</a></li>
        </ul>
    </nav>
    ul.generic-list>lorem10.item-$*4
    HTML:
    <ul class="generic-list">
        <li class="item-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatibus!</li>
        <li class="item-2">Eaque, impedit est tempora doloremque praesentium voluptatum quas nostrum consectetur.</li>
        <li class="item-3">Illum, reprehenderit minus ex soluta adipisci aperiam explicabo modi sapiente.</li>
        <li class="item-4">Nihil ratione voluptates iure cum eligendi dolores deleniti quos nostrum.</li>
    </ul>
    p*3>lorem15
    HTML:
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, doloribus cum animi perferendis fugit tenetur.</p><br>
    <p>Dolorum, rem labore voluptatem iusto officia corporis molestias distinctio. Voluptas corrupti consectetur molestiae sed libero!</p><br>
    <p>Corporis, reiciendis quos cumque nihil harum eaque libero officiis enim amet eum odio a veniam.</p><br>
    Les dejo la documentacion de todos los acceso rápido a los trucos del plugin Emmet:http://docs.emmet.io/cheat-sheet/

    Saludos, Creigthon Lee.
     
    A Noe_tj y FalconMasters les gusta esto.
  2. Fernando Fresh

    Fernando Fresh Nuevo Miembro

    Se incorporó:
    20 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Por cierto, soy usuario de Brackets (sobretodo si vienes del diseño gráfico es super recomendable) y Emmet tambien esta disponible en el gestor de extensiones! a si que perfecto! Queria esta función pero no queria cambiar de editor!
     
  3. Creigthon

    Creigthon
    Moderador

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    181
    Me gusta recibidos:
    110
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Programador analista y Diseñador Gráfico.
    Localización:
    La Serena, Chile
    Así es compañero, dejo una referencia de que editores soporta la incorporacion de Emmet.
    [​IMG]

    Saludos, Creigthon Lee.
     
  4. JesusSilva

    JesusSilva Miembro

    Se incorporó:
    23 de Enero de 2015
    Mensajes:
    42
    Me gusta recibidos:
    7
    Puntos de trofeos:
    8
    Género:
    Hombre
    Yo actualmente uso brackets, pero tambien tengo instalado el sublime text 2 y no se por cual decantarme jajaja

    Si es verdad que los colores de las etiquetas de sublime text me gusta mas, pero son muy parecidos
     
    A Creigthon le gusta esto.
  5. borjalozano

    borjalozano Nuevo Miembro

    Se incorporó:
    14 de Enero de 2015
    Mensajes:
    20
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    De verdad que esta combinación me tiene encantado,también puse una para ayudarme a completar en javascript, que la primera vez que lo hize no me saltaba la ayuda como con html o CSS.
     
  6. JesusSilva

    JesusSilva Miembro

    Se incorporó:
    23 de Enero de 2015
    Mensajes:
    42
    Me gusta recibidos:
    7
    Puntos de trofeos:
    8
    Género:
    Hombre
    podrías decir que ayuda fue por favor?
     
  7. borjalozano

    borjalozano Nuevo Miembro

    Se incorporó:
    14 de Enero de 2015
    Mensajes:
    20
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Es un addon que encontré en package control,lo encontre escribiendo javascript en el package control,hay varios, yo puse uno de ellos.

    De todas formas si quieres el nombre exacto mañana te lo paso que ahora voy a dormir
     
    A JesusSilva le gusta esto.
  8. Fernando Fresh

    Fernando Fresh Nuevo Miembro

    Se incorporó:
    20 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Justamente lo unico que se puede cambiar facilmente son los colores :) jaja buscas un tema que te gusta y lo instalas, de hecho tanto en sublime como brackets tengo instalados temas y los colores cambiados. Es bastante facil, sobretodo brackets.
     
    A JesusSilva le gusta esto.
  9. JesusSilva

    JesusSilva Miembro

    Se incorporó:
    23 de Enero de 2015
    Mensajes:
    42
    Me gusta recibidos:
    7
    Puntos de trofeos:
    8
    Género:
    Hombre
    Yo he probado en brackets a instalar un tema y me dice que se instalo correctamente pero no lo puedo aplicar :/

    Hay alguna manera de visualizar los temas antes de instalarlos?

    De todas maneras creo que me estoy decidiendo por sublime text, no sé tiene detalles que me gusta y que brackets no tiene, son tonterías mínimas pero bueno, ya que se parecen tanto y son tan buenos los dos, los pequeños detalles marcan la diferencia.
     
  10. JesusSilva

    JesusSilva Miembro

    Se incorporó:
    23 de Enero de 2015
    Mensajes:
    42
    Me gusta recibidos:
    7
    Puntos de trofeos:
    8
    Género:
    Hombre
    De acuerdo, cuando puedas pon por aquí el nombre, así los que estén interesados también lo podrán ver.
     
  11. borjalozano

    borjalozano Nuevo Miembro

    Se incorporó:
    14 de Enero de 2015
    Mensajes:
    20
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    [​IMG]

    Esto es lo que tengo en sublime text,EB particular el de javascript es javascript completions
     
    A JesusSilva le gusta esto.
  12. krubay

    krubay Nuevo Miembro

    Se incorporó:
    21 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Una pregunta, ¿por que no usar sublime text 3? ¿el 2 es mas estable?.
     
  13. JesusSilva

    JesusSilva Miembro

    Se incorporó:
    23 de Enero de 2015
    Mensajes:
    42
    Me gusta recibidos:
    7
    Puntos de trofeos:
    8
    Género:
    Hombre
    la versión 3 esta en beta (osea que esta de prueba corrigiendo errores antes de sacar la versión final)
     
    A krubay le gusta esto.
  14. krubay

    krubay Nuevo Miembro

    Se incorporó:
    21 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Muchas Gracias por tu respuesta :)
     
  15. Nikooo14

    Nikooo14 Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    El código de arriba para instalar package control no funciona, este es el nuevo!
    Código (Text):
    import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
     
  16. Pedro Fumero

    Pedro Fumero Nuevo Miembro

    Se incorporó:
    28 de Febrero de 2015
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Ocupación:
    Estudiante: Ing. Informática
    Localización:
    Caracas - Venezuela
    Gracias por el tutorial está bastante útil!
     
  17. piterli

    piterli Nuevo Miembro

    Se incorporó:
    12 de Agosto de 2016
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    hola, me llamo pedro.
    tengo un ligero problema al poner los comentarios.
    supuestamente con la.combinacion ctrl+/ se añade automaticamente esto, "/* comentario */", pero a mi no me funciona.
    como puedo solucionarlo?.

    gracias

    Enviado desde mi Aquaris E5 mediante Tapatalk
     

Comparte esta página