Blade Snippets es lo que te faltaba para ser un ninja en Laravel

Preocúpate cada vez menos por lo inútil y trabaja solo en lo importante usando blade snippets en tu proyecto.

dgfrancisco
Oja.la
5 min readFeb 2, 2017

--

Por: Juan Camilo Camacho — Instructor y asesor en Oja.la

Los snippets son trozos de código que usamos una y otra vez. Cuando hablamos de utilizar snippets en diseño y desarrollo web por lo general nos referimos a código HTML, CSS o funciones particulares en Javascript, PHP, Ruby, Etc, que usamos todo el tiempo y vamos a necesitar en el futuro.

Esta es la mejora que agregaremos a nuestro trabajo con Sublime Text, la comunidad a generado cientos de snippets que nos pueden ayudar a ser más rápidos y a corregir nuestras sintaxis en algunos casos.

Bueno, AL GRANO!!! ya entendiste ;)

Lo primero que debemos hacer es dentro de nuestro Sublime Text vamos a agregar un componente que se llama Package Control, para realizar esta instalación tendremos que ir a Packagecontrol.io

Esta es la página de instalación del Package control

Al entrar aquí debemos corroborar que versión de sublime tenemos instalada en nuestro computador, una forma simple pero un tanto rústica pero funcional es ir a la sección Help > Documentation.

Esto inmediatamente nos enviará a una página con la documentación de nuestra versión, ya sea 2 o 3, En mi caso es la versión Sublime text 3 y es con la que trabajaremos este post, si tienes una versión anterior podrías actualizar de una vez tu Sublime Text es gratis ;)

Lo siguiente paso será ejecutar los comandos que nos indica packageControl, esto lo haremos creando un nuevo archivo de cualquier tipo para que Sublime habilite las opciones correctas. Luego en la opción View vas a picar donde dice Show Console como lo muestra la imagen.

Al hacer esto nos abrirá una pequeña terminal en la parte baja de nuestro proyecto. Y en este pequeño campo vamos a pegar el código que nos da PackageControl en su página web (Para estar seguro es el campo pequeño).

Si estas en Sublime Text 3 es código es:

import urllib.request,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f’ + ‘1e3d39e33b79698005270310898eea76’; 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)

Después de esto tendrémos instalado PackageControl que nos va a permitir instalar Snippets pre-diseñados por otros desarrolladores y plugins y varias herramientas más. Vamos a reiniciar nuestro Sublime Text y después vamos a teclear los comandos Shift + Ctrl + P y nos abrirá una ventana como esta y vamos a escribir en el campo “Package Control” donde seleccionaremos la opción Package Control: Install Package

Al instalar el paquete, este va a buscar librerías y elementos que necesita para operar tardara un segundo y luego aparecerá un nuevo campo donde escribiremos “blade” para instalar 3 paquetes que nos interesa:

En ese momento instalara el paquete con los respectivos snippets para empezar a trabajar con los códigos en tu proyecto y veras en la parte inferior de Sublime como instala los paquetes de Blade.

Al terminar la instalación vamos a realizar nuevamente otra instalación de un paquete pero ahora será el paquete Blade Spacer, entonces de nuevo dentro de sublime Text teclea: Shift + Ctrl + P y buscas de nuevo Package Control: Install Package para habilitar la búsqueda y en cuanto se abra de nuevo la ventana para buscar vas a escribir: Blade Spacer:

Y por Último instalaremos el paquete Laravel Blade Highligter:

Re-iniciamos nuestro Sublime Text con el fin de que los paquetes instalados inicien correctamente y vemos ya la diferencia en nuestros archivos .blade

Inmediatamente veremos la sintaxis resaltada y a medida que escribamos el respectivo código dentro de los archivos .blade sublime nos recomendará algunos snippets que podemos usar:

Así notamos que con un par de colores es mucho mas sencillo leer el código, ademas de tener un control sobre la sintaxis que manejamos, evitando Esos dolores de cabeza que nos da el olvidar un punto, cerrar una llave o incluso escribir mal una palabra.

Y listo, ya solo queda seguir escribiendo código y aprovechar lo que la comunidad te coparte para ser más eficiente, si por otro lado quieres profundizar en el manejo de Sublime Text, puedes revisar el curso en Oja.la donde podrás aprender todos los detalles, este es solo uno de muchos.

Por: Juan Camilo Camacho — Instructor y asesor en Oja.la

--

--