Setup inicial React + Vite + TypeScript + 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

Introducción

En este artículo vamos a ver como hacer el setup inicial en un proyecto de React con Vite y TypeScript. Además te voy a enseñar algunas de las herramientas que yo utilizo y configuro siempre al iniciar un proyecto.

¿Por qué Vite?

Vite nos proporciona una alternativa bastante más rápida y moderna que Create React App. Vite crea una estructura más básica con lo necesario e indispensable. En el caso de que necesites algo extra eres tu el responsable de añadirlo.

Versión de node

Lo primero que necesitamos es tener una versión de Node 18+ o 20+ para poder utilizar Vite. Puedes ver tu versión de Node con el siguiente comando:

node -v

Si no tienes una versión válida, actualiza la versión, yo te recomiendo nvm ya que facilita la gestión de versiones de node.

Iniciar proyecto con Vite

El siguiente paso es crear el proyecto mediante el siguiente comando:

npm create vite@latest

En este caso yo he utilizado npm pero puedes utilizar yarn, pnpm…

Si no tienes vite te pedirá que lo instales:

Le ponemos nombre al proyecto:

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

Y seleccionamos TypeScript 💙:

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

Ejecutamos lo siguiente:

npm i
npm run dev

Y ya tenemos un proyecto de react con vite funcionando 🎉.

Configuración de TypeScript

Al hacerlo de esta forma, Vite añade la configuración necesaria para utilizar TypeScript en nuestro proyecto, así que, eso que nos ahorramos.

Configuración ESLint

ESLint es una herramienta que nos facilita la detección de errores en nuestro código ya sean errores sintácticos, malas prácticas etc…

Algo bueno de Vite es que ya nos viene con ESLint instalado y con una configuración inicial que podemos ver en el fichero .eslintrc.cjs

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 },
    ],
  },
}

ESLint es bastante potente, te animo a que investigues sobre sus posibilidades y utilices las que más te interesen en tus proyectos.

Configuración de Prettier

Prettier es un formateador de código configurable que facilita la compresión del código y además nos permite tener tener la misma configuración de estilo del código entre los distintos participantes de un proyecto.

Lo primero que tenemos que hacer es instalar prettier:

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

Una vez instalado nos creamos el fichero .prettierrc.json donde especificaremos la configuración de Prettier que queremos, en mi caso, me gusta la siguiente:

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

Te animo a que consultes aquí que hace cada propiedad y busques las que más te encajan.

También podemos crearnos un fichero .prettierignore para añadir los ficheros en los cuales no queremos que se apliquen las reglas de Prettier. Yo suelo añadir estos:

.gitignore
dist
coverage

También para evitar conflictos entre los linters y prettier existen plugins que deshabilitan algunas propiedades para que puedan convivir en armonía, si te interesa saber más sobre este tema puedes consultar más información aquí.

También es importante indicarle al IDE el fichero de configuración de Prettier, si utilizas WebStorm es aquí:

Configuración de EditorConfig

EditorConfig es una herramienta que nos ayuda a unificar los estilos de codificación entre diferentes desarrolladores. ¿Pero y eso no lo hacía Prettier? Sí y no, la diferencia es que la configuración de EditorConfig se aplica en tiempo de escritura, mientras que con Prettier tienes que esperar a guardar. La combinación de ambos es bastante interesante.

Además no necesita de plugins ni nada, muchos IDEs tienen soporte nativo para esta herramienta.

Esta es las configuración que yo utilizo

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 es una herramienta que nos permite configurar y ejecutar Git Hooks de manera sencilla.

Lo primero que tenemos que hacer es instalarlo:

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

Pero el verdadero potencial de Husky ocurre cuando lo integramos con diferentes herramientas, yo te voy a enseñar las que a mi me gustan y las que recomiendo.

Configuración de Lint-staged

Lint-staged nos permite ejecutar linters en los ficheros que tenemos en estado de stage en git.

Para instalarlo, ejecutamos el siguiente comando:

npm install --save-dev lint-staged

Ahora, tenemos que configurar que linters queremos ejecutar y para que ficheros. Para eso, en el package.json añadimos lo siguiente:

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

Con esto tendríamos lint-staged configurado.

Configuración Commitlint

Commitlint es una herramienta que nos permite validar el formato de nuestros commits para que por ejemplo, siga los conventional commits.

Para instalarlo, ejecutamos el siguiente comando:

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

Y después tenemos que crearnos el fichero .commitlintrc.json y añadir lo siguiente:

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

Creando git hooks

Ahora que tenemos instaladas las herramientas nos podemos configurar nuestros git hooks, yo te voy a enseñar los que yo utilizo, pero una vez más te animo a que te informes y crees el que mejor se adapte a tu proyecto.

Nos creamos 2 ficheros bajo la carpeta .husky . El primero llamado commit-msg que va a afectar a nuestros mensajes de commit.

Aquí indicamos que queremos que se ejecute el commitlint:

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

Y el segundo llamado pre-commit el cual se va a ejecutar antes de hacer el commit, en este vamos a indicar que queremos que se ejecute el lint-staged:

npx --no-install lint-staged

Lo ideal sería tener mas git hooks, por ejemplo un pre-push que ejecute los tests antes de enviar tu código al repositorio remoto, pero como eso depende de la envergadura del proyecto y por no alargar el articulo, no voy a añadir todos los casos.

Reset CSS

Lo que también suelo añadir es un fichero reset.css el cual sirve para resetear los estilos css predeterminados de los navegadores y de esta manera lograr una mayor consistencia de estilos en lo diferentes navegadores y un mayor control por parte del desarrollador.

Existen muchos, yo suelo utilizar este:

/* 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;
}

Gitignore

En el fichero .gitignore debemos añadir todos los ficheros en los que no queremos que git haga seguimiento. Algo bueno de Vite es que ya nos añade algunos por defecto, como los ficheros de IDE:

# 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?

A este le podríamos añadir la carpeta coverage en el caso de tener tests.

Configuración del IDE

Yo utilizo WebStorm y siempre suelo configurar las siguientes acciones al guardar:

• Formateo
• Optimización de imports
• Ejecución de ESLint
• Ejecución de Prettier

Si utilizas otro IDE busca en la documentación como habilitar estas acciones al guardar.

Configuración para el testing

El siguiente paso que yo haría sería configurar el entorno para los tests (Jest, Vitest, Testing Library, Cypress…). Pero como eso ya depende del proyecto no lo voy a abordar, pero eso no quita que sea importante. Haz tests.

Conclusión

Bueno pues esta sería mi configuración general inicial para un proyecto estándar. Para este caso yo he utilizado React y Vite pero salvo la creación inicial el resto de pasos son replicables en otros frameworks.

Os dejo la plantilla en el siguiente repositorio de Github: https://github.com/conrderuben/react-vite-setup

Muchas gracias por tu atención y espero que te sea útil 😊.