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 install -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

• 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"
	]
}