Casi siempre puedes apostar que una buena pieza de escritura ha sido el benefactor de una buena edición. En este sentido, el código no es diferente de la prosa. Uno de los beneficios que disfrutamos como desarrolladores y programadores son los editores, o linters de código, que pueden ser incorporados a nuestros flujos de trabajo.

Linting es el acto o proceso de revisar tu código en busca de errores de cualquier tipo. Hay muchas ideas sobre cómo optimizar la eficacia de un determinado trozo de código. Pero comprobar que está libre de errores y se adhiere a una guía de estilo particular es la línea de base. A veces esto es una cuestión de consistencia y legibilidad, a veces es una cuestión de hacer que el código realmente se ejecute en primer lugar.

Cuando se trata de la pelusa de JavaScript, hay un puñado de herramientas que se destacan. Veamos cuatro linters que pueden ayudarte a empezar o a perfeccionar tu proceso de linting: JSLint, standardJS, JSHint y ESLint.

JSLint

JSLint fue creado en 2002 por Douglas Crockford, que también escribió el que es posiblemente uno de los mejores libros sobre JavaScript. JSLint aporta simplicidad y velocidad. Pero también es altamente opinable, lo que puede ser una bendición o una maldición.

JSLint consiste en un sitio de una sola página que está dominado por un campo de texto donde puedes pegar tu código. Haga clic en el botón ‘JSLint’ y cualquier error, estilístico, sintáctico o de otro tipo, se mostrará bajo el campo de texto. Debajo del campo de texto hay una pequeña lista de opciones, configurables mediante casillas de verificación. Las opciones incluyen la tolerancia de los espacios en blanco adicionales, el uso de la palabra clave ‘this’ (que Crockford desaconseja en sus charlas) y la inclusión de Node.js.

Si no estás comprometido con ninguna guía de estilo en particular y quieres una fuente fiable que compruebe tu código por ti, JSLint es una gran opción. Es particularmente eficaz para probar fragmentos de código o si usted está buscando una manera de pelusa rápidamente pequeños proyectos – tal vez una sola página del sitio estático que sólo contiene un archivo de JavaScript.

standardJS

Basado únicamente en las estrellas de GitHub, standardJS es la opción más popular, llegando a casi 19.000 estrellas. Es completamente opinable, lo que significa que no es personalizable en absoluto. Pero, si no estás comprometido con ninguna guía de estilo en particular, esto puede ser una bendición. Viene en forma de Node CLI, y puede ser instalado globalmente o como una dependencia de desarrollo utilizando su terminal o línea de comandos de elección:

$ npm install standard --global// or$ npm install standard --save-dev

Debido a que standardJS tiene Node y npm como prerrequisitos, y debido a que se ejecuta desde la línea de comandos o por script npm, la barra se eleva ligeramente del nivel de JSLint. Pero como no es configurable, no tienes mucho más de qué preocuparte. Puede ejecutarlo desde la línea de comandos como un comando de una palabra y comprobará todos los archivos con una extensión .js en su directorio de trabajo actual.

Cualquier error que encuentre se imprimirá en su terminal o línea de comandos. Puede esperar ver una salida similar a este ejemplo de la documentación estándar de JS:

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

Si necesita especificar un archivo o directorio, puede incluir la ruta como argumento y utilizar comodines. También acepta comodines. En este ejemplo, standardJS buscará y corregirá cualquier archivo JavaScript en el directorio src y sus subdirectorios:

$ standard "src/**/*.js" --fix

La bandera --fix después de la ruta del archivo es la opción para corregir automáticamente los errores que se encuentren. Esto puede ser un gran ahorro de tiempo, pero también podría ser un gran ejercicio de aprendizaje para corregir los errores por ti mismo.

Si quieres explorar las convenciones y reglas que usa standardJS antes de decidir si lo usas, puedes encontrar una lista completa aquí. StandardJS es una gran opción para aquellos que buscan una forma rápida y fiable de empezar con un linter de JavaScript.

JSHint

JSHint comenzó como un fork de JSLint. El objetivo era hacer un linter más configurable. Si has estado usando standardJS, u otro linter de opinión, y estás buscando una manera de empezar a personalizar tus propias reglas de linting, JSHint podría ser para ti. Cuenta con la mayoría de los beneficios de los linters antes mencionados y algunos más.

Al igual que JSLint, la página de inicio de JSHint cuenta con un campo de texto donde se puede pegar el código. El campo Metrics a la derecha del campo de texto se actualizará en tiempo real a medida que escriba, contando una lista de estadísticas sobre su código, como un recuento de cuántas funciones contiene. Por supuesto, también muestra cualquier error de linting que encuentre.

Si no te gusta la metodología de copiar/pegar y quieres incorporarlo a tu proyecto, JSHint puede ser instalado globalmente o como una dependencia del proyecto usando npm:

$ npm install jshint --global// or$ npm install jshint --save-dev

Una vez instalado, usarás la CLI para lintar tu código. Aquí hay dos comandos de ejemplo que comprueban un solo archivo y un directorio, respectivamente:

$ jshint index.js// or$ jshint src/

En el primer ejemplo, JSHint limpiará el archivo index.js y en el segundo buscará recursivamente en el directorio ‘src/’ y limpiará cualquier archivo JavaScript que encuentre. JSHint imprimirá cualquier error que encuentre en tu terminal.

