Cómo usar ESLint con la guía de estilo JavaScript de Airbnb

La guía de estilo de Airbnb es un conjunto de pautas para escribir código limpio y consistente. Fue lanzado en 2012 y desde entonces se ha convertido en una de las guías de estilo más populares para proyectos de JavaScript.

Proporciona un conjunto de pautas para escribir código consistente que es fácil de mantener mediante la aplicación de una variedad de reglas de estilo sobre sangrías, comentarios, longitud máxima de línea, convenciones de nomenclatura de variables, comillas y definiciones de funciones. Para configurar la guía de estilo de Airbnb en un proyecto de JavaScript, debe usar una herramienta de linting como ESLint.

Instalar ESLint

ESLint es una herramienta de linting de JavaScript de código abierto que ayuda a los desarrolladores a escribir código limpio al encontrar y solucionar problemas. Puede detectar problemas en su código, como errores de sintaxis, parámetros no válidos y variables no definidas. Cuando ejecuta ESLint con la etiqueta – -fix , identifica y corrige automáticamente cualquier problema reparable en el código, lo que le permite ahorrar tiempo.

Puede usar ESLint para aplicar guías de estilo como la guía de estilo de Airbnb.

Para comenzar, ejecute el siguiente comando en la terminal para instalar ESLint como una dependencia de desarrollo:

npm install --save-dev eslint eslint-config-airbnb


Luego inicialice ESLint.

npx eslint --init


Se le harán preguntas sobre su proyecto. Cuando se le solicite con:

? How would you like to use EsLint?


Seleccione esta opción:

> To check syntax, find problems and enforce code style


Responda las siguientes preguntas según su proyecto hasta que encuentre el siguiente mensaje.

? How would you like to define a style for your project?


Luego responde de la siguiente manera.

> Use a popular style guide


Seleccione la guía de estilo de Airbnb para el siguiente aviso.

? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>


Finalmente, instale las dependencias requeridas seleccionando «Sí» en el siguiente mensaje.

Una vez que finalice la instalación, debe tener un archivo .eslintsrc.json en la raíz de su carpeta.

Personalización de la guía de estilo de Airbnb

La guía de estilo de Airbnb permite la personalización. Puede agregar reglas adicionales o anular reglas existentes en el archivo de configuración .eslintsrc.json .

Por ejemplo, para permitir un máximo de 80 caracteres por línea, puede agregar esta regla en la sección de reglas.

{
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}


Ejecutando ESLint en paquete.json

Agregue un script en el archivo package.json para ejecutar ESLint.

"scripts": {
   "lint": "eslint"
}


Ejecute el script de pelusa para verificar si hay errores de pelusa ejecutando este comando.

npm run lint


También puede agregar un script para solucionar problemas en el código usando el indicador –fix .

"scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },


Ejecutar npm run lint:fix en la terminal solucionará automáticamente cualquier problema que el linter pueda solucionar.

Habilitar Linting al guardar en VS Code

Ejecutar una secuencia de comandos cada vez que desea eliminar el código puede volverse tedioso. Siga los pasos a continuación para habilitar el linting al guardar en VS Code.

1. Vaya a la pestaña «Extensiones» en el lado izquierdo de la ventana de VS Code.
2. Busque la extensión ESLint e instálela.
3. Una vez instalada la extensión, abra la configuración de VS Code (Archivo > Preferencias > Configuración o presionando Ctrl +,).
4. En el editor de configuración, busque «acciones de código al guardar».
5. Haga clic en «Editar en settings.json» y agregue la siguiente configuración al archivo settings.json .

{
 "editor.codeActionsOnSave": {


    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}


Esto permite que la extensión ESLint corrija automáticamente su código cuando lo guarda.

Beneficios de usar una guía de estilo

El principal beneficio de usar una guía de estilo como la guía de estilo de Airbnb es que te ayuda a mantener una base de código consistente. Esto es útil en un equipo, ya que los desarrolladores pueden comprender y contribuir fácilmente al código base. También lo ayuda a aplicar las mejores prácticas y evitar errores de codificación comunes.