VSC Snippets

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 https://www.youtube.com/watch?v=tH83JIBnVQg

Mi explicación estará basada en ese video aunque no lo termine de ver xD pero es algo muy sencillo y hago el post por si en algún momento se me vuelve a olvidar como hacer esto xD.

1.- Tener instalado VSC xD

si alguien aun no lo tiene instalado, que no creo, pero si es asi aqui lo pueden descargar: https://code.visualstudio.com

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

3.- Seleccionar lenguaje

te aparecera algo como esto:

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

aqui es donde podras configurar todos los snippets del lenguaje que hayas seleccionado.

en mi caso para poder hacer esto

export const Start = () => {
return (<></>)
}

mi configuracion quedo de la siguiente manera

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.

una ves seleccionado tendremos esto

aca entran en juego los $1 y $2.

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