(Tiempo estimado: 2 - 4 minutos)

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": [
                "
<div class="row-fluid">",
                "
<div class="span${1:type the size}"> </div>
'",
                "
<div class="span${1:type the size}"> </div>
'",
                "</div>
"
                ],
  "description": "Bootstrap 2 con 2 columnas"
}

Bootstrap 3 con 2 columnas

"Bootstrap 3 con 2 columnas": {
  "prefix": "row",
  "body": [
                "
<div class="row-fluid">",
                "
<div class="col-md-${1:type the size}"> </div>
'",
                "
<div class="col-md-${1:type the size}"> </div>
'",
                "</div>
"
                ],
  "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": [
    "<jdoc:include type="modules" name="${modname:Type the module position}" style="${modstyle: Type the module style};"></jdoc:include>"
    ],
         "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

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#2 sergiois 24-08-2018 08:48
Ey!! Muchas gracias Aníbal por esa inspiración. La verdad que está genial. Gran trabajo!!
Pongo el enlace en el artículo para que tenga más visibilidad.
Un abrazote!
Citar
#1 Anibal 23-08-2018 18:43
Hola Hola!

Este artículo me inspiró, aquí una colección de snippets para Joomla en el VSCode Marketplace:

https://marketplace.visualstudio.com/items?itemName=AnibalSanchez.vs-code-joomla-snippets

Saludos!
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo