No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuraci贸n de ESLint y Prettier

3/31
Recursos

Aportes 25

Preguntas 13

Ordenar por:

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

o inicia sesi贸n.

Comando NPM:

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

Configuraci贸n del archivo .eslintsrc.js

module.exports = {
  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", "alwals"],
  },
};

Configuraci贸n del archivo prettier.config.js

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

Script en package.json

"lint:fix": "eslint src/ --fix"

Conocazmos m谩s sobre ESLint y Prettier:

驴Que es ESLint?

ESLint es una utilidad de linting de JavaScript de c贸digo abierto creada originalmente por Nicholas C. Zakas en junio de 2013.

El linting de c贸digo es un tipo de an谩lisis est谩tico que se usa con frecuencia para encontrar patrones problem谩ticos o c贸digo que no se adhiere a ciertas pautas de estilo. Hay linters de c贸digo para la mayor铆a de los lenguajes de programaci贸n, y los compiladores a veces incorporan linting en el proceso de compilaci贸n.

JavaScript, al ser un lenguaje din谩mico y poco tipificado, es especialmente propenso a errores del desarrollador. Sin el beneficio de un proceso de compilaci贸n, el c贸digo JavaScript normalmente se ejecuta para encontrar errores de sintaxis u otros. Las herramientas de Linting como ESLint permiten a los desarrolladores descubrir problemas con su c贸digo JavaScript sin ejecutarlo.

La raz贸n principal por la que se cre贸 ESLint fue para permitir a los desarrolladores crear sus propias reglas de linting. ESLint est谩 dise帽ado para tener todas las reglas completamente conectables. Las reglas predeterminadas est谩n escritas como lo estar铆an las reglas de cualquier complemento. Todos pueden seguir el mismo patr贸n, tanto para las reglas como para las pruebas. Si bien ESLint se enviar谩 con algunas reglas integradas para que sea 煤til desde el principio, podr谩 cargar reglas din谩micamente en cualquier momento.

ESLint est谩 escrito usando Node.js para proporcionar un entorno de tiempo de ejecuci贸n r谩pido y una f谩cil instalaci贸n a trav茅s de npm

驴Que es Prettier?

En resumen y muy acotado, Prettier es un formateador autom谩tico de c贸digo. 驴Qu茅 quiere decir esto?

Escribir c贸digo es una acci贸n humana y como tal hay opiniones sobre como se debe escribir este c贸digo y no solamente desde el punto de vista algor铆tmico o t茅cnico, si no, incluso se crean discusiones sobre estilos de 鈥渆scritura鈥 (Famosa es la 鈥済uerra sagrada鈥 sobre si usar o no ; es JavaScript o tabs vs espacios).

Al trabajar en un proyecto de c贸digo que incluya a m谩s de una persona estas discusiones sobre como deber铆a escribirse o no el c贸digo (gu铆a de estilo) pueden mermar la productividad del equipo enfrasc谩ndose en nimiedades que pueden tornarse bastante molestas, por ejemplo, al revisar un pull-request. Las diferencias de estilo se mostrar谩n como cambios que en efecto no son parte del real desarrollo que se intenta lograr.

Prettier busca solucionar esto otorgando una serie de configuraciones y opiniones sobre esta gu铆a de estilo.

Prettier ofrece soporte para m煤ltiples lenguajes y frameworks.

Fuentes

ESlint

Prettier - Freecodecamp

Clase #3: Configuraci贸n de ESLint y Prettier 3/31 馃摋


驴Que es ESLint?

ESLint es una herramienta de c贸digo abierto enfocada en el proceso de 鈥渓intig鈥 para javascript (o m谩s correctamente para ECMAScript). ESLint es la herramienta predominante para la tarea de 鈥渓impiar鈥 c贸digo javascript tanto en el servidor (node. js) como en el navegador. Fuente: aqu铆

驴Que es Prettier?

Prettier ofrece soporte para m煤ltiples lenguajes y frameworks. Lo que ofrece Prettier es tomar tu c贸digo y 鈥渞e-formatearlo鈥 en base a las configuraciones definidas manteniendo as铆 un estilo consistente. Haci茅ndolo mucho m谩s legible y sin intervenci贸n nuestra ni preocupaci贸n de como lo escribes inicialmente. Fuente: aqu铆

