Como integrar ESLint y Prettier a un projecto Next.Js con Typescript

#nextjs #eslint #prettier #typescript

La manera mas facil de integrar ESLint y Prettier a mi projecto Next.Js paso a paso. Importante, debemos tener instalados los complementos de ESLint, Prettier y EditorConfig en VSCODE.

1 - Abrimos nuestro settings.json y agregamos la siguiente linea

"eslint.validate": ["typescript", "typescriptreact"],
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

2 - Creamos nuestro projecto

yarn create next-app {{nombre}}

3 - Instalamos TypeScript

yarn add typescript @types/react @types/node -D

Ya instalado TS vamos a cambiarle la nomenclatura a nuestros archivos JS a TSX. Posterior a eso, corremos nuestro proyecto y mismo Next va a darse cuenta que hay archivos TS y va hacer todo el config.

Hecho esto, vamos a proceder a eliminar carpetas que no nos van a servir como Public, Styles (despues vamos a crear uno parecido) y Api. Ya hecho esto vamos a notar que se va a romper todo pero vamos a solucionar esto

4 - Instalamos ESLint y lo iniciamos. Ahi mismo nos va a crear un .eslintrc.json del cual posteriormente vamos a setear cuando ya instalemos Prettier. Tambien debemos crear un archivo .eslintignore para ignorar node_modules y otras carpetas.

yarn add eslint --dev
yarn eslint --init

5 - Lo iniciamos y vamos a darle el siguiente config. Finalizado esto, eliminamos el archivos package-lock.json

6 - Instalamos prettier y las configuraciones con nuestro linter (en este caso, ESLint) y creamos nuestro archivo prettier.config.js donde van a estar nuestras configuraciones.

yarn add prettier eslint-plugin-prettier eslint-config-prettier -D

7 - Creamos un ".editorconfig" y cambiamos el valor a true en trim_trailing_whitespace y insert_final_newline. Tambien ponemos el end_of_line en lf

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Ya instalado ESLint y Prettier toca configurarlo y arreglar errores que nos va a saltar por culpa de TypeScript

8 - Seteamos nuestros archivos de .eslintrc.json y prettier.config.js de la siguiente manera

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": { "version": "detect" }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "space-before-function-paren": "off",
    "react/prop-types": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off"
  }
}

prettier.config.js

module.exports = {
  semi: false,
  singleQuote: true,
  arrowParens: 'avoid',
  trailingComma: 'none',
  endOfLine: 'auto'
};

9- Arreglamos las cagadas que nos va a tirar ESLint

index.tsx

import React from 'react'
import Head from 'next/head'

const Home: React.FC = () => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1> hello world</h1>
      </main>
    </div>
  )
}

export default Home

_App.tsx

import React from 'react'
import { AppProps } from 'next/app'

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default MyApp

Proximamente se viene la segunda parte de Next-images para poder incrustar svg's como componente y que se muestren en el html como svg e integrar Styled-components con Next-js en Typescript !