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 5

Preguntas 5

Ordenar por:

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

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 鈥渆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

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 鉁岎煒 馃挌馃挌馃挌

[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