Continuando con nuestro proyecto: 馃敤

  1. Vamos a crear la carpeta src; donde ir谩 todo el c贸digo fuente, para ello pasamos las carpetas styles y pages dentro de src. Ah铆 se configurar谩 toda la l贸gica de la app. Las dem谩s carpetas y archivos que est谩n al mismo nivel que src, son aquellas que no hay problema que sean subidos a la nube y est茅n p煤blicas, algunas ser谩n ignoradas seg煤n la configuraci贸n como la carpeta node_modules.
  2. Vamos a la consola para instalar las dependencias y herramientas de eslint y de prettier: npm install eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier
  3. Dado que no se coloc贸 el flag -d de depencies, no se hizo el registro en el package.json de forma correcta, as铆 que abrimos el archivo package.json y en la parte de 鈥渄ependencies鈥 cortamos las 3 l铆neas de eslint directamente y las agregamos a las dependencias de desarrollo (importante recordar que se debe agregar una coma en el 煤ltimo item para agregar m谩s l铆neas).
  4. Tambi茅n cambiamos de lugar a la l铆nea de prettier y la movemos junto a las l铆neas de eslint. As铆 quedan las dependencias de producci贸n y las dependencias de desarrollo:
"dependencies": {
	"next": "12.2.1",
	"react": "18.2.0",
	"react-dom": "18.2.0"
},
"devDependencies": {
	"eslint": "8.19.0",
	"eslint-config-next": "12.2.1",
	"eslint-config-prettier": "^8.5.0",
	"eslint-plugin-jsx-a11y": "^6.6.0",
	"eslint-plugin-prettier": "^4.2.1",
	"prettier": "^2.7.1"
}
  • Creamos un nuevo archivo: eslintrc.js y agregamos la siguiente configuraci贸n de eslint:
module.exports = {
//environments que vamos a usar
	env: {
		browser: true, //Variables globales del navegador.
		amd: true, //Define require()y define()como variables globales.
		node: true, //Variables globales de Node.js y alcance de Node.js.
		es6: true, //Habilita todas las caracter铆sticas de ECMAScript 6 excepto los m贸dulos
	},
//extender las configuraciones que hemos agregado como plugin
	extends: [
		"eslint:recommended",
		"plugin:jsx-a11y/recommended",
		"plugin:prettier/recommended",
		"next",
		"next/core-web-vitals",
	],
//agregar reglas
	rules: {
		semi: ["error", "always"],
	},
};
  • Para conocer m谩s sobre c/u de las configuraciones de eslint, en el enlace los describe: aqu铆
  • Si seleccionamos todo el c贸digo y al dar click derecho y escogemos Format Document with y le damos en la casilla a prettier autom谩ticamente la identaci贸n se adapta al formato est谩ndar que debe cumplir.
  • Dato: si se quiere editar caracteres que se repiten, se selecciona el primer car谩cter y luego se presiona Ctrl + d, para seguir seleccionando otra palabra que se repite se presionan una vez m谩s las teclas hasta cubrir todos los caracteres que queremos cambiar, sustituimos con lo que queremos modificar y todos los elementos seleccionados cambian, con la tecla Esc se sale de la selecci贸n.


En cuanto a la configuraci贸n de prettier, creamos el archivo prettier.config.js y se agrega el c贸digo:

module.exports={
	semi:true, //Imprima punto y coma al final de las declaraciones
	singleQuote: true, //Utiliza comillas simples en lugar de comillas dobles
	printWidth: 200, //Especifica la longitud de la l铆nea en la que se ajustar谩 la impresora
	tabWidth: 2, //Especifica el n煤mero de espacios por nivel de sangr铆a
	trailingComma: 'es5', //Imprima comas finales siempre que sea posible en estructuras sint谩cticas separadas por comas de varias l铆neas
	bracketSpacing: true, //Imprima espacios entre corchetes en literales de objetos
};

Si quieres conocer sobre las configuraciones de prettier en el enlace explica con detalles c/u: aqu铆

  • Luego vamos al archivo package.json y en la parte de 鈥渟cripts鈥 agregamos:
"lint:fix": "eslint src/ --fix"

Con fix podemos ejecutar autom谩ticamente la herramienta para arreglar cualquier cambio (autoreparar).


  • Para verificar que todo est谩 bien configurado y detectar errores en la consola ejecutamos npm run lint y nos arroja errores de typo o de ausencia de puntos y comas, etc.
  • Para que se puedan autoreparar ejecutamos: npm run lint:fix y verificamos si los errores que arrojaba anteriormente en la consola han sido modificados y reparados.
    • Para ello, se vuelve a ejecutar npm run lint y debe arrojar el mensaje que no hay errores (que todo ha sido reparado exitosamente): 鉁 No ESLint warnings or errors

