Autocompletar código en sublime text

Hoy hablaremos de un tema interesante, hay veces donde necesitamos autocompletar nuestro código, como lo hace Netbeans u otro IDE de desarrollo, Sublime Text tiene un plugin que nos permite hacer los mismo, estoy hablando de SublimeCodeIntel es uno de los paquete mas completos que tiene sublime text

Instalación de SublimeCodeIntel

Para poder instalar este implemento a sublime text primero debes tener instalado el gestor de packetes o package control como lo conocen algunos, si no lo has instalado aun debes seguir esta guía: instalar package control.

Ahora debemos hacer lo siguiente, nos situamos en el lado superior y hacemos clic en Preferences -> Package Control, luego nos saldrá una lista y ahí seleccionamos Install Package como se muestra en la imagen de abajo.

Autocompletar código en sublime text

Se nos abrirá una nueva pestaña y ahí debemos Ingresar el nombre de SublimeCodeIntel como muestra el punto 1 de la imagen de abajo, luego seleccionamos el plugin como muestra el punto dos de la imagen abajo. Debemos esperar unos segundos o dependiendo de la velocidad de tu Internet a que se instale.

Instalación de SublimeCodeIntel

Una vez instalada el plugin nos cargara un código como se muestra en la siguiente imagen

NOTA: Se recomienda para evitar cualquier problema o bug, cuando se instale por primera vez, debe cerrarse por completo sublime text y luego volverlo abrir, de esa forma tendrás instalado por completo el plugin.

Configurando SublimeCodeIntel

Por defecto trae algunos lenguajes soportados pero para el de PHP hay que hacerlo manualmente, para ello vamos a Preferences->Package Settings-> SublimeCodeIntel->Settings Default Se nos arribara una nueva ventana y nos vamos hacia abajo donde esta la parte de PHP

En esta sección vamos a configurar lo siguiente aclaro que yo uso el gestor xampp si tu usas otro debes buscar la configuración, pero es mas o menos la misma. Debemos cambiar esas lin eas de código por la siguiente suponiendo que tenemos instalado xampp en el disco C

Importante: para windows es con doble slash invertido "\\" y para linux con un slash "/".

    "PHP": {
        "php": "C:\\xampp\\php.exe",
        "phpExtraPaths": ["C:\\xampp\\htdocs\\web"],
        "phpConfigFile": "php.ini",
        "codeintel_scan_files_in_project": true,
        "codeintel_max_recursive_dir_depth": 25     
    }




Haciendo pruebas con SublimeCodeIntel

En primer lugar tu archivo debe tener formato o extencion php "ejemplo.php" luego de eso podemos hacer las pruebas por ejemplo deseo crear una clase, entonces simplemente escribo la letra "p" y me sale automáticamente una ventana pequeña donde debes explayarte hasta encontrar el auto-completado, como ejemplo en la imagen de abajo creare una clase.

Espero les haya servido, saludos...recuerda que también puedes probar otros lenguajes.

Read More

Serial de activación para sublime text

Hola a todos hoy les dejare seriales tanto para sublime text 2 y 3 pero antes mencionarles que si tienes el dinero para una caja de cerveza no seas m&$"·*a y paga tu licencia.

Estas licencias fueron sacadas de internet para ser mas exacto del foro taringa.net

Serial de Activación para sublime text 2

----- BEGIN LICENSE ----- 
Alexander 
Single User License 
EA7E-814345 
51F47F09 4EAB1285 7827EFF0 8B1207DC 
A76A6EA3 E1A1CA7A DC1F2703 14897784 
8EDC1C82 3F2A58B9 1C0C8B24 67686432 
281245B3 6233DE5C ADC5C2F9 61FB8A04 
171B63EF 86BA423F 6AC884FD 3273A7AA 
5F50A6DB CE7859AE D62D2B37 AEEDD8C2 
078A8A20 70EEA791 84F48C1E 8ABA7DEB 
0B3907C0 C9A3523B 0091A045 6F67AED8 
------ END LICENSE ------ 


Este serial esta comprobado y funcionando en windows , nunca dio algun problema.

Serial de Activación para sublime text 3

