Guardar snippets personalizados en Visual Studio Code

Visual Studio Code es uno de los mejores programas actualmente para programar páginas web con WordPress, ya que es gratuito, de código abierto, multiplataforma, trae Git y teminal integrada 🙂

Visual Studio Code es un editor de código fuente desarrollado por Microsoft para Windows , Linux y macOS. Incluye soporte para la depuración, control integrado de Git , resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código. También es personalizable, por lo que los usuarios pueden cambiar el tema del editor, los atajos de teclado y las preferencias. Es gratuito y de código abierto, aunque la descarga oficial está bajo software propietario.

Wikipedia

Por otra parte, tal y como vemos en este artículo, destacar que puedes crear tus propios snippets de código personalizados y llamarlos con un atajo de teclado (prefijo) + tabulador.

Estos snippets de código puedes hacer que estén disponibles de modo global, pero también específicamente para un lenguaje de programación como por ejemplo PHP.

Crear snippets personalizados en VSCODE

• Abres la línea de comandos de VSCODE: ctrl + shift + P
• Tras el símbolo > escribes: snippet y seleccionas la opción señalada en rojo en la imagen anterior, y que corresponde con la configuración de snippets.
• Lo siguiente es elegir la opción global o un lenguaje de programación concreto como PHP según la imagen de ejemplo.

Tras seleccionar el lenguaje de programación se abrirá un fichero json, como por ejemplo php.json en el cual tienes que guardar los snippets personalizados y dejarlo como el siguiente ejemplo con 3 snippets personalizados:

En primer lugar va el nombre, y dentro de este 3 elementos:

• Prefix: el prefijo o atajo de teclado con el que llamar al snippet
• Body: propiamente el código a guardar
• Description: una descripción de ayuda para cuando tengas muchos

{
  "WP Add action": {
    "prefix": "_wpada",
    "body": [
      "add_action('init', '$1');\r",
      "/**\r",
      " * $2\r",
      " */\r",
      "function $1(){\r",
      "    $3\r",
      "}"
    ],
    "description": "Add action"
  },
  "Var dump preformateado con wp_die()": {
    "prefix": "_wpdev",
    "body": ["echo '';\r", "var_dump( $1 ); \r", "echo '';\r", "wp_die();"],
    "description": "Debug into PHP & WP"
  },
  "Image sizes": {
    "prefix": "_wpimg",
    "body": [
      "add_action( 'after_setup_theme', '$1_theme_setup_images_sizes' );\r",
      "/**\r",
      " * Add custom image sizes\r",
      " **/\r",
      "function $1_theme_setup_images_sizes() {\r",
      "    add_image_size( '$2-home', 200, 200, array( 'center', 'center' ) );\r",
      "}"
    ],
    "description": "Add custom image size"
  }
}

Es recomendable que uses siempre un mismo inicio de prefijo como por ejemplo el underscores planteado _wpada y que aunque no es realmente necesario, te ayudara a diferenciarlo de otros atajos creados por otras extensiones que puedas tener instaladas.

Importante: para que directamente escribas el prefijo y con el tabulador ya se inserte el código preparado, revisa que tengas activa la opción: «editor.tabCompletion» en las opciones de vscode.

Ejemplo insertar snippet WordPress

Por ejemplo, en el caso del primer snippet mostrado en el código presentado llamado «WP Add action», tecleando directamente dentro de un fichero PHP el prefijo: _wpada obtienes lo siguiente:

Te sale un listado con la descripción creada como referencia para que eligas el snippet a introducir, tras lo cual se insertará el código que tengas previsto:

En este caso aparece el código directamente con el cursor ya preparado para escribir a la vez en dos posiciones, lo que en este caso será el nombre de la función.

Tras escribir el nombre de la función si le das a tabulador te lleva a la posición en la que se escribe el comentario.

Dandole una vez más al tabulador este te lleva al interior de la función para empezar a escribir el código de la misma.

Importante: para jugar con los tabuladores y definir donde va en cada momento el cursor, fijate en el código del ejemplo donde se define el código del snippet en la parte de $1, $2 y $3. Cada uno de estos coincide con los pasos del tabulador, pudiendo poner como en el ejemplo varios $1 para tener multicursor en el momento de escribir el nombre de la función en 2 sitios a la vez.

Crear snippets más rápido

Para crear snipets más rapido que ir al fichero JSON en cuestión como el visto en este artículo, puedes usar una extensión como snippet-creator, aunque parece que al poco de sacarla el desarrollador ha dejado de mantenerla 🙁

Con esta extensión simplemente escribes en tu fichero el codigo que quieres convertir en código siempre accesible con atajo, y despues en la línea de comandos buscas «Create snippet» tras lo cual te va pidiendo los datos para crearlo: lenguaje, nombre, prefijo y descripción y ya sólo con esto lo tienes dentro del fichero json de configuración.

Espero que te sea de utilidad tanto el concepto en sí de poder programar tus propios snippets de código con Visual Studio Code como propiamente los 3 códigos de ejemplo.

Si te ha gustado... ¡Compártelo!