Hola, estaba viendo un video tutorial de Zustand y al crear un componente me dio mucha flojera teclear toda la sintaxis de un componente en React.
export const Start = () => {
return (<></>)
}
Y recorde que se pueden configurar los snippets de Visual Studio Code (VSC). Pero no recordaba como xD, entonces lo que hice fue buscar un tutorial en YT, y encontre este tutorial del profe FerH
2.- Ir a Configure Snippets
para esto dentro de VSC tenemos que presionar en mi caso:
//macOS
shift + command + p
pero puedes ir desde la interfaz de VSC
selecciona el lenguaje donde quieras tener tus snippets
y recuerda solo funcionaran en el lenguaje en el que los hayas configurado, ejemplo si usaste javascript, solo funcionaran para ese tipo de archivos js, y no para archivos de typescript.
en mi caso seria seleccionar typescriptreact una vez seleccionado se te mostrara el archivo .json
y este es el snippet en si para crear un componente en react de manera rapida.
"Create Arrow Component React":{
"prefix": "carrow",
"body": [
"export const $1 = () => {",
"return (<>$2</>)",
"}"
],
"description": "Export Arrow Component"
}
el $1 y $2 en el snippet son las posisiones que tomara el cursor al darle tab.
prefix: es el "nombre" por el cual podremos acceder desde el editor
body: es el cuerpo de nuestro snippet
description: es una descripción opcional de lo que es nuestro snippet
4.- Usarlo
y para usarlo basta con mandarlo a llamar desde un archivo .tsx (esto en mi caso porque seleccione "typescriptreact") de esta manera.
aca entran en juego los $1 y $2.
- si nos damos cuenta el puntero se ubica conde estaba el $1 es decir después de const esto para poder teclear el nombre del componente
- una ves puesto el nombre si damos tab, nos ubicara en la posición del $2 que es en el fragmento de react (es decir entre el <> y </> que esta en el return).
y ya eso es todo, ya tienes tu snippet configurado para meter bugs mas rapido xD
SOCIAL SHARE CARD GENERATOR