----- BEGIN LICENSE ----- 

Andrew Weber 
Single User License 
EA7E-855605 
813A03DD 5E4AD9E6 6C0EEB94 BC99798F 
942194A6 02396E98 E62C9979 4BB979FE 
91424C9D A45400BF F6747D88 2FB88078 
90F5CC94 1CDC92DC 8457107A F151657B 
1D22E383 A997F016 42397640 33F41CFC 
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D 
5CDB7036 E56DE1C0 EFCC0840 650CD3A6 
B98FC99C 8FAC73EE D2B95564 DF450523 

------ END LICENSE ------ 





—– BEGIN LICENSE —– 
Michael Barnes 
Single User License 
EA7E-821385 
8A353C41 872A0D5C DF9B2950 AFF6F667 
C458EA6D 8EA3C286 98D1D650 131A97AB 
AA919AEC EF20E143 B361B1E7 4C8B7F04 
B085E65E 2F5F5360 8489D422 FB8FC1AA 
93F6323C FD7F7544 3F39C318 D95E6480 
FCCC7561 8A4A1741 68FA4223 ADCEDE07 
200C25BE DBBC4855 C4CFB774 C5EC138C 
0FEC1CEF D9DCECEC D3A5DAD1 01316C36 
—— END LICENSE — 

Según usuarios del lugar de donde lo saque funciona tanto en windows como Linux , yo personalmente estas ultimas licencias no lo he probado, así que esta en ustedes que testeen, esto es debido a que hay varias licencias por ahí circulando pero solo funcionan las de sublime text 2 porque ya se pusieron mosca con las licencias, pero personalmente doy fe que no hay tanta diferencia entre las dos versiones tengo tiempo utilizando la versión 2 y nunca me ha dado ningún tipo de problema, pues es configurable.

Como Activar de forma correcta sublime text


Debemos dirigirnos a nuestro sublime text luego hacemos clic en la pestaña Help -> Enter License

Luego se nos abrirá otra ventana donde debemos insertar la licencia. Una vez insertada la licencia  debemos hacer clic en el botón Use license 

Nota: Algo muy importante para los nuevos, la forma correcta de ingresar la licencia es tomando toda la cadena de texto, me refiero desde -BEGIN LICENSE-  hasta  -END LICENSE- como te muestro en la siguiente imagen.

Aunque no es necesario muchos recomiendan  luego de insertar la licencia es bueno reiniciar sublime text para evitar problemas al momento de instalar plugins.

Read More

Escribir de forma rapida con las abreviaturas de emmet

Hoy veremos como escribir nuestro código de forma rápida utilizando las abreviaturas que nos permite utilizar el plugin emmet.

Si eres de las personas que trabajan utilizando HTML o CSS sabrás que crear estructuras como un titulo o un cuerpo es monótono pues las estructuras son casi siempre parecidas, entonces para evitar estar reescribiendo lo mismo emmet viene a nuestra ayuda, no alargarmos mas este tutorial  empezamos.

Escribir de forma rápida con las abreviaturas de emmet

Primero debes tener instalado el plugin emmet, si aun no lo tienes instalado te recomiendo que revises cualquiera de los siguientes links, te prometo que son cortos y directo al grano

1.- Como instalar emmet (zend coding)
2.- Como instalar plugin en sublime text

NOTA IMPORTANTE:
Antes de empezar quiero aclarar que los nuevo no pueden usar emmet porque cometen un error y es que para que funciones primero debes guardar tu archivo con su respectiva extensión por ejemplo prueba.html luego de eso puedes utilizarla.

html5
Para escribir una estructura de html solo basta con escribir html5 y luego presionas la tecla tab otra variante es escribiendo html:5 + tab puedes hacer tus pruebas.

 article>h2+p  

Ahora vamos suponer que necesitamos utilizar la etiqueta <article> y dentro necesitamos insertar la etiqueta <h2> y <p> para realizar esta acción usaremos article>h2+p   luego seleccionamos tab

El símbolo >, quiere decir dentro de esta etiqueta y el símbolo + es una separación.

