Cómo configurar ESLint en Atom para que pueda contribuir al código abierto

Si desea contribuir a proyectos de código abierto como freeCodeCamp, primero deberá configurar linting.

La mayoría de los proyectos tienen sus propios estándares de estilo para JavaScript, y estos se aplicarán automáticamente mediante herramientas de linting como ESLint .

Configuremos ESLint para que se ejecute en Atom, uno de los editores de código más populares.

Antes de comenzar, aquí hay un rápido aviso de que hago algunas suposiciones:

  • Ha seguido las pautas de contribución de Free Code Camp hasta la parte que dice Setup Linting.
  • Y entonces ha instalado los requisitos previos necesarios (particularmente Node.js y npm).
  • Tiene al menos un conocimiento básico del uso de la línea de comandos y git .
  • Estás usando Atom como editor de texto (aunque este artículo debería ser útil incluso si no lo estás; solo necesitarás consultar la documentación de tu editor de texto para obtener instrucciones sobre ESLint)

¿Qué es exactamente la pelusa?

" Linting es el proceso de ejecutar un programa que analizará el código en busca de errores potenciales". - Oded en Stack Overflow

Y ESLint es una herramienta de linting específica para el código JavaScript. Utiliza ESLint para encontrar código problemático ("errores") escrito en JavaScript.

Por cierto, el "ES" en el nombre de ESLint proviene de "ECMAScript", que es el nombre oficial del lenguaje JavaScript central.

Imagínese ESLint como su abuela diciéndole cómo vivir su vida. Ella señala sus errores y le dice que los corrija. Escuchas a la abuela, porque la abuela sabe.

Estos "errores" pueden ser objetivos , lo que significa que son causados ​​por un código que no se ajusta, digamos, a la sintaxis de JavaScript (o cualquier lenguaje de programación que esté usando). De esta manera, diría que el linter está detectando errores de sintaxis.

Digo "errores objetivos" porque estos errores son inherentes al propio JavaScript. Si omite un punto y coma al final de una declaración de variable, es objetivamente un error según los escritores de JavaScript, incluso si no detiene la ejecución de su programa (consulte la inserción automática de punto y coma).

O estos errores pueden ser subjetivos , lo que significa que usted (no el Comité Técnico 39, el cuerpo de estándares de ECMAScript) ha definido un conjunto de reglas que su código debe seguir. Estas reglas de codificación se resumen comúnmente en una guía de estilo de JavaScript , que es un documento que declara una especie de mejores prácticas de codificación. Free Code Camp, entre muchos otros proyectos de software, utiliza guías de estilo.

La guía de estilo de JavaScript de Airbnb es una de las más populares para los desarrolladores de JavaScript, y la guía de estilo de Free Code Camp se basa en ella.

El propósito de seguir una guía de estilo es tener un "estándar de escritura" que los desarrolladores de su proyecto sigan para mantener el código limpio, simple y consistente. Esto es similar al concepto del Libro de estilo APlos periodistas lo siguen. La única diferencia es que AP Stylebook es una guía de estilo para la gramática inglesa, mientras que la guía de estilo de Airbnb es para JavaScript.

Una vez que haya dejado en claro cómo se debe escribir el código para su proyecto de software (es decir, eligió una guía de estilo o creó una propia), estará listo para configurar sus reglas de linting para ESLint.

La forma en que ESLint funciona es que usted le dice qué reglas (es decir, toma las reglas de su guía de estilo y las convierte en reglas de linting ) que debe conocer y qué debe buscar, para que ESLint pueda tocarlo en el hombro y hacerle saber cuando escribe código problemático.

Para informar a ESLint sobre sus reglas de linting, configúrelas en un archivo de configuración llamado .eslintrcor eslintConfigo package.json, que ESLint buscará y leerá automáticamente. Y a medida que se desarrolla, ESLint le advertirá sobre el código de problemas que no obedece estas reglas para que pueda hacer revisiones mientras está codificando. Que es como tener un programa de pareja de abuelas contigo.

Donde ESLint brilla es en que está " diseñado para ser completamente configurable, lo que significa que puede desactivar todas las reglas y ejecutarlas solo con la validación de sintaxis básica, o mezclar y combinar las reglas incluidas y sus reglas personalizadas para que ESLint sea perfecto para su proyecto ". En otras palabras, puede mezclar y combinar reglas objetivas y subjetivas.

Tiene opciones cuando se trata de herramientas JavaScript linting, pero en este artículo nos enfocamos en ESLint porque Free Code Camp lo especifica en sus pautas de contribución. Y se usa ampliamente en otros lugares.

También tiene opciones cuando se trata de guías de estilo de JavaScript. Es bueno familiarizarse con Airbnb porque tiene más de 45,000 estrellas en GitHub en el momento de escribir este artículo, y su uso está creciendo.

Configurar Linting gratisCodeCamp

Hay dos formas de instalar ESLint: global y localmente. Nos centraremos en instalarlo localmente , lo que significa para su directorio de trabajo local, es decir, su repositorio clonado de Free Code Camp.

1: Abra su clon de Free Code Camp en su editor de texto (esto supone que efectivamente ha clonado Free Code Camp en su computadora)

2: En la Terminal, cd(cambiar de directorio) a su directorio de Free Code Camp

3: escriba npm install eslint --save-deven la terminal

4: En su editor de texto Atom, vaya a Preferencias > ;> Instalar > & g t; y escriba li nter-eslint en el cuadro de búsqueda de paquetes de búsqueda

Nota: También puede instalar paquetes Atom desde la línea de comando usando el apmcomando. Consulte estas instrucciones para ver un ejemplo.

5: Instale linter-eslint y linter .

6: En el directorio de Free Code Camp, cierre cualquier gt;.js files and and then re-open

And now the next time you write JavaScript you should see ESLint working!

Note: I’ve left out an important step: configuring ESLint, that is, the part where you customize ESLint and tell it about your linting rules. I did so because when you clone Free Code Camp’s repository, it already comes with ESLint configuration files, for example, see eslintrc and package.json. And so you don’t need to do any configuration of your own.

In the event you work on a project where you need to configure ESLint, I point you to the following links:

  • Configuring ESLint.
  • Get Started with ESLint v1.0
  • npm, eslint
  • Airbnb’s extensible shared ESLint config

To wrap up:

  1. Linting is the process of checking for problematic code.
  2. ESLint is one such tool that performs linting.
  3. ESLint can be a great learning tool because it forces you to write clean, consistent code and develop good coding habits.
  4. Many open source projects ask you to run ESLint.
  5. You should have ESLint set up in your text editor to contribute to Free Code Camp.
  6. If you’re not using Atom, check your text editor’s docs for how to install ESLint.
  7. Stay the course.

If you have questions, you can tweet me at @gilbertginsberg or find me at GilbertIndex.