Usar VSCode para desarrollar React

Visual Studio Code (abreviado VS Code) es un editor de código gratuito y de código abierto desarrollado por Microsoft, que admite múltiples lenguajes de programación y ofrece funciones como resaltado de código, autocompletado inteligente, refactorización de código y depuración.

VS Code incluye una terminal integrada que permite ejecutar herramientas de línea de comandos directamente en el editor, como npm, yarn, etc., lo que facilita la construcción y gestión de proyectos.

Si deseas tener un entorno de desarrollo de Vue.js más completo, puedes instalar las extensiones Volar y Volar for TypeScript, que proporcionan sugerencias inteligentes para Vue.js.

Si aún no conoces VS Code o no lo has instalado, puedes consultar:Tutorial de VSCode。

¿Por qué elegir VS Code para desarrollar React?

• Autocompletado inteligente: tiene un soporte perfecto para JSX, React Hooks, Props, etc.
• Gran variedad de extensiones: instala con un clic ESLint, Prettier, fragmentos de código, etc., para mejorar la eficiencia.
• Terminal integrada: ejecuta directamente en el editornpm run devcomandos, etc.
• Herramientas de depuración: el depurador integrado combinado con React DevTools ofrece una experiencia increíble.
• Multiplataforma: compatible perfectamente con Windows, macOS y Linux.
• Gratuito y de código abierto: mantenido por Microsoft, con una comunidad activa.

---

Descargar e instalar VS Code

• Visita el sitio web oficial:https://code.visualstudio.com/

• Haz clic en el granDownloadbotón, elige tu sistema operativo:

  • Windows: descarga el instalador .exe
  • macOS: descarga el .dmg (arrastra a Applications)
  • Linux: según la distribución, elige .deb o .rpm

• Proceso de instalación:

  • Windows/macOS: haz doble clic en el instalador y sigue con Next/Continuar.
  • Se recomienda marcar "Añadir a PATH" y "Registrar como editor de código" (para abrir fácilmente desde la línea de comandos).

• Verificar la instalación:

  • Abre VS Code y verás la pantalla de bienvenida.
  • Los usuarios de Windows pueden escribir en la línea de comandoscode --versionpara probar.

Abrir tu proyecto React

1. Abre VS Code.

2. Método 1: menúFile → Open Folder, selecciona tu carpeta de proyecto (por ejemplomy-first-react-app）。

3. Método 2 (recomendado): en la terminal, accede al directorio del proyecto y abre con un clic:

   cd my-first-react-app
   code .

   （code .El comando abrirá la carpeta actual directamente con VS Code)

Ahora verás el explorador de archivos a la izquierda, que muestra la estructura del proyecto (como src, public, etc.).

Instalar las extensiones esenciales (Extensions)

El poder de VS Code radica en las extensiones. Haz clic en el icono de la barra de actividad izquierdaExtensions(cuatro cuadrados), o presiona el atajo de tecladoCtrl+Shift+X（macOS: Cmd+Shift+X) para abrir el mercado de extensiones.

Busca e instala las siguientes extensiones (haz clic en Install):

• ESLint(Autor: Microsoft)

  • Revisa las reglas de código en tiempo real, recomendado oficialmente por React.
  • Después de instalar, marcará los errores en rojo en el código.

• Prettier - Code formatter(Autor: Prettier)

  • Formatea el código automáticamente, manteniendo un estilo uniforme.

• ES7+ React/Redux/React-Native snippets(Autor: dsznajder)

  • ¡Increíble para fragmentos de código! Escribe atajos para generar componentes rápidamente.
  • Fragmentos comunes:
    • rafce→ genera un componente de función flecha + export default
    • rfc→ genera un componente de función
    • useState→ genera rápidamente useState

• Path Intellisense(Autor: Christian Kohler)

  • Autocompletado de rutas de importación (muy útil al usar import).

• Bracket Pair Colorizer 2O coloreado de corchetes integrado (ya incluido en VS Code 1.60+)

  • Distingue por colores los corchetes, lo que facilita la lectura de JSX anidado.

• GitLens(Opcional, pero muy recomendado)

  • Mejora de Git, permite ver el historial de confirmaciones de código.

Recomendaciones específicas para React(Opcional, avanzado):

• Tailwind CSS IntelliSense(Si usas Tailwind)
• React Developer Tools(La extensión del navegador ya está instalada, no es necesaria aquí)

Una vez completada la instalación, reinicia VS Code (o presionaCtrl+Shift+P → Reload Window）。

Configurar VS Code para mejorar la experiencia de desarrollo de React

segúnCtrl+Shift+P（macOS: Cmd+Shift+P) para abrir la paleta de comandos, escribe "Preferences: Open Settings (JSON)" para abrirsettings.json。

En la raíz del proyecto, crea.vscode/settings.json(se recomienda configuración a nivel de proyecto), añade el siguiente contenido:

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认使用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // JSX/TSX 文件也应用 Prettier
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // 显示行号、缩进指南
  "editor.rulers": [80],
  "editor.guides.indentation": true
}

