Configuración Inicial para Proyectos con React, Vite y TypeScript: Tips y Herramientas

Índice de contenidos

1. Introducción
2. ¿Por qué Vite?
3. Versión de node
4. Iniciar proyecto con Vite
5. Configuración de TypeScript
6. Configuración ESLint
7. Configuración de Prettier
8. Configuración de EditorConfig
9. Configuración de Husky
10. Reset CSS
11. Gitignore
12. Configuración del IDE
13. Configuración para el testing
14. Conclusión
15. Glosario
16. Referencias bibliograficas

Introducción

En este artículo, exploraremos cómo configurar un proyecto con React, Vite y TypeScript. Te mostraré las herramientas que prefiero y cómo las configuro al iniciar un proyecto. La combinación de estas tecnologías ofrece una eficiencia y una escalabilidad excelentes para el desarrollo moderno de aplicaciones web.

¿Por qué Vite?

Vite es una alternativa moderna y rápida a Create React App. Proporciona una estructura básica que cubre las necesidades esenciales, dejando al desarrollador la libertad de añadir cualquier extra según lo requiera el proyecto. Esta flexibilidad resulta en una configuración más ligera y un desarrollo más ágil.

Versión de node

Para usar Vite, necesitas Node versión 18+ o 20+. Verifica tu versión actual con el comando node -v. Si tu versión no es compatible, te recomiendo actualizarla utilizando nvm, que facilita la gestión de múltiples versiones de Node, permitiéndote cambiar fácilmente según las necesidades de diferentes proyectos.

Iniciar proyecto con Vite

Crea tu proyecto con npm create vite@latest. Aunque yo prefiero npm, herramientas como yarn o pnpm también son opciones válidas. Después de instalar Vite, si el sistema te lo pide, instálalo. A continuación, selecciona React y TypeScript, que configuran el esqueleto de tu aplicación.

Si no tienes vite te pedirá que lo instales:

1. Instalación de Vite: Muestra la terminal durante la instalación de Vite.

   

2. Nombramiento del proyecto: Ilustra la interfaz de línea de comandos donde se asigna el nombre al proyecto.

   

3. Vite tiene soporte para muchos frameworks, en nuestro caos seleccionamos React:

   

Y luego TypeScript 💙 para el proyecto:

Y con esto Vite nos ha creado el esqueleto de nuestra aplicación.

Finaliza con npm i y npm run dev para iniciar tu servidor de desarrollo y ver tu nueva aplicación React con Vite en acción.

Configuración de TypeScript

Vite facilita la integración de TypeScript en nuestro proyecto añadiendo automáticamente la configuración necesaria, lo que simplifica notablemente el proceso de configuración.

Configuración de ESLint

ESLint es esencial para identificar y corregir errores de sintaxis y malas prácticas en el código. Vite incluye ESLint por defecto con una configuración básica en el fichero .eslintrc.cjs, la cual es totalmente personalizable para adaptarse a las necesidades específicas de tu proyecto. Te animo a explorar más sobre las capacidades de ESLint para optimizar tu código.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

Configuración de Prettier

Prettier es un formateador de código que garantiza consistencia en el estilo del código entre colaboradores de un proyecto. Comienza instalando Prettier con el siguiente comando:

npm install --save-dev --save-exact prettier

Configura Prettier mediante el archivo .prettierrc.json. Aquí tienes un ejemplo de configuración:

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false,
  "arrowParens": "avoid",
  "trailingComma": "all",
  "bracketSameLine": true,
  "jsxSingleQuote": true
}

Explora las opciones de configuración de Prettier aquí. Además, crea un .prettierignore para excluir archivos específicos:

.gitignore
dist
coverage

Para integrar Prettier con otros linters, consulta la documentación sobre integración con linters. Finalmente, asegúrate de configurar tu IDE para usar el archivo de Prettier. Si usas WebStorm, la configuración se encuentra en la siguiente interfaz:

Esta imagen muestra dónde y cómo configurar Prettier en WebStorm, lo que es útil para garantizar que el formateador funcione correctamente en tu entorno de desarrollo.

Configuración de EditorConfig

EditorConfig es una herramienta útil para mantener la consistencia de estilos de codificación entre diferentes entornos de desarrollo. Funciona en tiempo real, complementando a Prettier que actúa al guardar el archivo. Este es un ejemplo de una configuración común de EditorConfig:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Configuración de Husky

Husky facilita la gestión de Git Hooks. Para instalarlo y configurar un script pre-commit en Husky:

npm install --save-dev husky

Una vez instalado a mi me gusta ejecutar el siguiente comando el cual nos facilita la configuración creando un script pre-commit en el directorio ./husky y nos configura un script prepare en el package.json

npx husky init

Integrar Husky con otras herramientas como Lint-staged mejora el flujo de trabajo. Configuración en package.json para Lint-staged podría verse así:

"lint-staged": {
  "*.{js,ts,tsx}": "eslint --cache --fix",
  "*.{js,ts,tsx,css,scss,html,md}": "prettier --write"
}

Configuración de Lint-staged

Lint-staged nos permite ejecutar linters en los archivos que están en estado de stage en Git antes de realizar un commit. Esto ayuda a garantizar que el código sigue los estándares establecidos antes de ser enviado al repositorio.

Para instalarlo, ejecutamos el siguiente comando:

npm install --save-dev lint-staged

Ahora, debemos configurar qué linters queremos ejecutar y en qué archivos. Para ello, agregamos la siguiente configuración en el package.json:

"lint-staged": {
    "*.{js,ts,tsx}": "eslint --cache --fix",
    "*.{js,ts,tsx,css,scss,html,md}": "prettier --write"
  }

Con esto, cada vez que realicemos un commit, Lint-staged ejecutará ESLint en archivos JavaScript y TypeScript, y aplicará Prettier en archivos de código y estilos, asegurando una mejor calidad del código antes de ser enviado al repositorio.

Configuración Commitlint

Commitlint nos permite validar el formato de nuestros mensajes de commit, asegurando que sigan el estándar de Conventional Commits. Esto es útil para mantener un historial de cambios claro y estructurado.

Para instalar Commitlint, ejecutamos el siguiente comando:

npm install --save-dev @commitlint/{cli,config-conventional}

Después, creamos el archivo .commitlintrc.json y añadimos la siguiente configuración:

{
  "extends": ["@commitlint/config-conventional"]
}

Este archivo indica que vamos a seguir las reglas de los Conventional Commits. Algunos ejemplos de mensajes de commit válidos serían:

✅ Ejemplo de commit válido:

feat: añadir funcionalidad de autenticación con JWT
fix: corregir bug en la validación del formulario de login
docs: actualizar README con nueva configuración de ESLint

❌ Ejemplo de commit inválido:

arreglé el bug del login
actualizando cosas en el código

Con Commitlint, si el mensaje de commit no sigue el formato esperado, Git mostrará un error y pedirá corregirlo antes de continuar.

Creando git hooks

Ahora que tenemos configuradas nuestras herramientas, podemos integrarlas con Husky para automatizar su ejecución mediante Git Hooks. Esto nos permitirá validar los mensajes de commit y ejecutar linters antes de hacer un commit.

Para ello, creamos dos archivos dentro de la carpeta .husky:

1. commit-msg: Este hook verificará que los mensajes de commit cumplan con las reglas de Commitlint.

   npx --no -- commitlint --edit $1

2. pre-commit: Este hook ejecutará Lint-staged antes de confirmar los cambios en Git.

   npx --no-install lint-staged

Además, podemos configurar un hook adicional, como pre-push, para ejecutar los tests antes de subir el código al repositorio remoto. Sin embargo, la configuración de más hooks dependerá de la complejidad del proyecto y los requerimientos del equipo.