nav>a*6
Ahora supongamos que necesitamos crear un menú de navegación, si recuerdan el menú de navegación tiene varias referencia ya sea para llamar imagenes u elementos entonces haremos lo siguiente:

Ahora supongamos que vamos a trabajar con un archivo css y necesitamos usar las abreviaturas, para ello recuerda guardar tu primero tu extensión como css por ejemplo prueba.css

Recuerda que luego escribir tu abreviatura, debes presionar la tecla TAB, para que te salga el resultado.

Y si deseas saber más sobre Emmet, te invito a que ingreses a la página oficial de Emmet, también revisar el cheat-sheet, para que aprendas más abreviaturas de esta genial herramienta.

Read More

Como instalar emmet (zend coding)

Hola amigos hoy veremos como instalar el plugin emmet, o zend coding  como se le conocía antes, se que solo quieres ver el tutorial e instalarlo rápidamente, pero seria bueno que leas un poco el tutorial para evitar errores, prometo hacer estas lineas cortas.

Primero si no sabes para que sirve emmet déjame decirte que es uno de los plugin mas útiles que podrás instalar te ahorra el tiempo a la hora de programar, digamos que con solo escribir algunas palabras como abreviatura puedes obtener toda una estructura de código así ahorrarte tiempo, sin alargar mas esto empezamos con lo que necesitas para instalar emmet.

Como instalar emmet (zend coding)

Para poder instalar cualquier plugin primero debes instalar su gestor de descarga el cual vendria ser el package control, si aun no lo tienes configurado te recomiendo que revises este link: como instalar package control.

Una vez instalado debes hacer lo siguiente:

Paso 1: 

En el menú de tu sublime text selecciona Preferences--> Package Control

Paso 2

Se abrirá una pequeña ventana en ella debes eligir Install Packages

Paso 3

Se abrirá una nueva ventana, en ella debemos buscar emmet y luego seleccionar para que se instale, si todo lo isiste bien ya se habrá instalado emmet.

Read More

navegar entre pestañas del sublime text

Hoy veremos como cambiar de pestaña de forma rápida, te preguntaras y para que me sirve esto, bueno si eres novato aun tal vez no te importe seleccionar tus pestañas con el mouse, pero cuando ya tengas un proyecto de envergadura galácticas tendrás que trabajas con muchas pestañas y ocurre que hay veces donde tendrás que tener abierto unas diez o veinte pestañas y ahí es donde radica el problema imagínate tener que buscar la pestaña con el  mouse "total perdida de tiempo" entonces es mejor conocer atajos para facilitar el trabajo y reducir el tiempo..... esto se catalizara también en menos strees.

En esta guía te voy enseñar dos pasos así que atento, cualquier duda dejas algún comentario.

PASO I

Con este atajo pasaremos de una pestaña a otra y para logra eso debemos presionar las teclas 

Ctrl + Tab

 

PASO II

Para poder regresar o pasar por varias pestañas debes seleccionar  las siguientes teclas varias veces:

Ctrl + Tab + varias veces

 

Eso es todo espero les aya servido este pequeña guía, si tienen alguna duda pueden escribir en la caja de comentarios.

Read More

Ordenar - alinear css en sublime text

Hoy veremos como ordenar o alinear las lineas de código de  nuestro archivo css. Solemos programar sin importarnos este tipo de detalles, pero es de suma importancia tener un orden y legibilidad para que otros programadores puedan entender nuestro código, sobre todo si estamos trabajando e una empresa desarrolladora de software habrá mas de un colega o supervisor que necesitara revisar nuestros avances y sino tenemos la cultura de escribir un código ordenado tendremos muchos problemas, sin mas que decir empezamos con este pequeño tutorial.

Como ordenar - alinear css en sublime text

Empezaremos por ver como ordenar nuestro código, la idea de este ejercicio es que ordenemos el código de orden alfabético como te muestro a continuación.

Primero debemos seleccionar un pedazo del código y luego presionar F9 esto hará que toda la parte seleccionada se ordene de forma alfabéticamente.

Ahora veremos como alinear nuestro código css. para este ejemplo trataremos de alinear el código hacia la derecha o hacia la izquierda dependiendo a donde nosotros necesitemos mover las lineas de nuestro código.