Se aplica al guardar. Ahora, cada vez que guardes el código, Prettier formateará automáticamente y ESLint corregirá los problemas comunes automáticamente.

Verificar: escribe a propósito un código incorrecto (como faltar un punto y coma) y guarda para ver si se corrige automáticamente.

Escribir código React de verdad: crear un componente desde cero

En el Explorador de la izquierda, haz clic derechosrccarpeta → New Folder → creacomponentscarpeta.

Haz clic derechocomponents→ New File → creaGreeting.jsx。

Usa un fragmento de código para generar rápidamente el componente:

• Escriberafce（react arrow function component export）
• Presiona la tecla Tab y se generará automáticamente la plantilla:

import React from 'react'

const Greeting = () => {
  return (
    <div>Greeting</div>
  )
}

export default Greeting

Modifícalo para convertirlo en un componente completo (demostrando estado y Props):

Ensrc/App.jsximpórtalo y úsalo en:

Guarda todos los archivos (Ctrl+S), cambia al navegador y la actualización automática mostrará el nuevo componente.

Puntos destacados de la experiencia：

• EscribeuseState, el autocompletado inteligente dará sugerencias.
• Rutas de importación./components/Greeting.jsx, Path Intellisense las completará automáticamente.
• Después de guardar, Prettier formateará automáticamente la sangría.
• Si hay errores, ESLint los marcará en rojo en el panel de problemas (en la parte inferior).

Terminal integrada y trucos de depuración

Terminal integrada: menú Terminal → New Terminal, oCtrl+`(la comilla invertida).

• Ejecuta directamentepnpm dev, la salida del servidor aparecerá aquí.

Depurar código React：

1. Instala la extensión del navegadorReact Developer Tools(si aún no la has instalado).
2. En VS Code, presiona F5 para iniciar la depuración (debes configurar launch.json primero, pero para empezar usa las DevTools del navegador).
3. En el navegador, F12 → pestaña Components para ver las Props y el state de tu componente Greeting.

Atajos de teclado comunes(imprescindibles):

• Ctrl + S: guardar
• Ctrl + /: comentar la línea
• Alt + ↑/↓: mover la línea
• Ctrl + D: seleccionar con múltiples cursores la misma palabra
• Ctrl + Shift + P: paleta de comandos (imprescindible)

Mini ejercicio: construir un componente de tarjeta

1. Creacomponents/Card.jsx, usarafcepara generarlo.
2. Implementa un componente de tarjeta que reciba tres Props: title, content e imageUrl.
3. Úsalo dos veces en App.jsx para mostrar contenido diferente.
4. Añade algunos estilos en línea para embellecer.

¡Cuando termines, tu página tendrá varias tarjetas bonitas!

Paso 1: crear el componente Card.jsx

1. EnsrcEn la carpeta, clic derecho → Nueva carpeta → crearcomponentsla carpeta (si aún no existe).

2. Clic derechocomponentsen la carpeta → Nuevo archivo → crearCard.jsx。

3. EnCard.jsxintroducerafce(pulsa Tab para generar la plantilla automáticamente) y luego modifícalo al siguiente código:

Explicación：

• Usa Props desestructurados:{ title, content, imageUrl }。
• Embellecimiento con estilos en línea: esquinas redondeadas, sombras, imágenes adaptables, espaciado, etc., para que las tarjetas se vean modernas y profesionales.
• Renderizado condicional de la imagen: si no hayimageUrl, no se muestra la imagen (se implementa con&&).

Paso 2: Modificar App.jsx para usar el componente Card dos veces

Abresrc/App.jsx, reemplaza el contenido con el siguiente código (se conservó parte de la estructura original, se limpió el contador predeterminado y se centró en la exhibición de tarjetas):

Explicación：

• Importa elCardcomponente.
• Usa<Card />dos veces, pasando diferentes Props.
• El div exterior de App usa un diseño flex para que varias tarjetas se alineen horizontalmente (con ajuste de línea responsive).
• Las URL de las imágenes usan imágenes públicas oficiales (el ícono pequeño de React y el logotipo de Vite). No se necesitan recursos locales, se cargan directamente en línea.

Paso 3: Ejecutar y ver el resultado

1. Guarda todos los archivos (Ctrl+S).
2. Si el servidor de desarrollo no está en ejecución, ejecuta en la terminal de VS Code:

   npm run dev

3. Abre http://localhost:5173 en el navegador y verás dos (o más) tarjetas bonitas, centradas, con imágenes, títulos y contenido.

Vista previa del resultado (descripción textual)：

• Las tarjetas tienen sombra y esquinas redondeadas, con un estilo similar a Material Design.
• La imagen ocupa todo el ancho en la parte superior y la sección de texto tiene un espaciado cómodo.
• El fondo es gris claro, las tarjetas son blancas y la visualización es clara.