Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
16H
51M
57S
Curso Pr谩ctico de Next.js

Curso Pr谩ctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

ESLint, Prettier y JSConfig con Next.js

4/22
Recursos

Aportes 22

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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:

{
鈥渃ompilerOptions鈥: {
鈥渂aseUrl鈥: 鈥渟rc鈥,
鈥減aths鈥:{
"@pages": [
鈥減ages/鈥
]
}
}
}

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: [
鈥榚slint:recommended鈥,
鈥榩lugin:jsx-a11y/recommended鈥,
鈥榩lugin:prettier/recommended鈥,
鈥榥ext鈥,
鈥榥ext/core-web-vitals鈥,
],
rules: {
鈥榮emi鈥: [鈥榚rror鈥, 鈥榓lways鈥橾,
}
}

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

module.exports = {
semi: true,
singleQuote: true,
printWidth: 200,
tabWidth: 2,
useTabs: false,
trailingComma: 鈥榚s5鈥,
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!

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:

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鈥檛 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 鈥渏sconfig.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 鈥減rettier.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: 鈥渆s5鈥,
bracketSpacing: true,
arrowParens: 鈥渁void鈥,
semicolons: true,
}

module.exports = {
semi: true,
singleQuote: true,
printWidth: 200,
tabWidth: 2,
useTabs: false,
trailingComma: 鈥榚s5鈥,
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"
}