Configurar un editor

Un editor configurado apropiadamente puede hacer la lectura del código más clara y la escritura más rápida. ¡Incluso puede ayudarte a detectar errores mientras los escribes! Si esta es tu primera vez configurando un editor o estás buscando mejorar la configuración de tu editor actual, tenemos algunas recomendaciones.

Aprender√°s

  • Cu√°les son los editores m√°s populares
  • C√≥mo formatear tu c√≥digo autom√°ticamente

Your editor

VS Code es uno de los editores m√°s populares hoy en d√≠a. Tiene disponible un mercado digital de extensiones y se integra bien con servicios populares como GitHub. La mayor√≠a de las funcionalidades que se listan debajo se pueden a√Īadir a VS Code tambi√©n a trav√©s de extensiones, ¬°lo que lo hace muy configurable!

Otros editores de texto populares que se usan en la comunidad de React incluyen a:

  • WebStorm es un entorno de desarrollo integrado dise√Īado espec√≠ficamente para JavaScript.
  • Sublime Text permite trabajar con JSX y TypeScript, incluye resaltado de sintaxis y autocompletado de forma nativa.
  • Vim es un editor de texto altamente configurable hecho para crear y cambiar cualquier tipo de texto de forma muy eficiente. Se incluye como ¬ęvi¬Ľ en la mayor√≠a de los sistemas UNIX y con OS X de Apple.

Algunos editores vienen con estas funcionalidades integradas por defecto, pero otros puede que requieran a√Īadir una extensi√≥n. ¬°Chequea qu√© tipo de integraci√≥n proporciona tu editor de preferencia para tener seguridad!

Linting (análisis de código)

Las herramientas de análisis de código de tipo linters permiten encontrar problemas en tu código mientras lo escribes, ayudando a corregirlos de forma temprana. ESLint es un linter popular de código abierto para JavaScript.

Aseg√ļrate de haber habilitado todas las reglas de eslint-plugin-react-hooks para tu proyecto. Son esenciales para la detecci√≥n temprana de los errores m√°s severos. La configuraci√≥n recomendada eslint-config-react-app ya las incluye.

Formateo

¬°Lo √ļltimo que quieres al compartir tu c√≥digo con otro contribuidor es entrar en un debate sobre tabuladores vs. espacios! Afortunadamente, Prettier limpiar√° tu c√≥digo al reformatearlo para que se ajuste a unas reglas predefinidas y configurables. Ejecuta Prettier y todas tus tabuladores se convertir√°n en espacios-y tu nivel de sangrado, comillas, etc. tambi√©n se cambiar√°n para ajustarse a la configuraci√≥n. En la configuraci√≥n ideal, Prettier se ejecutar√° cuando guardas tu archivo, realizando estas ediciones r√°pidamente por ti.

Puedes instalar la extensión de Prettier en VSCode siguiendo estos pasos:

  1. Ejecuta VS Code
  2. Utiliza Quick Open (presiona Ctrl/Cmd+P)
  3. Pega ext install esbenp.prettier-vscode
  4. Presiona Enter

Formateo al guardar

Idealmente, deberías formatear tu código cada vez que guardas. ¡VS Code tiene configuraciones para hacerlo!

  1. En VS Code, presiona CTRL/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 preset de ESLint tiene reglas de formateo, podrían entrar en conflicto con Prettier. Recomendamos deshabilitar todas las reglas de formateo en tu preset de ESLint usando eslint-config-prettier de forma tal de que ESLint se use solo para detectar errores de lógica. Si quieres obligar a que todos los archivos se formateen antes de que se mezcle un pull request, utiliza prettier --check en tu sistema de integración continua.