Configuración del Editor

Un editor configurado correctamente puede hacer que el código sea más claro de leer y más rápido de escribir. ¡Incluso puede ayudarte a detectar errores mientras los escribes! Si es la primera vez que configuras un editor o estás buscando ajustar tu editor actual, tenemos algunas recomendaciones.

Tu editor

VS Codees uno de los editores más populares en uso actualmente. Tiene un gran mercado de extensiones y se integra bien con servicios populares como GitHub. La mayoría de las funciones enumeradas a continuación también se pueden agregar a VS Code como extensiones, ¡lo que lo hace altamente configurable!

Otros editores de texto populares utilizados en la comunidad de React incluyen:

• WebStormes un entorno de desarrollo integrado diseñado específicamente para JavaScript.
• Sublime Texttiene soporte para JSX y TypeScript,resaltado de sintaxisy autocompletado integrados.
• Vimes un editor de texto altamente configurable creado para hacer que la creación y modificación de cualquier tipo de texto sea muy eficiente. Se incluye como "vi" en la mayoría de los sistemas UNIX y en Apple OS X.

Funciones recomendadas del editor de texto

Algunos editores incluyen estas funciones integradas, pero otros pueden requerir agregar una extensión. ¡Verifica qué soporte proporciona tu editor elegido para asegurarte!

Linting

Los linters de código encuentran problemas en tu código mientras escribes, ayudándote a solucionarlos temprano.ESLintes un linter popular y de código abierto para JavaScript.

• Instala ESLint con la configuración recomendada para React(asegúrate de tener¡Node instalado!)
• Integra ESLint en VSCode con la extensión oficial

Asegúrate de haber habilitado todas las reglas deeslint-plugin-react-hookspara tu proyecto.Son esenciales y detectan los errores más graves temprano. El preset recomendadoeslint-config-react-appya las incluye.

Formateo

Lo último que quieres hacer al compartir tu código con otro colaborador es entrar en una discusión sobretabuladores vs espacios! Afortunadamente,Prettierlimpiará tu código reformateándolo para que cumpla con reglas preestablecidas y configurables. Ejecuta Prettier y todas tus tabulaciones se convertirán en espacios, y tu sangría, comillas, etc. también se cambiarán para ajustarse a la configuración. En la configuración ideal, Prettier se ejecutará cuando guardes tu archivo, haciendo estos cambios rápidamente por ti.

Puedes instalar laextensión de Prettier en VSCodesiguiendo estos pasos:

1. Inicia VS Code
2. Usa la Apertura Rápida (presiona Ctrl/Cmd+P)
3. Pegaext install esbenp.prettier-vscode
4. Presiona Enter

Formateo al guardar

Idealmente, deberías formatear tu código en cada guardado. ¡VS Code tiene configuraciones para esto!

1. En VS Code, presionaCTRL/CMD + SHIFT + P.
2. Escribe "settings"
3. Presiona Enter
4. En la barra de búsqueda, escribe "format on save"
5. ¡Asegúrate de que la opción "format on save" esté marcada!

Si tu configuración de ESLint tiene reglas de formato, pueden entrar en conflicto con Prettier. Recomendamos deshabilitar todas las reglas de formato en tu configuración de ESLint usandoeslint-config-prettierpara que ESLint se usesolopara detectar errores lógicos. Si quieres asegurar que los archivos estén formateados antes de fusionar una solicitud de extracción, usaprettier --checkpara tu integración continua.