Vite + ReactTS + ESLint Airbnb + Prettier

El presente blog vamos a configurar una aplicación en React con la ayuda de Vite. Configuraremos TypeScript, ESLint Airbnb, Prettier y entre otros mas que iré añadiendo.

Lineamientos a seguir

• Se usará yarn como gestor de paquetes de NodeJS.
• Los archivos de configuración serán en YAML, pero pueden optar por otras extensiones.

Creación de Proyecto en Vite + TypeScript

Vamos a empezar creando un proyecto desde cero con Vite utilizando TypeScript.

yarn create vite

Este comando nos permite crear un proyecto desde cero, para ello solo debemos responder las preguntas que nos saldrá en la consola.

✔ Project name: › vrtsept-template
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Ahora instalamos las dependencias con el comando yarn install.

Configurando ESLint

Por default Vite nos crea un archivo .eslintrc.cjs la cual configura los siguientes plugins:

• eslint
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh

Por el momento vamos a eliminar el archivo .eslintrc.cjs (corriendo el comando $ rm .eslintrc.cjs) y vamos a configurar ESLint desde cero para no estar acomplados a las futuras actualizaciones que pueda tener el template de Vite.

Ahora vamos a instalar la configuración de ESLint de Airbnb, la cual es una conocida y aceptada en el mundo de React (mayor informacion https://www.npmjs.com/package/eslint-config-airbnb), vamos a instalar el plugin llamado eslint-config-airbnb con sus depenncias.

npx install-peerdeps --dev eslint-config-airbnb

Este comando instalara los siguientes plugins por default, los cuales son configurado por el plugin de airbnb:

• eslint-config-airbnb
• eslint
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks

Como nosotros estamos utilizando TypeScript entonces debemos extender esta configuración para que funcione con TS sin problemas, para ello ya se cuenta con un plugin llamdo eslint-config-airbnb-typescript el cual vamos a instalar de la misma manera que el anterior.

npx install-peerdeps --dev eslint-config-airbnb-typescript

Este compando instalará lo siguiente:

• eslint-config-airbnb-typescript
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint
• eslint-plugin-import

Nota: Algunas dependencias fueron instalaras dos veces, no hay problema con esto ya que ambas mantienen la misma version.

Con esto ya podriamos crear nuestro archivo .eslintrc.yaml con la siguiente configuración.

root: true
env:
  browser: true
  es2020: true
extends:
  - airbnb
  - airbnb-typescript
  - airbnb/hooks
ignorePatterns:
  - dist
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ./tsconfig.json
plugins:
  - react
rules:
  no-console: warn
  react/react-in-jsx-scope: off
  '@typescript-eslint/no-unused-vars': warn

Esta sería la configuración inicial necesaria para poder trabajar con ESLint.

Configurando Prettier

Vamos a configurar Prettier para que nos ayude a automaticamente remover varios errores de ESLint que pueden aparecer por temas de formatos, a su vez vamos a configurar eslint para que muestre errores de prettier y no haya alguna inconsitencias entre las reglas de ESLint y el auto-formato de Prettier.

Vamos a instalar Prettier

yarn add -D prettier

Ahora vamos a crear un archivo .prettierrc.yaml donde vamos a configurar nuestras reglas de formato.

semi: true
tabWidth: 2
printWidth: 120
singleQuote: true
trailingComma: es5
endOfLine: auto

Ahora vamos a configurar ESLint para que las reglas de formato de Prettier esten alineados con las reglas de ESLint. Primero, instalamos dos dependecias.

yarn add -D eslint-plugin-prettier eslint-config-prettier

Una vez instalado simplemente debemos extender nuestra configuración con plugin:prettier/recommended.

... eslint configuration

extends:
  - ... other plugins
  - plugin:prettier/recommended

... eslint configuration

Ahora cuando tengamos un error de prettier este sera mostrando en el linter y algunos errores de formato que mostraba ESLint por default han sido desabilitados.