ESLint + VS Code. Cómo formatear tu código con .eslintrc

En esta ocasión te quiero mostrar cómo formatear tu código con .eslintrc en Visual Studio Code. En mi caso, generalmente he usado Prettier, pero en el proyecto donde estoy trabajando actualmente se ha decido dejar de usarlo para usar solo ESLint. Así que te voy a mostrar cómo configurar VS Code con ESLint.

¿Qué es Eslint?

Antes de continuar, debemos saber qué es Eslint. Eslint es una herramienta de análisis de código enfocada en la calidad. Nos ayuda a detectar erorres y a formatear nuestro código. Por ejemplo, podemos configurar reglas para que agregue automáticamente los puntos y comas al final de las líneas que hayamos olvidado, que las líneas no tengan más de X longitud de cara a hacer el código más legible, elimina imports no usados si estamos usando TypeScript, nos avisa de variables creadas y no usadas. Cosas de este estilo.

Instala la extensión de ESLint

En primer lugar lo que debes hacer es instalar la extensión de ESLint, para ello iremos a la sección de extensiones de Visual Studio Code y buscaremos «ESLint». Entre todas las extensiones que se muestran debes seleccionar la primera que puedes ver en la siguiente imagen.

Cómo formatear tu código con .eslintrc VS Code + ESLint

Una vez que tenemos instalada la extensión, vamos a configurar Visual Studio Code para formatear el código. Para ello nos vamos al menú de Configuración, en Mac con «CMD + ,» y aquí vamos a cambiar la vista gráfica por la vista en JSON con el siguiente icono:

"eslint.format.enable": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Con esto ya tenemos configurado ESLint como formateador de código en Visual Studio Code.

Si antes usabas Prettier….

Si antes de ESLint usabas Prettier, deberías hacer una comprobación más. En esta misma ventana de configuración en formato JSON debes buscar

defaultFormatter

Y comentar todas aquellas líneas/propiedades donde se establezca Prettier como formateador por defecto. Puedes ver un ejemplo en el siguiente archivo de configuración:

{
    "eslint.format.enable": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "workbench.colorTheme": "Default Dark+",
    "security.workspace.trust.untrustedFiles": "open",
    "php.validate.executablePath": "/Applications/MAMP/bin/php/php7.4.21/bin",
    "redhat.telemetry.enabled": true,
    "workbench.iconTheme": "material-icon-theme",
    /*"[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },*/
    "window.zoomLevel": 1,
    "editor.fontSize": 14,
    /*"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }*/
}

Si no vas a usar Prettier de nuevo directamente las puedes eliminar, pero yo te aconsejo comentarlas por si tienes que cambiar entre ESLint y Prettier dependiendo del proyecto.

Y ahora sí, una vez realizado esto, cuando estes editando tu código y guardes cambios en tu archivo, se aplicarán de forma automática las reglas que tengas configuradas de ESLint en el archivo .eslintrc.json en Visual Studio Code.

Ya sabes cómo formatear tu código con .eslintrc. Puedes aprender más en nuestra sección de programación.

¡Espero que te haya sido de utilidad!