Reset CSS

Una práctica común en el desarrollo frontend es utilizar un reset de CSS para eliminar los estilos predeterminados de los navegadores y lograr una mayor consistencia en la apariencia de la aplicación en distintos entornos. Esto permite que el desarrollador tenga un mayor control sobre los estilos aplicados.

Existen muchas opciones disponibles, pero uno de los resets más utilizados es el de Eric Meyer, el cual puedes incluir en tu proyecto con el siguiente código:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Si prefieres un normalizador en lugar de un reset completo, puedes considerar el uso de Normalize.css o algún otro enfoque según las necesidades del proyecto.

Gitignore

El archivo .gitignore es esencial en cualquier proyecto, ya que permite excluir del control de versiones los archivos que no deben ser rastreados por Git. Vite ya añade un .gitignore por defecto con configuraciones recomendadas, incluyendo la exclusión de archivos de configuración de IDE y dependencias.

A continuación, se muestra un ejemplo de configuración básica:

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Si en el proyecto se incluyen pruebas automatizadas, es recomendable añadir la carpeta coverage para evitar que los reportes de cobertura de código sean versionados:

coverage

También puedes personalizar este archivo según los archivos generados por herramientas adicionales en tu flujo de trabajo.

Configuración del IDE

Si bien la elección del IDE es personal, una buena configuración ayuda a mejorar la productividad y mantener un código limpio. En mi caso, utilizo WebStorm y siempre configuro las siguientes acciones al guardar:

• Formateo automático del código.
• Optimización de imports para eliminar dependencias no utilizadas.
• Ejecución de ESLint para identificar errores de código.
• Ejecución de Prettier para aplicar estilos de formateo.

Si utilizas otro IDE como VS Code, IntelliJ IDEA, Sublime Text, etc., revisa su documentación para encontrar cómo habilitar estas opciones de automatización.

Configuración para el testing

Un paso importante en cualquier proyecto es configurar un entorno de pruebas adecuado. Herramientas como Jest, Vitest, Testing Library y Cypress pueden ser utilizadas según las necesidades del proyecto.

Si bien este artículo no cubre en detalle la configuración de estas herramientas, es fundamental incluir pruebas en tu código para asegurar su correcto funcionamiento y facilitar el mantenimiento. Te recomiendo investigar qué solución se adapta mejor a tu stack tecnológico.

Recuerda: ¡Escribir tests siempre es una buena práctica! 🧪✅

Conclusión

Esta es mi configuración inicial recomendada para un proyecto estándar. Aunque en este caso he utilizado React y Vite, la mayoría de los pasos descritos son aplicables a otros frameworks y entornos de desarrollo.

El objetivo de esta configuración es establecer un flujo de trabajo eficiente, asegurando una estructura de código limpia, coherente y fácil de mantener desde el inicio del proyecto.

Si quieres ver un ejemplo funcional con todos los ajustes mencionados, puedes acceder a la plantilla en el siguiente repositorio de GitHub:

🔗 Repositorio en GitHub: react-vite-setup

Espero que esta guía te haya sido útil y que puedas aplicar estos conocimientos en tus proyectos. ¡Gracias por tu tiempo y happy coding! 😊

15. Glosario

Vite

Un bundler moderno y rápido para proyectos frontend, diseñado para optimizar el tiempo de desarrollo y mejorar la velocidad de construcción.

Linting

Proceso automatizado que analiza el código fuente para detectar errores de sintaxis, estilo y buenas prácticas.

ESLint

Herramienta de análisis de código estático para JavaScript y TypeScript que ayuda a identificar y corregir problemas en el código.

Prettier

Formateador de código que aplica reglas predefinidas para mantener un estilo uniforme en el desarrollo de software.

Husky

Herramienta que permite gestionar Git Hooks, automatizando la ejecución de tareas como linting y tests antes de realizar commits.

Lint-staged

