Configuración de ESLint y Prettier

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 “escritura” (Famosa es la “guerra 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 “lintig” para javascript (o más correctamente para ECMAScript). ESLint es la herramienta predominante para la tarea de “limpiar” 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 “re-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 “dependencies” 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 “scripts” 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 “semi” is invalid:
Value “aways” should be equal to one of the allowed values.
Value “aways” should be equal to one of the allowed values.
Value [“aways”] 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 “settings.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 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’s 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’s 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.

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’t 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",
      },
    ],
  },