Configurando React & TS con ESlint / Prettier en 2021

Omar Jesus Hernandez Bastos — Tue, 31 Aug 2021 13:54:55 +0000

Imagina que has creado tu primer proyecto en React con Typescript🔥 o simplemente quieres pasar al siguiente nivel en tu path de ser un Frontend Master, pero tu código no tiene un estilo "pretty"🤢, no obedece ningún estándar y mucho menos te esta protegiendo de errores comunes, tranquilo, no pasa nada. A esto es lo que hoy le hare un pequeño hotfix.

Lo primero que debemos hacer es situarnos en la carpeta 📁 donde esta contenido el proyecto y en el terminal agregaremos los siguientes paquetes.

eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jest En caso de usar Jest

Podemos instalar todos directamente con

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jest

O Si eres mas chulo 😎, puedes usar yarn

yarn add eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jest

Para lograr que todo esto funciona debemos escribir los archivos de configuración respectivos, en este caso son dos, uno para eslint y uno para prettier.

ESlint es un linter de código, que no es mas que plugin que analiza nuestro código fuente, nos permite ver errores en la sintaxis, posibles bugs y estructuras sospechosas, es decir fortalece la integridad de nuestro código ✅

Prettier por otra parte es un plugin que formatea nuestro código para que se vea mas bonito y por ende mas legible, siguiendo las reglas que le hayas establecido.

Aja y Por que es tan importante que el código sea mas bonito y mas legible?

Pueees...👀 Mi querido Timmy, pasas la mayor cantidad de tu tiempo programando simplemente leyendo una linea tras otra, si esta todo ordenado podrás entenderlo mas fácilmente, y cuando no tocas un código por unos cuantos días ya retomar y entenderlo todo completamente es complicado, por eso debemos tener el código lo mas limpio y ordenado posible.

Dentro de la misma carpeta del proyecto creamos el archivo

module.exports = {
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
    jest: {
      version: 'latest',
    },
  },
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:jest/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'import/extensions': 'off',
    'import/no-extraneous-dependencies': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.ts'] }],
    'react/jsx-props-no-spreading': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
    'react/react-in-jsx-scope': 'off',
  },
};

Este nos configurara toda la compatibilidad con Typescript, incluyendo reglas exclusivas para react y sin tener conflictos con Prettier, ademas de esto utilizara las reglas mas populares en el mundo dev que en lo personal son las de Airbnb, para el prettier si es mas sencillo

//.prettierrc
{
  "singleQuote": true,
  "trailingComma": "all"
}

Una vez creado nuestros archivos de configuración debemos instalar en el Visual Code Studio, los siguientes paquetes 📦.

Adicional a esto seria bueno ir a System ⚙️ -> Preferences -> y typeamos formatOnSave, dejamos marcado ✅ la casilla de Format On Save en caso de que no lo estuviera.

Con esto tendrás configurado tu proyecto con Typescript, React, ESlint y prettier sin morir en el intento.

Recuerda cualquier cosa puedes escribirme estaré con gusto a tu disposición para ayudar

Twitter @omarbastos

DEV Community: Omar Jesus Hernandez Bastos

Configurando React & TS con ESlint / Prettier en 2021