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"

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

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

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 ✌😁 💚💚💚

[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