TheLazy.Dev
Portfolio GitHub

Blog

nextjs |eslint |prettier |typescript

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

axelvaldez13

Axel Valdez

Posted on April 26, 2021

Como integrar ESLint y Prettier a un projecto Next.Js con 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
},
Enter fullscreen mode Exit fullscreen mode

2 - Creamos nuestro projecto

yarn create next-app {{nombre}}
Enter fullscreen mode Exit fullscreen mode

3 - Instalamos TypeScript

yarn add typescript @types/react @types/node -D
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

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

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

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

prettier.config.js

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

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

_App.tsx

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

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

export default MyApp
Enter fullscreen mode Exit fullscreen mode

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 !

Fuente

https://www.youtube.com/watch?v=1nVUfZg2dSA

💖 💪 🙅 🚩
axelvaldez13
Axel Valdez

Posted on April 26, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

April 26, 2021