🚀 React JSX Pro - Autocomplete & Snippets

Extensión completa para VS Code que acelera tu desarrollo React con autocompletado inteligente, auto-imports, refactoring y más de 60 snippets útiles.

✨ Características

🎯 Autocompletado Inteligente

Tags HTML/JSX: Escribe < y obtén sugerencias automáticas
Componentes del proyecto: Auto-detecta tus componentes con import automático
Hooks personalizados: Sugiere tus hooks al escribir use...
Tailwind CSS: Autocompletado dentro de className=""

🔧 Comandos de Refactoring

Envolver con <div> - Click derecho en selección
Envolver con Fragment <></> - Menú contextual
Extraer Componente - Crea nuevo componente automáticamente

💡 Documentación Inline

Pasa el mouse sobre hooks de React (useState, useEffect, etc.) para ver su documentación.

📦 Snippets Disponibles

⚛️ Componentes

Atajo	Descripción
`rfc`	Componente funcional básico
`rfcp`	Componente funcional con props
`rfct`	Componente funcional TypeScript
`rmemo`	Componente memorizado (React.memo)
`lazy`	Lazy load component
`susp`	Suspense wrapper
`rerr`	Error Boundary

🪝 Hooks

Atajo	Descripción
`ust`	`useState`
`uef`	`useEffect` básico
`uefc`	`useEffect` con cleanup
`uctx`	`useContext`
`urd`	`useReducer`
`ucb`	`useCallback`
`umm`	`useMemo`
`urf`	`useRef`
`rch`	Hook personalizado completo

🌐 Context API

Atajo	Descripción
`rctx`	Context completo con Provider y hook personalizado

🧭 React Router

Atajo	Descripción
`rroute`	`<Route path="/" element={<Component />} />`
`rlink`	`<Link to="/path">text</Link>`

🔄 Redux Toolkit

Atajo	Descripción
`rdxslice`	Redux Slice completo
`rdxsel`	`useSelector` hook
`rdxdis`	`useDispatch` hook

🌐 API & Llamadas Asíncronas

Atajo	Descripción
`fetch`	Fetch API con try-catch
`axget`	Axios GET request
`axpost`	Axios POST request
`rquq`	React Query `useQuery`
`rqum`	React Query `useMutation`
`aaf`	Async arrow function

📝 Formularios

Atajo	Descripción
`rform`	Formulario completo con estado y handlers

🧪 Testing (Jest + React Testing Library)

Atajo	Descripción
`desc`	`describe()` block
`test`	`test()` case
`it`	`it()` case
`ita`	`it()` async case
`bfe`	`beforeEach()`
`afe`	`afterEach()`
`rtlr`	RTL `render()`
`rtlfe`	`fireEvent`
`rtlue`	`userEvent`
`rtlwf`	`waitFor()`
`jmock`	Jest mock function
`jspy`	Jest `spyOn()`
`exp`	`expect()` assertion
`mockapi`	Mock fetch API response
`mswh`	MSW request handler

🛠️ Utilidades

Atajo	Descripción
`af`	Arrow function
`try`	Try-catch block
`map`	`array.map()`
`filter`	`array.filter()`
`ter`	Operador ternario
`dpr`	Destructurar props/objeto
`imp`	Import statement
`imn`	Import named
`clg`	`console.log()`
`cer`	`console.error()`

💅 Styled Components

Atajo	Descripción
`stc`	Styled component

📋 Otros

Atajo	Descripción
`rpt`	PropTypes definition

🎬 Cómo Usar

Autocompletado JSX

function App() {
  return (
    <h  // Escribe < y aparecerán sugerencias
  )
}

Auto-import de Componentes

<MyComponent  // Auto-detecta y agrega el import
// Resultado: import MyComponent from './MyComponent'

Usar Snippets

rfc  // Presiona Tab
// Genera componente funcional completo

ust  // Presiona Tab
// const [state, setState] = useState();

Refactoring

Selecciona código JSX
Click derecho → "React: Envolver con <div>"
O usa "React: Extraer a nuevo componente"

Tailwind Autocomplete

<div className="flex   // Sugerencias: flex-row, flex-col, etc.

⚙️ Configuración

Personaliza en Settings (Ctrl+,):

{
  "reactJsxPro.enableAutoImport": true,
  "reactJsxPro.enableJsxCompletion": true,
  "reactJsxPro.enableTailwindCompletion": true,
  "reactJsxPro.scanCustomHooks": true
}

🐛 Solución de Problemas

El autocompletado no funciona:

Verifica que el archivo sea .jsx o .tsx
Lenguaje debe ser "JavaScript React" o "TypeScript React"

Los componentes no se detectan:

Recarga VS Code: Ctrl+Shift+P → "Reload Window"
Verifica que no haya errores de sintaxis

Auto-import no funciona:

enableAutoImport debe estar en true
Componentes deben tener export default o export const

📝 Changelog

2.0.0

✨ Auto-import de componentes
✨ Detección de hooks personalizados
✨ Autocompletado Tailwind
✨ Comandos de refactoring
✨ 60+ snippets
✨ Testing snippets
✨ Redux y React Query

💖 Soporte

Si encuentras útil esta extensión, considera:

⭐ Darle una estrella
🐛 Reportar bugs
💡 Sugerir mejoras

Hecho con ❤️ para la comunidad React

React JSX Genius Pro - Autocomplete & Snippets

DePol DeMarco