Cómo configurar el linting de JavaScript en el código de Visual Studio

Obviamente, soy un gran fanático del uso de estándares de codificación cada vez que escribe código del lado del servidor (independientemente de que sea WordPress, PSR2 o cualquier otra cosa, siempre que esté usando algo, creo que es algo bueno).

Pero cuando se trata de escribir código del lado del cliente, es decir, JavaScript para esta publicación, no lo vemos tan discutido, aunque creo que es igualmente importante. Lo mismo ocurre con CSS, Sass o LESS, pero eso es contenido para otra publicación.

Para proyectos recientes, hemos estado usando la guía de estilo de JavaScript de Airbnb para nuestros proyectos. Soy un fanático y creo que ayuda escribir JavaScript limpio y legible (que parece haber sido escrito por la misma persona, el objetivo final de los estándares de codificación, ¿no?).

En esta publicación, explicaré el proceso de configuración en Visual Studio Code.

Linting de JavaScript en Visual Studio Code

Esta publicación asume que está familiarizado con la configuración del Administrador de paquetes de nodo en su máquina local.

Si no lo eres, entonces tengo una guía sobre cómo hacerlo en esta publicación. ¿El atajo? Es literalmente tan simple como esto (una vez que se instala Homebrew):

Una vez que lo haya configurado (ya sea usando dicha publicación o si ya está configurado), estará listo para seguir adelante con la instalación real de las herramientas necesarias para configurar el linting de JavaScript en Visual Studio Code.

1 Instalación de ESLint

Digamos, por ejemplo, que está ejecutando un proyecto desde un directorio llamado acme en su directorio de Proyectos en Dropbox. Si ese es el caso, navegue hasta el directorio de complementos para dicho proyecto. Es probable que se vea algo como esto:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Aquí, deberá instalar ESLint y los archivos de configuración de Airbnb. Por suerte, es muy fácil de hacer. Desde la terminal, simplemente ingrese el siguiente comando:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Supongo que ninguno de los paquetes anteriores ya está instalado. Si es así, como eslint, puede eliminar ese argumento en particular de la línea anterior.

Además, es importante comprender que el proyecto eslint-plugin-import es importante para agregar soporte para la importación y exportación de módulos de JavaScript.

2 La configuración de ESLint

Se necesita un paso más antes de obtener la configuración en Visual Studio Code. Es decir, se trata de crear un archivo de configuración de ESLint. Desde el directorio acme-plugin como se muestra arriba, ingrese el siguiente comando:

$ touch .eslintrc.js

Esto creará un archivo vacío (o archivo de puntos vacío, como algunos pueden referirse a él) y aquí es donde nuestra configuración hará referencia a la guía de estilo de Airbnb.

En el archivo, simplemente agregue las siguientes líneas de código de configuración:

module.exports = {
  "extends": "airbnb-base"
};

Ahora que tiene ESLint instalado, tiene una referencia a la guía de estilo de Airbnb y tiene una referencia para admitir sintaxis adicional, es hora de configurar Visual Studio Code.

3 Configuración del código de Visual Studio

En mi opinión, esta es la parte más fácil. Abra el panel de extensiones usando la forma que más le convenga (haciendo clic en el icono o usando el acceso directo) y luego ejecute una búsqueda de ESLint. Es posible que vea varios resultados, pero el que desea es el que se ve así:

Instálelo y luego vuelva a cargar el código de Visual Studio. Debe establecerse en su Configuración predeterminada, que puede confirmar abriendo la configuración y buscando este código:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

Si no está presente, puede agregarlo a la Configuración de usuario (no soy fanático de jugar con la configuración predeterminada en caso de que alguna vez necesite restablecer desde una base limpia).

Una vez que se define esto, está listo para comenzar, y debe tener su JavaScript alineado mientras trabaja en su proyecto.

¿Otros administradores de paquetes?

Arriba, he dado un ejemplo de cómo hacer esto a través de Node; sin embargo, también es posible lograrlo usando Yarn. Esto es algo sobre lo que planeo escribir en el futuro, pero dado que cubrí Node en una publicación anterior, parecía lógico y más fácil seguir esa publicación con este contenido como referencia.

Cuando llegue el momento de usar un administrador de paquetes diferente, Yarn específicamente, también lo cubriré.