SERGIOIGLESIAS

Blog sobre Joomla

Snippets para Visual Studio Code y Joomla

@sergiois Tips Joomla 2 - 4 minutos Visto: 7696

Si has leído el artículo de la pasada semana en la que te mostraba mi set de herramientas que utilizo en Desarrollo Web con Joomla habrás visto que mi editor preferido es Visual Studio Code.

Hoy te muestro algunos Snippets y otras cosas que puedes hacer con este editor.

Snippets para Visual Studio Code (@code) y #Joomla - #TipJoomla por @sergiois Tuitéalo

Qué puedo hacer con Visual Studio Code

En primer lugar, si no conoces este editor, te invito a visitar su página web oficial donde podrás descargarlo y ver todo lo que ofrece.

A parte de ser bastante ligero, te presento algunas de sus características:

  • Interfaz simple e intuitiva.
  • Color de sintaxis.
  • Auto-Cierre de llaves en etiquetas.
  • Color interactivo de código.
  • Depurador de código avanzado.
  • Emmet.
  • Cursores Múltiples.
  • Personalización de todo.
  • Integración con Git.
  • Integración con Terminal.
  • Extensiones: incrementa funcionalidad.

Puedes ver más información en la web oficial: Características del editor de código

Y ahora... al grano.

Snippets para Joomla

Te estás preguntando que ¿Qué es un Snippet?

Pues bien, se trata de pequeñas partes reusables de código fuente. Es decir, código que utilizas de forma habitual en tus desarrollos, tenerlos ya "pre-cargados" para que no tengas que escribirlo todo una y otra vez.

Para Joomla, te muestro a continuación algunos que puedes utilizar.

Pero antes... vamos a ver cómo introducirlos en el editor.

Para ver los que tenemos definidos en función del lenguage tienes que ir a Archivo > Preferencias > Fragmento de código de usuario.

Ccode Framentos de código

Puedes ver en la imagen que hay para casi todo.

Y, a parte, puedes crear los tuyos propios.

Para ello, hay que crear un archivo JSON en función del lenguaje que vayas a utilizar.

En este caso... php.json

Tienes más información en la web oficial: Creating your own snippets (en inglés).

Y sí, ahora te muestro algunos que he ido recopilando y que, créeme, ayudan mucho.

JText

"Expand a JText": {
	"prefix": "JText",
	"body": ["<?php echo JText::_('$1'); ?>"],
	"description": "Text String"
}

Var Dump

"var_dump": {
	"prefix": "VarDump",
	"body": ["echo '<pre>'; var_dump($1); echo '</pre>';"],
	"description": "VarDump"
}

Bootstrap 2 con 2 columnas

"Bootstrap 2 con 2 columnas": {
	"prefix": "row-fluid",
	"body": [
                "
", "
 
'", "
 
'", "
" ], "description": "Bootstrap 2 con 2 columnas" }

Bootstrap 3 con 2 columnas

"Bootstrap 3 con 2 columnas": {
	"prefix": "row",
	"body": [
                "
", "
 
'", "
 
'", "
" ], "description": "Bootstrap 3 con 2 columnas" }

Variables Head en Template

"Variables Head en Template": {
        "prefix": "TemplateHeaders",
        "body": [
                "defined('_JEXEC') or die;",
                "$app = JFactory::getApplication();",
                "$doc = JFactory::getDocument();",
                "$user = JFactory::getUser();",
                "$this->language = $doc->language;",
                "$this->direction = $doc->direction;"
                ],
        "description": "Variables Head en Template"
}

Añadir Script

"Añadir Script": {
         "prefix": "addScript",
         "body": [
                  "$doc->addScriptVersion($this->baseurl . '/templates/${1:Your Template Name}/${2:Your script address}');"
                 ],
         "description": "Añadir Script"
}

Añadir CSS

"Añadir CSS": {
         "prefix": "addCSS",
         "body": [
                  "$doc->addStyleSheetVersion($this->baseurl . '/templates/${1:Your Template Name}/${2:Your css address}');"
                 ],
         "description": "Añadir CSS"
}

Añadir una posición en plantilla

"ñadir una posición en plantilla": {
	"prefix": "addModule",
	"body": [
		""
		],
         "description": "Añadir una posición en plantilla"
}

Creo que de momento tienes batantes Snippets para utilizar en tus desarrollos con Joomla.

Si tienes más y quieres compartirlos utiliza los comentarios. Estaré encantado de verlos, probarlos y añadirlos al artículo para que todos podamos incluirlos en nuestro editor.

Prometo que, cuando vaya teniendo más, actualizaré este artículo para ponerlos a tu disposición.

Snippets para Visual Studio Code (@code) y #Joomla - ¿Cuáles son los tuyos? - #TipJoomla por @sergiois Tuitéalo

Puedes ver algunas cosas más en este artículo, Visual Studio Code as a Joomla Code Editor, en el que me he basado para hacer este post.

También comparto contigo estos vídeos en los que se muestran cómo configurar de forma correcta el editor para desarrolladores PHP: Visual Studio Code for PHP Developers


Gracias a Anibal Sánchez podemos disfrutar de una gran colección dentro del MarketPlace de VSCode: VSCode Joomla Snippets

¿Te ha gustado el artículo?

Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

2 comentarios

  • Ey!! Muchas gracias Aníbal por esa inspiración. La verdad que está genial. Gran trabajo!!<br />Pongo el enlace en el artículo para que tenga más visibilidad.<br />Un abrazote!
  • Hola Hola!<br /><br />Este artículo me inspiró, aquí una colección de snippets para Joomla en el VSCode Marketplace:<br /><br />https://marketplace.visualstudio.com/items?itemName=AnibalSanchez.vs-code-joomla-snippets<br /><br />Saludos!

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.