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 13

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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:

{
“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!

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.

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’’’

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

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

¿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?

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,
}

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

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"
}