ESLint, Prettier y JSConfig con Next.js

Paquetes de eslint y prettier

npm i prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-prettier eslint-config-next

Como primer paso crearemos una carpeta src donde meteremos el resto de carpetas: la de public, styles y pages.

Despues crearemos el archivo jscongig.json y escribiremos en él lo siguiente:

{
“compilerOptions”: {
“baseUrl”: “src”,
“paths”:{
"@pages": [
“pages/”
]
}
}
}

Esto servirá para que la carpeta/url base de neustro proyecto sea la carpeta pages que acabamos de crear.

Después crearemos el archivo .eslintrc.json y escribiremos node_modules para que ignore esta carpeta.

Borramos el contenido de .eslintrc.json, renombramos a .eslintrc.js y añadimos lo siguiente:

module.exports = {
root: true,
env: {
browser: true,
amd: true,
node: true,
es6: true,
},
extends: [
‘eslint:recommended’,
‘plugin:jsx-a11y/recommended’,
‘plugin:prettier/recommended’,
‘next’,
‘next/core-web-vitals’,
],
rules: {
‘semi’: [‘error’, ‘always’],
}
}

Creamos el archivo prettier.config.js y añadimos lo siguiente:

module.exports = {
semi: true,
singleQuote: true,
printWidth: 200,
tabWidth: 2,
useTabs: false,
trailingComma: ‘es5’,
bracketSpacing: true,
}

Por último instalamos prettier desde la línea de comandos y algunos plugins:

npm install prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-co
nfig-prettier eslint-config-next

No olviden que esto es solo un resumen de lo propuesto por el profesor, no se olviden de ver el vídeo detenidamente de principio a fin y seguir los pasos tal como los explica el bueno de Oscar 😃

Saludos y a seguir practicando!

info sobre esta configuración

https://nextjs.org/docs/advanced-features/module-path-aliases

ESLint, Prettier y JSConfig con Next.js

Apuntes

• Primeros crearemos una carpeta src y dentro de ella moveremos las carpetas pages public styles

• Crearemos los siguientes archivos de configuración para nuestro proyecto. Ojo estas configuraciones pueden cambiar ya depende de las reglas que se establezcan en el equipo de trabajo

  • En la raiz del proyecto creamos el archivo jsconfig.json con la siguiente configuración

  {
    "compilerOptions": { "baseUrl": "src", "paths": { "@pages": ["pages/"] } }
  }
  

  • Creamos el archivo .eslintignore

  node_modules
  

  • Creamos el archivo .eslintrc.js

  module.exports = {
    root: true,
    env: { browser: true, amd: true, es6: true },
    extends: ['eslint:recommended', 'puglin: jsx-a11y/recommended', 'plugin:prettier/recommended', 'next', 'next/core-web-vitals'],
    rules: {
      semi: ['error', 'always'],
    },
  };
  

  • Creamos el archivo prettier.config.js

  module.exports = {
    semi: true,
    singleQuote: true,
    printWidth: 200,
    tabWidth: 2,
    useTabs: false,
    trailingComma: "es5",
    bracketSpacing: true
  };
  

• Finalmente instalamos todas las dependencias al proyecto:

  npm install prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-prettier eslint-config-next

Para quienes quieren utilizar typescript

1. crean en la raiz del projecto tsconfig.json

2. luego instalan las siguientes dependencias npm install typescript @types/react @types/node --save-dev

3. corren npm run devy les deberia generar la configuracion en el tsconfig.json.

4. tambien utilizare en este caso la configuracion de prettier y eslint en JSON(Javascript Object notation), por cierto es valida en ambas opciones simplemente la extension del archivo varia

4.1 cambie de .eslintrc.js a .eslintrc:

{
    "root": true,
    "env": {
        "browser": true,
        "amd": true,
        "node": true,
        "es6": true,
    },
    "extends": [
        "eslint:recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:prettier/recommended",
        "next",
        "next/core-web-vitals"
    ],
    "rules": {
        "semi": ["error", "always"]
    }
} 

