martes, 19 de marzo de 2019

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.


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.


sábado, 19 de enero de 2019

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.





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.







jueves, 27 de diciembre de 2018

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.






jueves, 20 de diciembre de 2018

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



miércoles, 19 de diciembre de 2018

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.

Con la tecnología de Blogger.

Anuncio

Popular Posts

Siguenos en Twiter