Tambi茅n se puede hacer todo desde el archivo de .eslintrc.js
Ac谩 les dejo mi config, la estoy formando con algunas reglas de Goncy, si desean probarla no necesitan instalar nada mas con lo del video basta.

module.exports = {
  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', 'never'],
    'no-console': 'warn',
    'prettier/prettier': [
      'warn',
      {
        printWidth: 100,
        trailingComma: 'none',
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto'
      }
    ],
    'react/self-closing-comp': 'warn',
    'react/jsx-sort-props': [
      'warn',
      {
        callbacksLast: true,
        shorthandFirst: true,
        noSortAlphabetically: false,
        reservedFirst: true
      }
    ]
  }
}

Y si quieren que al guardar se corrijan los errores autom谩ticamente
Agregan esto al setting.json del vscode

    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint",
        "editor.formatOnSave": true
    },

Configuraci贸n de ESLint

Creamos un archivo .eslintrc.js en la ra铆z del proyecto, para crear nuestra configuraci贸n de ESLint, en el cual vamos a crear un modulo que exportaremos para el uso de la aplicaci贸n con nuestras configuraciones.

module.exports={
	env:{ //Con este objeto vamos a configurar nuestro ecosistema de desarrollo
		browser:true,
		amd: true,
		node: true,
		es6:true
	},
	extends:[ //Configuramos de donde podemos recibir configuraciones
		"eslint:recommended",
		"plugin:jsx-a11y/recommended",
		"plugin:prettier/recommended",
		"next",
		"next/core-web-vitals",
	],
	rules:{ //configuramos nuestras reglas
		semi:["error","always"] //indicamos que sea obligatorio el uso del ;
	}
}

Instalaci贸n de dependencias Eslint y Prettier

npm install eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier --save-dev

eslint-config-prettier: Algunas de las reglas de estilo que Prettier aplica pueden entrar en conflicto con las reglas que aplican algunos plugins de ESLint. Al usar eslint-config-prettier, puedes asegurarte de que tu c贸digo sea consistente y cumpla las reglas de estilo que hayas configurado con Prettier, sin que haya conflictos con las reglas de tu ESLint.
.
eslint-plugin-jsx-a11y: Este plugin te puede ayudar a detectar problemas de accesibilidad potenciales a tiempo, para que puedas corregirlos antes de que se despliegue tu c贸digo. Incluye un conjunto de reglas que marcan problemas potenciales en tu c贸digo JSX, como la falta de atributos alt en elementos img o el uso incorrecto del atributo scope en elementos th.
.
eslint-plugin-prettier: Al usar eslint-plugin-prettier , puedes asegurarte de que tu c贸digo siempre se formatee de acuerdo a tus reglas de estilo configuradas con Prettier sin tener que ejecutar Prettier de forma independiente. De esta manera, puedes integrar Prettier en tu flujo de trabajo de linting con ESLint de manera m谩s sencilla.
.
prettier : Prettier es un formateador de c贸digo que puede formatear autom谩ticamente tu c贸digo para que cumpla con un conjunto de reglas de estilo. Puedes usar Prettier para formatear autom谩ticamente tu c贸digo cada vez que guardes un archivo, o ejecutarlo manualmente desde la l铆nea de comandos para formatear tu c贸digo.

El comando lint:fix tambien puede ejecutar la revisi贸n y auto correcci贸n de errores de prettier extendiedo la herramienta de la siguiente forma:

"lint:fix": "eslint src/ --fix && prettier src/ --write"

Ayuda mucho para revisar el proyecto.

Las cosas han cambiado un poco y ahora una que otra dependencia hace conflicto en ella, si les pas贸 como a m铆 la soluci贸n m谩s corta y efectiva es instalar la mismas versiones del curso.
.
Lo 煤nico que tenemos que hacer es ir a nuestras devDependencies y cambiar la versi贸n.
.

  "devDependencies": {
    "eslint": "8.4.0",
    "eslint-config-next": "12.0.7",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "prettier": "2.5.1"
  }

Es importante que borremos el ^ para que no descargue versiones superiores, as铆 garantizamos que tenga la misma versi贸n siempre

Configuraci贸n de Prettier

