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 estilos. reglas 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 un JavaScript de código abierto herramienta de pelusa 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 el
- -arreglar etiqueta, identifica y corrige automáticamente cualquier problema reparable en el código, lo que le ahorra 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:
? ¿Cómo le gustaría usar EsLint?
Seleccione esta opción:
> Para verificar la sintaxis, encontrar problemas y hacer cumplir el estilo del código
Responda las siguientes preguntas según su proyecto hasta que encuentre el siguiente mensaje.
? ¿Cómo te gustaría definir un estilo para tu proyecto?
Luego responde de la siguiente manera.
> Usa una guía de estilo popular
Seleccione la guía de estilo de Airbnb para el siguiente aviso.
? ¿Qué guía de estilo quieres seguir?
> Airbnb:
Finalmente, instale las dependencias requeridas seleccionando "Sí" en el siguiente mensaje.
Una vez finalizada la instalación, debe tener una .eslintsrc.json archivo 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 .eslintsrc.json archivo de configuración.
Por ejemplo, para permitir un máximo de 80 caracteres por línea, puede agregar esta regla en la sección de reglas.
{
"extiende": [
"complemento: reaccionar/recomendado",
"airbnb"
],
"normas": {
"max-len": ["error", { "código": 80 }]
}
}Ejecutando ESLint en paquete.json
Agregar un guión en el paquete.json archivo para ejecutar ESLint.
"guiones": {
"hilas": "eslint"
}
Ejecute el script de pelusa para verificar si hay errores de pelusa ejecutando este comando.
npm ejecutar pelusa
También puede agregar un script para solucionar problemas en el código usando el --arreglar bandera.
"guiones": {
"hilas": "eslint",
"pelusa: corregir": "npm ejecutar pelusa -- --arreglar"
},
Correr npm ejecutar pelusa: arreglar en el 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.
- Vaya a la pestaña "Extensiones" en el lado izquierdo de la ventana de VS Code.
- Busca el Extensión ESLint e instalarlo.
- Una vez instalada la extensión, abra la configuración de VS Code (Archivo > Preferencias > Configuración o presionando Ctrl +,).
- En el editor de configuración, busque "acciones de código al guardar".
- Haga clic en "Editar en settings.json" y agregue la siguiente configuración al configuración.json archivo.
{
"editor.codeActionsOnSave": {
"fuente.fixAll.eslint": verdadero
},
"eslint.validar": ["javascript"],
"eslint.ejecutar": "alGuardar",
}
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 coherente. 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.
