Instalación NextJS + Typescript
Para comenzar será necesario instalar ambos paquetes, empezando por ESLint y Prettier con sus respectivos comandos.
npm install -D eslint prettier eslint-config-prettier
PNPM
pnpm add -D eslint prettier eslint-config-prettier
YARN
yarn add -D eslint prettier eslint-config-prettier
Esto nos instalará Prettier y ESLint, pero debemos crear el archivo de configuración del mismo, el cual será .prettierrc, el cual quedará de la siguiente manera.
{
"arrowParens": "avoid",
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
Además debemos crear el archivo .prettierignore para ignorar ciertos archivos.
build
coverage
dist
package-lock.json
dist
node_modules
node_modules/
Y lo mismo con .eslintignore.
dist
node_modules
node_modules/
Por ultimo debemos agregar los scripts a nuestro package.json.
"scripts": {
// [...]
"format": "prettier --write .",
"lint": "eslint --fix . --ext .js,.jsx,.ts,.tsx"
},
Configuración
Con esto hecho podemos empezar a configurar nuestro linter, empezando por configurar nuestras reglas con el siguiente comando.
npm init @eslint/config
pnpm create @eslint/config
yarn create @eslint/config
Nos dará a elegir todas las configuraciones, y al momento de elegir que reglas seguir las mas comunes son Standard y AirBnb.
Hecho esto debemos agregar Prettier a nuestro .eslintrc.json de la siguiente manera.
"extends": [
"standard-with-typescript",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"prettier"
],
Además, al trabajar con TypeScript, ESLint nos recomendará que creemos Interfaces en vez de tipos, para ello debemos cambiarlo en nuestras reglas.
"rules": {
"typescript-eslint/consistent-type-definitions": "off"
}