Para configurar nuestro prettier vamos a realizar algo parecido, creamos un archivo llamado prettier.config.js en la ra铆z de nuestro proyecto y agregamos nuestras configuraciones:

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

Configuraci贸n de lint:fix en package.json

Esta configuraci贸n permitir谩 que eslint pueda reparar algunos errores que tengamos de sintaxis de forma autom谩tica, cabe aclarar que no es perfecto y que lo que no repare, lo tenemos que hacer manual.

"scripts": {
    "lint:fix":"eslint src/ --fix"
  },

Ahora si podremos correr: npm run lint para ver si tenemos errores y npm run lint:fix para repararlos.

Hola saludos muy bueno el curso,

Solo que el icono de Platzi no deja ver por completo el c贸digo en ciertos momentos.

favor tomar en cuenta para las pr贸ximas clases

[email protected] lint
next lint

.eslintrc.js:
Configuration for rule 鈥渟emi鈥 is invalid:
Value 鈥渁ways鈥 should be equal to one of the allowed values.
Value 鈥渁ways鈥 should be equal to one of the allowed values.
Value [鈥渁ways鈥漖 should match some schema in anyOf.

cuando lo cambie a .eslintsrc corrio bien

[email protected] lint
next lint

鉁 No ESLint warnings or errors

Me agrada y me es muy 煤til el tema de prettier y linter, esto es fundamental para llevar el orden de desarrollo del equipo.

Lo que no me acaba de encantar es crear la carpeta SRC, ya que un framework al final intenta o realiza un est谩ndar para desarrollo de aplicaciones, siendo as铆, las customizaciones como esta afectan a nivel de deuda t茅cnica por temas de documentaci贸n, a veces es algo m铆nimo, a veces no, pero sigamos.

Este curso apenas va empezando y ya va mejor explicado que el anterior, se han mejorado un mont贸n las explicaciones incluso

Al instalar la extensi贸n de Prettier de VS Code pueden hacer que el formateador por defecto del editor sea el propio prettier.
.
Luego de instalarlo vayan a 鈥渟ettings.json鈥 en su editor y coloquen adentro del objeto de configuraci贸n los siguientes atributos:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},

.
De esta manera est谩n setteando prettier como su formateador por defecto y tambi茅n luego de cada vez que guarden cambios se le aplicar谩 el formato de manera autom谩tica al archivo.
.
Espero que les sirva 鉁岎煒 馃挌馃挌馃挌

En el minuto 7:20 se escucha el aporte del bebloper al fondo :)
```js a mi funciono de la siguiente forma: module.exports = { env: { browser: true, es6: true, node: true, amd: true, }, extends: [ 'eslint:recommended', 'plugin:jsx-a11y/recommended', 'next/core-web-vitals', 'next', 'prettier', ], rules: { semi: ['error', 'always'], }, plugins: ['jsx-a11y', 'prettier'], }; ```

En caso de que exista incompatibilidad entre Prettier y eslint la forma de solventarla es configurando el archivo .eslintsrc.js de la siguiente manera:

//importa la configuraci贸n de prettier en una variable
const prettierConFig = require('./prettier.config');

module.exports = {
  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'],
    //indica las reglas prettier al eslint
    'prettier/prettier': ['error', prettierConFig],
  },
};

Basicamente, es necesario indicarle a eslint la configuraci贸n prettier que se esta utilizando, las lineas clave son:

//importa la configuraci贸n de prettier en una variable
const prettierConFig = require('./prettier.config');
... 
...
    //indica las reglas prettier al eslint
    'prettier/prettier': ['error', prettierConFig],

The code you provided is a configuration file for ESLint, which is a popular static code analysis tool used for maintaining code quality and enforcing coding standards in JavaScript and related technologies. Let鈥檚 break down the structure of this ESLint configuration:

module.exports = {
    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"]
    }
}
  1. module.exports: In Node.js, this is used to export an object from a module. In this case, it鈥檚 exporting an ESLint configuration object.

  2. env: This property defines the environments in which your JavaScript code will run. In this configuration:

    • browser: Set to true to indicate that the code is meant to run in a web browser.
    • amd: Set to true to indicate support for Asynchronous Module Definition (AMD) code.
    • node: Set to true to indicate that the code can run in a Node.js environment.
    • es6: Set to true to indicate support for ECMAScript 2015 (ES6) syntax.
  3. extends: This property specifies the ESLint configurations that your project should extend. It includes several predefined configurations:

    • "eslint:recommended": The recommended ESLint rules.
    • "plugin:jsx-a11y/recommended": Recommended rules for making your JSX code more accessible.
    • "plugin:prettier/recommended": A configuration that integrates Prettier with ESLint to ensure code formatting consistency.
    • "next": The Next.js specific ESLint configuration.
    • "next/core-web-vitals": Configuration for handling core web vitals in Next.js.
  4. rules: This property allows you to specify custom ESLint rules or override existing rules. In this case, it sets a custom rule for the use of semicolons. The rule is "semi": ["error", "always"], which enforces the use of semicolons and raises an error if they are missing.

