[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla
# Snippets para Visual Studio Code y Joomla
[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 25 Julio 2018 [Tips Joomla](https://sergioiglesias.net/blog/joomla) 2 - 4 minutos Visitas: 8873 -
- [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-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**](https://sergioiglesias.net/blog/recomendaciones/417-herramientas-desarrollo-web) 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
[ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/snippets-para-visual-studio-code-y-joomla "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fsnippets-para-visual-studio-code-y-joomla&text=Snippets%20para%20Visual%20Studio%20Code%20%28%40code%29%20y%20%23Joomla%20-%20%23TipJoomla%20por%20%40sergiois "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=Snippets%20para%20Visual%20Studio%20Code%20%28%40code%29%20y%20%23Joomla%20-%20%23TipJoomla%20por%20%40sergiois%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fsnippets-para-visual-studio-code-y-joomla "Enví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](https://code.visualstudio.com/) 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](https://docs.microsoft.com/es-es/visualstudio/ide/writing-code-in-the-code-and-text-editor)
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](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_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": [""],
"description": "Text String"
}
```
### Var Dump
```
"var_dump": {
"prefix": "VarDump",
"body": ["echo ''; var_dump($1); echo '';"],
"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
[ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/snippets-para-visual-studio-code-y-joomla "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fsnippets-para-visual-studio-code-y-joomla&text=Snippets%20para%20Visual%20Studio%20Code%20%28%40code%29%20y%20%23Joomla%20-%20%C2%BFCu%C3%A1les%20son%20los%20tuyos%3F%20-%20%23TipJoomla%20por%20%40sergiois "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=Snippets%20para%20Visual%20Studio%20Code%20%28%40code%29%20y%20%23Joomla%20-%20%C2%BFCu%C3%A1les%20son%20los%20tuyos%3F%20-%20%23TipJoomla%20por%20%40sergiois%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fsnippets-para-visual-studio-code-y-joomla "Envíalo")
Puedes ver algunas cosas más en este artículo, [Visual Studio Code as a Joomla Code Editor](https://joomlaboratory.com/component/content/article?id=11: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](https://laracasts.com/series/visual-studio-code-for-php-developers)
---
Gracias a [Anibal Sánchez](https://twitter.com/anibal_sanchez?lang=es) podemos disfrutar de una gran colección dentro del MarketPlace de VSCode: [VSCode Joomla Snippets](https://marketplace.visualstudio.com/items?itemName=AnibalSanchez.vs-code-joomla-snippets)
[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado
### ¿No sabes bien en qué estado
está tu web Joomla?
Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.
Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML
[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables
[](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior
Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.
[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")
### Suscríbete a mi newsletter
¿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**.
[Quiero apuntarme!](https://sergioiglesias.net/newsletter)
### 2 comentarios
- [  ](https://www.gravatar.com/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f)
sergiois
[ Viernes, 24 Agosto 2018 08:48 ](https://sergioiglesias.net/blog/joomla/snippets-para-visual-studio-code-y-joomla?akengage_cid=229#akengage-comment-229)
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!
- [  ](https://www.gravatar.com/df7fbcf5652e2a22940918d3c4db48cfaadd50c9096fd7ccd46504d62eb6fd07)
Anibal
[ Jueves, 23 Agosto 2018 18:43 ](https://sergioiglesias.net/blog/joomla/snippets-para-visual-studio-code-y-joomla?akengage_cid=228#akengage-comment-228)
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!
### Deja tu comentario
En respuesta a Some User
Nombre \*
Dirección de email \*
Texto del comentario \*
Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*