Inplementación de ESLint y Prettier en React

Inplementación de ESLint y Prettier en React

writing by itsdavidev 2022/04/13

Instalación de ESLint para que funcione con Prettier React

requisitos

  • tener un proyecto de React creado

  • instalar la extensión de ESLint

  • instalar la extensión de prettier

Lo primero que tenemos que hacer es agregar el paquete de ESLint a nuestro proyecto de React.

yarn

yarn add eslint -D

npm

npm add -D eslint

pnpm

pnpm add -D eslint

para que empiece a funcionar podemos ejecutar el siguiente comando en la terminal:

npx eslint --init

opciones que selecionaremos son :

  • to check syntax, find problems, and enforce code style

  • JavaScript Modules (import/export)

  • React

  • No (depende si utilizas TypeScript o no)

  • browser

  • use a popular style guide

  • Standard: https://github.com/standard/standard

  • JavaScript

  • yes

  • yes

cuando se termine de instalar la configuracion de Eslint nos deberia de generar en un archivo .eslintrc.js

para contuinar debemos de crear un archivo llamado .prettierrc y selecionar las opciones que quremos que se utilizen para nuestro proyecto. Aqui las opciones

la que yo uso es :

{
  "useTabs": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid"
}

para contuinar lo que aremos sera crear dos archivos en la raiz de proyecto llamados .prettierignore y .eslintignore

dentro de .prettierignore escribiremos lo siguiente:

dist
pnpm-lock.json

y de .eslintignore escribiremos lo siguiente:

dist
pnpm-lock.json
.eslintrc.js
.prettierrc
.prettierignore
.eslintignore

por utimo en la parte de .eslintrc.js escribiremos lo siguiente:

en la parte de extends escribiremos lo siguiente:

"extends": [
  "plugin:react/recommended",
  "standard",
  "plugin:react/jsx-runtime",
  "eslint-config-prettier"
]