This ESLint configuration is tailored for a project that uses Next.js, and it extends several recommended configurations while also including custom rule settings for semicolons. It helps enforce code quality and best practices in a Next.js application.

A mi no me funcion贸 el comando de fix, mi correcci贸n fue la siguiente "lint:fix" : "eslint 'src/**.*{js, jsx}' --fix" Esto ya que me dec铆a el error: "No files matching the pattern "src/" were found"

ESE ere ce, Oscar鈥

Adjunto documentacion oficial de la configuracion oficial de Next js con Eslint y prettier: Link

Seg煤n el github de Eslint 馃憟 No es recomendable pasar las configuraciones de prettier desde eslint ya que por defecto la extensi贸n lee lo que est茅 en .prettierrc

Note: While it is possible to pass options to Prettier via your ESLint configuration file, it is not recommended because editor extensions such as prettier-atom and prettier-vscode will read .prettierrc, but won鈥檛 read settings from ESLint, which can lead to an inconsistent experience.

Por mi parte resolv铆 avanzar sin estas config ya que me estaba colocando trabas en el curso.

Comparto mi configuracion favorita de prettier:

{
	"trailingComma": "es5",
	"useTabs": true,
	"tabWidth": 4,
	"semi": false,
	"singleQuote": true
}

Eslint

ESLint es una herramienta de an谩lisis est谩tico de c贸digo para JavaScript y otros lenguajes de programaci贸n. Se utiliza para detectar patrones comunes de c贸digo que pueden indicar errores o problemas de calidad del c贸digo. Adem谩s, ESLint tambi茅n puede ayudar a asegurarse de que se sigue un estilo de c贸digo consistente en un proyecto, lo que puede mejorar la legibilidad y la mantenibilidad del c贸digo. Puede utilizar ESLint como una herramienta en l铆nea de comandos o integrarla en su entorno de desarrollo para recibir sugerencias en tiempo real mientras escribe su c贸digo

Prettier

Prettier es una herramienta de formateo de c贸digo autom谩tico para varios lenguajes de programaci贸n. Su objetivo es ayudar a los desarrolladores a mantener un estilo de c贸digo consistente en un proyecto eliminando la necesidad de configurar manualmente reglas de formateo. En lugar de eso, Prettier utiliza un conjunto predefinido de reglas para determinar c贸mo se deben mostrar los elementos del c贸digo, como sangr铆as, espacios en blanco y longitudes de l铆nea, y luego formatea el c贸digo de acuerdo a esas reglas. Puede utilizar Prettier como una herramienta en l铆nea de comandos o integrarla en su entorno de desarrollo para obtener un formateo autom谩tico del c贸digo mientras lo escribe

Si usas Windows, puede ser que te salga un error as铆:

Delete eslint

脡sto tiene que ver con algo hist贸rico realmente y en c贸mo Windows y Linux manejan los saltos de fin de l铆nea.

En Windows se llama CR(carriage-return character) y en Linux (o sistemas afines c贸mo MacOS) LF(linefeed character). Aunque versiones antiguas de Mac tambi茅n usaban CR.

Y 驴por qu茅 me sale el error si manejo Windows?, bueno el culpable es GIT debido a una propiedad de configuraci贸n llamada core.autocrlf.

Pero bueno, ya basta de historia y vamos a lo importante, c贸mo diablos los quitamos.

Hay varias maneras, una es cambiando la configuraci贸n de VSCode en cada archivo haciendo click en la opci贸n de final de l铆nea en esta parte:

Pero no es muy recomendable, porque es manual.

Otra opci贸n es cambiar la configuraci贸n de git con:

git config --global core.autocrlf false

Y la que uso siempre es meter 茅sta regla en el .eslintrc.js as铆:

rules: {
    semi: ["error", "always"],
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
  },