Como integrar ESLint y Prettier a un projecto Next.Js con Typescript
Tags: nextjs, eslint, prettier, typescript
Published: 2021-04-26 15:52:06

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

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

2 -  Creamos nuestro projecto 

```jsx
yarn create next-app {{nombre}}
```

3 - Instalamos TypeScript

```jsx
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.**

```jsx
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**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v107dlyf8jtf0tpxls6.png)

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. 

```jsx
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** 

```jsx
# 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** 

```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**

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

9- Arreglamos las cagadas que nos va a tirar ESLint 

index.tsx

```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**

```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 ! 

## Fuente

[https://www.youtube.com/watch?v=1nVUfZg2dSA](https://www.youtube.com/watch?v=1nVUfZg2dSA)