Tarifa plana de servicios 煤nicos para profesionales WordPress

Guardar snippets personalizados en Visual Studio Code

Herramientas

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

Abrir configuraci贸n de snippets personalizados 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 '<pre>';\r",
			"var_dump( $1 ); \r",
			"echo '</pre>';\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:

Insertando un codigo personalizado vscode

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.

NO te pierdas las novedades en SumaPress

Contacto directo
1
驴Tienes dudas? ????
Hola! ????????
驴tienes dudas? 驴No tienes claro si te ser谩 de utilidad lo que te ofrece SumaPress?
En ese caso no dudes en contactar para resolverlas :)
pd: no te pierdas el canal de Telegram https://t.me/sumapress
Powered by