Utilidad que ejecuta linters solo en archivos que han sido añadidos al área de staging de Git, optimizando el rendimiento del proceso.

Commitlint

Herramienta que valida el formato de los mensajes de commit en Git para garantizar que sigan convenciones como Conventional Commits.

Git Hooks

Scripts que se ejecutan de manera automática en determinadas acciones de Git, como hacer un commit o un push, para automatizar tareas.

EditorConfig

Archivo de configuración que ayuda a mantener la coherencia en la codificación entre distintos editores y entornos de desarrollo.

Tree Shaking

Técnica de optimización que elimina código JavaScript no utilizado durante el proceso de construcción para reducir el tamaño del archivo final.

Hot Module Replacement (HMR)

Característica de algunos bundlers y frameworks que permite actualizar módulos de código en tiempo real sin necesidad de recargar la página.

Conventional Commits

Especificación para escribir mensajes de commit estructurados y descriptivos, facilitando la generación automática de changelogs y versiones.

Vitest

Framework de testing diseñado para proyectos que utilizan Vite, proporcionando una alternativa rápida y moderna a Jest.

Cypress

Herramienta para pruebas end-to-end que permite automatizar la interacción con aplicaciones web en un entorno realista.

Jest

Framework de pruebas en JavaScript utilizado para realizar testing unitario y de integración en aplicaciones frontend y backend.

Webpack

Empaquetador de módulos que permite optimizar, transformar y agrupar archivos en proyectos de JavaScript, aunque más lento que Vite.

Tree Shaking

Optimización que elimina el código no utilizado en JavaScript para reducir el tamaño del bundle final.

Lazy Loading

Técnica de optimización que retrasa la carga de recursos hasta que sean necesarios, mejorando el rendimiento de la aplicación.

SSR (Server-Side Rendering)

Proceso en el que las páginas web se generan en el servidor antes de ser enviadas al navegador, mejorando el rendimiento y el SEO.

16. Referencias Bibliográficas

1. Vite – Fast Frontend Tooling
   Vite Official Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://vitejs.dev/

2. React – Biblioteca JavaScript para interfaces de usuario
   React Official Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://react.dev/

3. TypeScript – JavaScript con tipado estático
   TypeScript Handbook. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://www.typescriptlang.org/docs/

4. ESLint – Identificador y corrector de errores en JavaScript
   ESLint Official Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://eslint.org/docs/latest/

5. Prettier – Formateador de código automático
   Prettier Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://prettier.io/docs/en/index.html

6. Husky – Git Hooks para automatización de tareas
   Husky Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://typicode.github.io/husky/

7. Lint-staged – Linting solo en archivos en stage de Git
   Lint-staged GitHub Repository. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://github.com/okonet/lint-staged

8. Commitlint – Validación de mensajes de commit
   Commitlint Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://commitlint.js.org/

9. EditorConfig – Manteniendo estilos de código consistentes
   EditorConfig Documentation. (s.f.). Recuperado el [fecha de consulta], de
   🔗 https://editorconfig.org/

10. Conventional Commits – Estándar para mensajes de commit
    Conventional Commits Specification v1.0.0. (s.f.). Recuperado el [fecha de consulta], de
    🔗 https://www.conventionalcommits.org/en/v1.0.0/

11. Testing en JavaScript con Vitest, Jest y Cypress

    • Vitest: 🔗 https://vitest.dev/
    • Jest: 🔗 https://jestjs.io/docs/getting-started
    • Cypress: 🔗 https://www.cypress.io/

12. WebStorm – Entorno de desarrollo para JavaScript y TypeScript
    JetBrains WebStorm Documentation. (s.f.). Recuperado el [fecha de consulta], de
    🔗 https://www.jetbrains.com/webstorm/documentation/

13. .gitignore – Documentación oficial de Git
    Git SCM Documentation. (s.f.). Recuperado el [fecha de consulta], de
    🔗 https://git-scm.com/docs/gitignore