Para alinear a la derecha debemos seleccionar la parte de código a mover y luego presionamos la tecla tabulador.

Para Alinear a a izquierda debemos seleccionar la parte de código a mover y luego la tecla Shift + tabulador

                      

Con esto tendremos mejor ordenado nuestro código, hasta aquí acabamos esta pequeña guía si necesitas saber mas formas de como alinear tu código te recomiendo que revises el siguiente enlace.

como organizar (alinear) codigo en sublime text

Read More

Seleccionar varias lineas en sublime text

Hola amigos hoy veremos como trabajar con las selecciones en sublime text, deben poner un poco de atención al tutorial, pero antes de empezar si estas en esta guía sol me queda felicitarte hay muchas personas que usan distintos tipos de IDE para programar, en este caso a mi me gusta usar sublime text por varias razones que no voy explicar aquí, el detalle es que solo es cuestión de configurar algunas cosas para que sea mas cómodo y nos ahorre tiempo, sin mas que decir empezamos con esta guía.

  Seleccionar lineas en sublime text

Como programadores web, muy a menudo tenemos que editar-modificar código. A continuación se presentan algunos atajos de teclado útiles que permiten hacer diferentes tipos de selecciones en SublimeText.

Ctrl + D

Seleccionar palabra(s)

Seleccionar palabra

Ctrl + L

Seleccionar línea(s)

Seleccionar linea

Ctrl + A

Seleccionar todo el contenido dentro del documento

Seleccionar todo el contenido

Ctrl + Shift + M

Seleccione todo dentro de las llaves ({ } es muy bueno cuando se trabaja con CSS o JavaScript)

Seleccionar contenido dentro de las llaves 

Estos han sido alguno de los trucos para seleccionar en sublime text espero les haya servido de algo, hasta la próxima amigos.

Read More

como organizar (alinear) codigo en sublime text

Bien muchas veces los programadores tienden a copiar código y pegar dentro de sublime, pero en esas ocasiones que al pegar se ve todo desordenado y no sabes como ordenarlo, porque simplemente te da flojera estar ordenando linea por linea, o en el peor de los caso si tienes la voluntad de alinear, pero son demasiadas lineas de código, que te tomaría un buen tiempo y veas por donde lo veas es perdida de tiempo.

Nos hacemos la pregunta entonces Como alinear u organizar código en sublime?

Bien la respuesta es fácil existe dos formas, vamos por la primera.

OPCIÓN 1

seleccionamos todo el código desordenado que queremos alinear al lugar deseado, luego en la pestaña "Edit---Line" ahí vemos varias opciones, les explico

Indent ---- alinea a la izquierda

unindent --- alinea a la derecha

OPCIÓN 2

desde el paquete de instalación instalamos Alignment

Read More

Get y Set automáticos en sublime text

Hola de nuevo, hoy aprenderemos como crear get y set automáticos de nuestras clases en sublime text.

hace una semanas escuche que muchos programadores novatos usan netbeans para trabajar con php. Y otros lenguajes, porque dicen que no se puede crear get y set automáticos como lo hace el ide de netbeans, y que sublime es muy complicado, pues déjame decirte que sublime no es complicado, es mas bien para programadores un poco mas expertos a diferencia de los ide que te dan todo, aclarado todo esto vamos manos a la obra.

Abrimos sublime y vamos y nos vamos a la pestaña en Tools -- New Snippet
se nos abrirá una nueva venta con un código, como muestra la siguiente imagen.

Entonces reemplazamos ese código por el siguiente código que les daré y lo guardamos con el nombre  getSet sin extensión.

CÓDIGO:

<snippet>
    <content><![CDATA[public function get${1/(.*)/\u$1/}()
{
    return \$this->${1:$SELECTION};
}

public function set${1/(.*)/\u$1/}(\$$1)
{
    \$this->$1 = \$$1;
    return \$this;
}
]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>getset</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.php</scope>
    <!-- Optional: Description to show in the menu -->
    <description>Create getter and setter methods</description>
</snippet>

Ahora es momento de probar nuestra snippet.

tenemos que tener un nuevo documento con extensión php y tener definidos nuestros atributos, entonces escribimos getset + tabulador, luego escribiremos cada uno de los atributos y creara automáticamente los gets sets como muestra la siguiente imagen.

y eso es todo amigos, si tienen algún problema pueden escribirme o dejarme un comentario y tratare de ayudarles de las formas breve posible. Suerte.

Read More

Como instalar plugin en sublime text

Bien hoy aprenderemos como instalar algunos plugin necesarios para nuestra aplicación sublime text, primero debieron instalar el package control como se indica en nuestra publicación anterior.
como package Control en sublime text.
Bien una ves instalada el package control, debemos hacer lo siguiente en nuestro sublime text debemos dirigirnos a la pestaña preferences--> package control, luego nos saldra una ventana nos desplazamos hasta install package como muestra la siguiente imagen.

Ahora debemos hacernos un par depreguntas ¿ Para que voy utilizar Sublime? y ¿que plugins debo instalar en sublime text?

Dándonos una idea de la primera pregunta, muchos querrán sublime para programar en php por ejemplo, otros en javascript, otros en html etc, entonces a la ves respondiendo la segunda pregunta les recomendare algunos plugins y paquetes segun varias necesidades.

Empecemos con los que quieren usarlo para HTML:


. EMMET seleccionamos el primero, emmet nos servirá para auto completar muchas lineas de codigo y no escribir de cero, es el caso mde hacer una estructura en html, como ejemplo después de descargar emmet crea un nuevo archivo, guárdalo con extensión html, luego escribes esto "HTML:5" sin las comillas y presionas tabular debería lanzarte la estructura de hmlt5

Ahora para php

.PHP Syntax Checker  Esta nos permitirá darnos una idea cuando nos olvidemos alguna coma o cualquier problema de sintaxis  en php

Ahora recomiendo otra que deberías de instalar:

Sublime Linter

Sublime CodeIntel

ALIGNMENT

Con esto ya tendrás una instalación de sublime decente

Read More

Como Instalar Sublime Text + package control

Hola a todos hoy explicaremos como instalar sublime text mas el package control, esta guía es super básica es para las personas que se están iniciando en programación o simplemente tenga curiosidad.

Que es Sublime Text

Sublime Text es un editor de texto que permite ahorrar mucho tiempo a la hora de desarrollar aplicaciones que usan mucho código, tal como html, css, javascript, php, jquery, etc etc.

Primero tenemos que ir a la pagina oficial de sublime text, en mi caso descargare la version 2, si bien es cierto ya hay la versión en 3, como podrás leer en su pagina oficial es aun beta, así que es mejor empezar con la 2 que ya tiene tiempo en la nube y es muy estable en cualquier caso la instalación es la misma.

Te recomiendo que a la hora de elegir veas bien tu arquitectura ya sea de 32 o 64 bits.
Luego de la descarga empezaras a instalar, como cualquier programa, siguiente siguiente hasta finalizar.

Bien ahora una ves instalada la aplicación pasaremos a explicar como instalar el package control en sublime text?.

Primero una explicación breve que es y para que sirve el package control en sublime. 

Package Control es el gestor de instalación de paquetes de nuestro editor, sublime text.

 y nos permitirá instalar de forma fácil todos los paquetes necesarios para que soporte diferentes tipos de lenguajes y herramientas que nos harán mas fácil la vida a la hora de programar.

Hagan clic según la versión de sublime que instalaron.

Sublime text 2 Mostrar / Ocultar ▼▲

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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')

Sublime text 3 Mostrar / Ocultar ▼▲

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Luego copian ese código y nos dirigimos a nuestro  editor de sublime, ahora van hacer clic en view -> show console como se muestra en la imagen, luego se nos abrirá una consola, ahí deben pegar el código antes copiado.

Para saber si todo quedo ok debe salirnos un mensaje en la consola que nos pida que reiniciamos sublime , luego cerrar y volver abrir sublime y ya todo esta ok debe aparecer como se muestra en la imagen mas  abajo , en el próximo tutorial les enseñare como instalar plugin y paquetes.

Instalar package control en sublime text

Read More