Si no te importa la personalización, JSHint puede ser usado como se describe en los ejemplos anteriores y funcionará bien. Pero, a partir de aquí la complejidad puede aumentar significativamente porque JSHint es completamente configurable y también expone una API, lo que significa que puede ser utilizado como un módulo de JavaScript en sus propios archivos de JavaScript.

Una configuración personalizada, que debería ser almacenada en un archivo llamado .jshintrc, podría tener este aspecto:

{"esversion": 5,"eqeqeq": true,"strict": true}

Este ejemplo, de arriba a abajo, establece la versión de ECMAScript en 5, requiere el uso de tres signos de igualdad ( === o !==) en lugar de dos (== o !=) cuando se comparan los valores, y refuerza el modo estricto. Puede incluir sus configuraciones personalizadas especificando la ruta a su archivo .jshintrc detrás de una bandera -- config en la línea de comandos o declarándolas como el atributo ‘jshintConfig’ en el archivo package.json de sus proyectos. JSHint utilizará sus opciones por defecto para cualquier regla que no personalices.

La opción de la línea de comandos podría ser así:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

Mientras que la opción package.json podría ser así:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

Puedes utilizar estos conceptos básicos para empezar a personalizar tus propias reglas de linting con JSHint. Si quieres saber más, la documentación oficial contiene una descripción exhaustiva de cómo utilizar la API de JSHint y todas las formas en que se puede personalizar para satisfacer tus necesidades.

ESLint

Dejando de lado las estrellas de GitHub, cuando se trata de la limpieza de JavaScript, ESLint es probablemente el linter que más se ve en la naturaleza y va a ser la opción para mucha gente. En su propia documentación se compara con JSLint y JSHint en cuanto a los métodos que utiliza para analizar JavaScript. Y, al igual que JSHint, usted puede utilizar los valores predeterminados y añadir personalizaciones a medida que sus preferencias o necesidades cambien.

Para empezar con ESLint, instálelo globalmente o como una dependencia de desarrollo:

$ npm install eslint --save-dev// or$ npm install eslint --global

Si instala ESLint globalmente, sus configuraciones se aplicarán a todos y cada uno de los archivos de proyecto contra los que lo ejecute. Pero si desea diferentes configuraciones para diferentes proyectos, puede instalarlo como una dependencia de desarrollo y crear un archivo de configuración diferente para cada proyecto. Tenga en cuenta que si ESLint se instala como una dependencia del proyecto, en lugar de globalmente, necesita ejecutar el ejecutable desde su carpeta node_modules así:

$ ./node_modules/.bin/eslint --init

Cuando ejecute el comando anterior, se le guiará a través de la configuración de ESLint mediante una serie de preguntas. (Nota: Independientemente de cuánto planee personalizar sus reglas de linting, debe comenzar con este paso porque ESLint necesita el archivo .eslintrc que será generado por este proceso antes de que pueda lintar su código.)

La primera pregunta que se le hace es cómo configurar ESLint. Tiene tres opciones: usar una guía de estilo popular, responder a preguntas sobre su estilo, o dejar que ESLint se configure a sí mismo por usted inspeccionando sus archivos para decidir cómo configurar las reglas. Si la perspectiva de configurarlo usted mismo de buenas a primeras le parece intimidante, puede recurrir a una guía de estilo popular desarrollada por una de las pocas organizaciones conocidas.

Independientemente del camino que tome, ESLint utilizará sus respuestas para generar un archivo llamado .eslintrc en el directorio de trabajo actual. Este es el archivo que modificará si quiere hacer cambios en las reglas de linting más adelante.

Aquí tiene un ejemplo de archivo .eslintrc en formato JSON que utiliza las reglas de la guía de estilo de JavaScript de Airbnb por defecto e incluye dos reglas personalizadas para desactivar el modo estricto y permitir las sentencias console.log():

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

Si elige responder a las preguntas sobre su estilo le preguntará cosas como qué versión de ECMAScript está utilizando, si prefiere tabuladores o espacios, punto y coma o no, y si utiliza JSX y/o React. La compatibilidad de ESLint con React y los plugins complementarios probablemente lo conviertan en la mejor opción para los desarrolladores de React. Al menos para aquellos que acaban de empezar con el linting.

Después de que ESLint está instalado y un archivo .eslintrc se ha generado, puede utilizar la CLI para empezar a linting su código. ESLint busca su archivo .eslintrc por defecto, por lo que no es necesario especificar ninguna configuración en la línea de comandos. Pero puede utilizar varias banderas para alterar el comportamiento de ESLint. En el ejemplo de abajo, la bandera -- quiet le dice a ESLint que sólo muestre los errores en lugar de las advertencias y los errores. La bandera --fix le dice que intente arreglar automáticamente cualquier error que encuentre.

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

Como con las otras CLIs que hemos discutido, puede usar comodines y rutas de archivos en lugar de nombres de archivos específicos si es necesario. Aunque ESLint es altamente configurable, facilita la curva de aprendizaje utilizando una guía de configuración accesible para su método de configuración por defecto. Si desea realmente profundizar en las personalizaciones, la documentación oficial contiene grandes explicaciones de todo lo que puede hacer con ESLint.