4.2 cambio de prettier.config.js a `.prettierrc

{
    "semi": true,
    "singleQuote": true,
    "printWidth": 200,
    "tabWidth": 2,
    "useTabs": false,
    "trailingComma": "es5",
    "bracketSpacing": true
}

Si se desea types adicionales se debe crear un nuevo archivo addiontal.d.ts
en la raiz del proyecto.
Fuentes:

• prettier: https://prettier.io/docs/en/configuration.html
• eslint: https://eslint.org/docs/latest/user-guide/configuring/
• next typescript: https://nextjs.org/docs/basic-features/typescript

Espero se desafien a hacerlo en typescript 😄

Cuando se mueve el directorio public dentro de src la imagen del logo de Vercel deja de mostrarse.

Leyendo la documentación, dice que no se debe mover el directorio public:
https://nextjs.org/docs/advanced-features/src-directory

Config files like next.config.js and tsconfig.json, as well as environment variables, should be inside the root directory, moving them to src won’t work. Same goes for the public directory’’’

Debemos crear la carpeta src en la raíz del proyecto y mover a ésta las carpetas public, styles y pages. De esta forma tendremos acceso más fácil a los recursos, usando el path alias que agregamos en el archivo jsconfig.json.
jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@pages": ["pages/"],
        }
    }
}

.eslintrc.js

module.exports = {
    root: true,
    env: {
        browser: true,
        amd: true,
        node: true,
        es6: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:jsx-a11y/recommended',
        'plugin:prettier/recommended',
        'next',
        'next/core-web-vitals',
    ],
    rules: {
        'semi': ['error', 'always'],
    },
}

prettier.config.js

module.exports = {
    semi: true,
    singleQuote: true,
    printWidth: 200,
    tabWidth: 2,
    useTabs: false,
    trailingComma: 'es5',
    bracketSpacing: true,
}

Recordar que estas configuraciones las puedes modificar más adelante dependiendo de tus preferencias.

Configuracion para “jsconfig.json”

{
    "compilersOptions":{
        "baseUrl": "src",
        "paths":{
            "@pages": [
                "pages/"
             ]
       }
 }

Configuracion “.eslintignore”

/node_modules

Configuracion “.eslintrc.js”

module.exports = {
  root: true,
  env: {
    browser: true,
    amd: true,
    node: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'next',
    'next/core-web-vitals',
  ],
  rules: {
    'semi': ['error', 'always'], 
  }
}

Configuracion para “prettier.config.js”

module.exports = {
    semi: true,
    singleQuote: true,
    printWidth: 200,
    tabWidth: 2,
    useTabs: false,
    trailingComma: 'es5',
    bracketSpacing: true,
}

Para usar esta configuracion debemos instalar los siguientes recursos

npm install prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-
prettier eslint-config-next 

Dejo el commit de la clase como referencia
https://github.com/NightDreams/platzistore/commit/c4a3de95c0fdc17ceb654e6c2a54104431dab09f

• Dejamos todas la sconfiguraciones en el root
• Guardamos todo el codigo fuente de la app en /src
• Set /src
  • Movemos el codigo fuento de la app - /pages /public y /styles
    Configuramos alias, eslint, prettier e instalamos las dependencias correespondientes.

// scrit para instalar dependencias de la clase 
npm i prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-prettier eslint-config-next

¿Dudas sobre que es Eslint y Prettier? ¡Recomendación!

 
Dejo un aporte que conseguí en la plataforma, es una lectura para estructurar mejor las ideas respecto a Eslint y Prettier.

 
¿Como usar ESlint y Prettier para mejorar código JS?

Por si a alguien le sucede, yo tuve un error en el jsconfig.json con vscode. En el que decía que había un problema con un archivo de TypeScript en una libreria de eslint en node modules.
Se soluciona simplemente reiniciando vscode

Para este curso se me instalo la ultima version de next hasta la fecha, 13.1.6… y el manejo de alias supongo que cambio a comparacion de la version del curso ya que me da error…
Los path se definen de esta manera en jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/pages/*": ["pages/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

y al importar debemos usar los alias de esta manera:

import styles from '@/styles/Home.module.css'

Documentacion Aqui

siempre me parecen innecesarias las configuraciones.

https://stackoverflow.com/questions/68675994/what-is-jsconfig-json bastante util para entender el por qué usa el jsconfig

yo con el profe Sacha Lifszyc aprendí a no poner los punto y coma lol

Si quieren evitar toda la configuración de eslint, hay una librería llamada Standard, se basa en eslint, pero ya trae todo configurado

npm install standard -D

En el package.json deben agregar esta linea:

"eslintConfig": {
    "extends": "./node_modules/standard/eslintrc.json"
  }

y listo, al guardar cambios en tu codigo, se aplicarán las mejores prácticas y estilos

Cada fin de curso les recomiento ejecutar el script de lint de la sig. forma:

npm run lint -- --fix

Esto ayudara a que se arreglen todos los errores de linting posibles.
(Cuando escribles un -- y enseguida escribes argumentos, los estas pasando al script de npm directamente)

npm install prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-prettier eslint-config-next

Yo sustituí el always por never

"semi":['error', 'never```

adicionalmente mi configuración que suelo usar de prettier por si a alguno le sirve

module.exports = {
semi: false,
singleQuote: true,
printWidth: 120,
useTabs: false,
tabWidth: 2,
jsxSingleQuote: false,
jsxBracketSameLine: true,
trailingComma: “es5”,
bracketSpacing: true,
arrowParens: “avoid”,
semicolons: true,
}

module.exports = {
semi: true,
singleQuote: true,
printWidth: 200,
tabWidth: 2,
useTabs: false,
trailingComma: ‘es5’,
bracketSpacing: true,
}

Aca podremos consultar documentacion sobre Eslint y Prettier
https://prettier.io/
https://eslint.org/

Esta es la configuración de Prettier que siempre uso en mis proyectos por si alguien la necesita:

module.exports = {
  printWidth: 90,
  tabWidth: 2,
  useTabs: true,
  semi: false,
  singleQuote: true,
  quoteProps: "as-needed",
  jsxSingleQuote: true,
  trailingComma: "es5",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "avoid",
  requirePragma: false,
  insertPragma: true,
  proseWrap: "preserve",
  htmlWhitespaceSensitivity: "css",
  endOfLine: "lf",
  embeddedLanguageFormatting: "auto"
}