JS TS React Snippets

Una extensión para Visual Studio Code que proporciona fragmentos de código (snippets) útiles para JavaScript, TypeScript y React. Esta extensión incluye una serie de plantillas para acelerar el desarrollo y aumentar la productividad.

Snippets incluidos

JavaScript Snippets

• Import default or named

  • Prefix: imp
  • Cuerpo: import $1 from '$2';
  • Descripción: Importa por defecto o nombrado desde un módulo.

• Import multiple

  • Prefix: imp-multi
  • Cuerpo: import { $1 } from '$2';
  • Descripción: Importa múltiples exportaciones nombradas desde un módulo.

• generate console.log()

  • Prefix: clg
  • Cuerpo: console.log("$1", $2)$3

• generate console.log()2

  • Prefix: clg2
  • Cuerpo: console.log($1)$2

• Try Catch

  • Prefix: try
  • Cuerpo:

    try {
      $1
    } catch (error) {
      console.error(error);
    }
    

  • Descripción: Usa map para transformar un array.

• If

  • Prefix: if
  • Cuerpo:

    if ($1) {
      $2
    }
    

  • Descripción: Usa map para transformar un array.

• If Else

  • Prefix: ifelse
  • Cuerpo:

    if ($1) {
      $2
    } else {
      $3
    }
    

  • Descripción: Usa map para transformar un array.

• Array Map

  • Prefix: map
  • Cuerpo:

    map(($1) => {
      $2
    });
    

  • Descripción: Usa map para transformar un array.

• Array Filter

  • Prefix: filter
  • Cuerpo:

    filter(($1) => {
      $2
    });
    

  • Descripción: Usa filter para filtrar un array.

• Array Reduce

  • Prefix: reduce
  • Cuerpo:

    reduce(($1, $2) => {
      $3
    }, $4);
    

  • Descripción: Usa reduce para reducir un array a un solo valor.

• Array Find

  • Prefix: find
  • Cuerpo:

    find(($1) => {
      $2
    });
    

  • Descripción: Usa find para buscar un elemento en un array.

• Array Some

  • Prefix: some
  • Cuerpo:

    some(($1) => {
      $2
    });
    

  • Descripción: Usa some para verificar si algún elemento cumple una condición.

• Array Every

  • Prefix: every
  • Cuerpo:

    every(($1) => {
      $2
    });
    

  • Descripción: Usa every para verificar si todos los elementos cumplen una condición.

• Array ForEach

  • Prefix: foreach
  • Cuerpo:

    forEach(($1) => {
      $2
    });
    

  • Descripción: Usa forEach para iterar sobre un array.

React Snippets

• React Functional Component

  • Prefix: rfc
  • Cuerpo:

    import React from 'react';
    
    const ${TM_FILENAME_BASE} = () => {
      return (
        <div>
          $1
        </div>
      );
    };
    
    export default ${TM_FILENAME_BASE};
    

  • Descripción: Crea un componente funcional en React.

• React Arrow Function Component

  • Prefix: rafc
  • Cuerpo:

    import React from 'react';
    
    const ${TM_FILENAME_BASE} = () => (
      <div>
        $1
      </div>
    );
    
    export default ${TM_FILENAME_BASE};
    

  • Descripción: Crea un componente funcional de tipo flecha en React.

• React useState Hook

  • Prefix: usestate
  • Cuerpo:

    const [$1, set$1] = useState($2);
    

  • Descripción: Snippet para el hook useState.

• React useEffect Hook

  • Prefix: useeffect
  • Cuerpo:

    useEffect(() => {
      $1
    }, [$2]);
    

  • Descripción: Snippet para el hook useEffect.

• React Event Handler

  • Prefix: event
  • Cuerpo:

    const handle$1 = (e : $2) => {
      $3
    };
    

  • Descripción: Snippet para un manejador de eventos.

• React PropTypes

  • Prefix: propTypes
  • Cuerpo:

    import PropTypes from 'prop-types';
    
    $1.propTypes = {
      $2: PropTypes.$3,
    };
    

  • Descripción: Snippet para agregar PropTypes a un componente.

• React Functional Component with useState

  • Prefix: rfc-usestate
  • Cuerpo:

    import React, { useState } from 'react';
    
    const $1 = () => {
      const [$2, set$2] = useState($3);
      return (
        <div>
          $4
        </div>
      );
    };
    
    export default $1;
    

  • Descripción: Crea un componente funcional en React con useState.

Otros Snippets

• Arrow Function (Curly braces)

  • Prefix: af
  • Cuerpo:

    ($1) => {
      $2
    };
    

  • Descripción: Crea una función flecha con llaves sin const ni =.

• Arrow Function with const

  • Prefix: afc
  • Cuerpo:

    const $1 = ($2) => {
      $3
    };
    

  • Descripción: Crea una función flecha usando const.

Instalación

1. Abre Visual Studio Code.
2. Ve a la pestaña de extensiones en el menú lateral izquierdo (o presiona Ctrl+Shift+X).
3. Busca "JS TS React Snippets" e instálala.
4. Una vez instalada, podrás usar los fragmentos escribiendo el prefix de cada uno en tus archivos de código.

Contribuciones

Si deseas contribuir con más fragmentos de código o mejorar la extensión, no dudes en crear un pull request o abrir un issue.

¡Espero que esta extensión sea útil para tu desarrollo en JavaScript, TypeScript y React!