DEV Community

Cover image for Configurando React & TS con  ESlint / Prettier en 2021
Omar Jesus Hernandez Bastos
Omar Jesus Hernandez Bastos

Posted on

Configurando React & TS con ESlint / Prettier en 2021

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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',
  },
};

Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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

Latest comments (0)