Snippets para Visual Studio Code y Joomla

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.

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.

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.

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 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.

Conecta conmigo: Twitter Linkedin Github Joomla

 

¿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!