Cuando empecé este blog y creé mi propia configuración de ESLint en 2025, todavía no había un plugin de ESLint para Tailwind CSS v4. En noviembre de 2026 estoy actualizando mis repositorios open source, y eslint-plugin-tailwindcss por fin está listo.

Es impresionante cuánto puede cambiar en un año el stack que usas, pero de eso escribiré en próximos artículos.

Activa el lint de Tailwind CSS

Instala el plugin (necesita Tailwind CSS v4):

pnpm add -D eslint-plugin-tailwindcss

Después activa la opción tailwind e indícale tu fichero CSS de entrada:

import eslintConfig from '@angelblanco/eslint-config';

export default eslintConfig(defaultOptions => ({
  ...defaultOptions,
  tailwind: {
    cssConfigPath: 'app/assets/css/main.css',
  },
}));

Viene desactivado por defecto. Si tu CSS está en src/style.css, basta con tailwind: true. El resto de ajustes del plugin van en el mismo objeto.

Actualiza a @antfu/eslint-config v10 y ESLint 10

La 3.0 también actualiza a @antfu/eslint-config v10 y ESLint 10. Instala la última versión de ambos paquetes:

pnpm add -D eslint@latest @angelblanco/eslint-config@latest

La primera vez que ejecutes eslint --fix verás que reformatea algunos arrays, objetos y ternarios multilínea.

github.com/angelblanco/eslint-config · Configuración de ESLint de Ángel Blanco, construida sobre @antfu/eslint-config para proyectos Vue + TypeScript.

El 24 de septiembre, PHP 8.5.11 corrigió más de diez CVE en OpenSSL, FPM, SOAP, Phar y el wrapper de streams HTTP, entre ellos un desbordamiento de buffer en el heap y un fallo que se saltaba la verificación del hostname en TLS. El 21 de octubre, PHP 8.5.12 fue más allá: una release de emergencia para dos vulnerabilidades críticas (CVE-2026-109618 y CVE-2026-109619, CVSS 9.2) que permiten ejecutar código en remoto sin autenticación. Según el propio php.net, "actualizar es la única opción segura". Las ramas 8.4, 8.3 y 8.2 recibieron las mismas correcciones.

Aquí viene la trampa: Ubuntu 26.04 LTS (Resolute Raccoon) incluye PHP 8.5 en sus repositorios, pero congela la versión en el momento del lanzamiento y le aplica por encima los parches que considera importantes. Mientras escribo esto, apt te instala PHP 8.5.4 con parches, y php.net ya va por la 8.5.12. Para ser justos, el equipo de seguridad de Ubuntu responde bien a lo urgente: publicó los parches de los RCE de octubre el mismo día que php.net. Pero la tanda de septiembre tardó 25 días en llegar, y las correcciones de bugs normales de upstream rara vez llegan.

Si quieres la versión completa de upstream, lo más sencillo sigue siendo que el propio sistema operativo se encargue. Instala PHP con apt desde el repositorio de Ondřej Surý, los mismos paquetes que llevan más de una década dando vida a PHP en Debian y Ubuntu, y deja que sudo apt upgrade haga el resto.

Fechas de soporte de un vistazo

Cada rama de PHP tiene dos años de soporte activo y otros dos solo con correcciones de seguridad. Así está el panorama según la página oficial de versiones soportadas:

Si sigues en PHP 8.2, te quedan menos de dos meses. PHP 8.6 está previsto para el 19 de noviembre de 2026, pero hoy PHP 8.5 es la apuesta segura para acompañar a una distribución LTS. Siempre puedes probar la 8.6 en paralelo (lo vemos más abajo).

En cuanto al sistema operativo, Ubuntu 26.04 LTS salió en abril de 2026 y tiene mantenimiento de seguridad estándar hasta mayo de 2031, ampliable hasta 2036 con Ubuntu Pro. Así que esta instalación te va a durar una buena temporada.

Novedades de PHP 8.5

Si vienes de PHP 8.4 o anterior, hay motivos para actualizar más allá de la seguridad. El anuncio oficial tiene la lista completa, pero mis novedades favoritas son:

• El operador pipe, para encadenar callables de izquierda a derecha sin variables temporales.
• clone() con propiedades, que resuelve en una sola línea el patrón "with-er" de las clases readonly.
• El atributo #[\NoDiscard], que avisa cuando alguien ignora un valor de retorno que importa.
• Una extensión URI nativa, con parseo de URL compatible con RFC 3986 y WHATWG, sin más sorpresas con parse_url().
• array_first() y array_last(). Por fin.

Así queda el operador pipe convirtiendo un título en un slug:

$slug = $title
    |> trim(...)
    |> (fn (string $str): string => str_replace(' ', '-', $str))
    |> strtolower(...);

Qué ha cambiado: adiós PPA, hola packages.sury.org

Si ya has instalado PHP en Ubuntu alguna vez, seguramente usaste add-apt-repository ppa:ondrej/php. Eso ya no es lo recomendable: Ondřej Surý está trasladando sus paquetes de Ubuntu desde Launchpad a packages.sury.org, el servidor que ya alojaba los de Debian. Los paquetes de resolute para Ubuntu 26.04 se publican solo ahí.

Si todavía tienes el PPA configurado, puede que este verano apt update se quejara de que el repositorio había cambiado su valor 'Label', un error que hacía fallar apt-get update en scripts hasta aceptar el cambio. De momento el PPA sigue recibiendo actualizaciones para Ubuntu 22.04 y 24.04, pero se está fusionando con packages.sury.org. Y si tienes los dos configurados, apt sigue prefiriendo los paquetes del PPA, así que elimínalo antes de seguir los pasos de abajo:

sudo add-apt-repository --remove ppa:ondrej/php

El nuevo método también mejora la gestión de la clave de firma. En lugar de descargar un fichero .gpg a pelo, instalas el paquete oficial debsuryorg-archive-keyring.

La vía fácil

Como de costumbre, puedes instalarlo todo con un solo comando. El script añade el repositorio de Sury, instala PHP 8.5 con las extensiones más habituales, lo configura como php por defecto y, opcionalmente, instala Composer.

curl -fsSL https://angelblanco.dev/scripts/ubuntu-install-php-85.sh | bash

El script te pide confirmación en cada paso importante. Como siempre, lee el script antes de pasárselo a bash. Fiarse de URL aleatorias con sudo es una forma estupenda de aprender a gestionar incidentes.

Si no tienes curl instalado:

sudo apt update
sudo apt install curl

La guía paso a paso

Esto es lo que hace el script, por si prefieres ir paso a paso.

1. Instalar los requisitos previos

sudo apt update
sudo apt install -y ca-certificates curl unzip

PHP no necesita unzip, pero Composer lo usa para descomprimir paquetes mucho más rápido que con su alternativa en PHP.

2. Instalar la clave de firma de Sury

curl -fsSLo /tmp/debsuryorg-archive-keyring.deb https://packages.sury.org/debsuryorg-archive-keyring.deb \
  && sudo dpkg -i /tmp/debsuryorg-archive-keyring.deb \
  && rm /tmp/debsuryorg-archive-keyring.deb

Esto deja la clave en /usr/share/keyrings/debsuryorg-archive-keyring.gpg (y, de momento, una copia global en /etc/apt/trusted.gpg.d/). En Debian el repositorio también publica el paquete del keyring, así que las renovaciones llegan con apt upgrade. En las suites de Ubuntu todavía no está, así que si algún día se renueva la clave, vuelve a descargar e instalar el .deb.

3. Añadir el repositorio de Sury

Desde la 24.04, Ubuntu usa el formato deb822 (ficheros .sources) para sus propios repositorios, y el formato clásico .list de una línea ya está oficialmente obsoleto. El nombre en clave se lee de /etc/os-release, así que el mismo fragmento funciona también en Ubuntu 22.04 y 24.04, y en derivadas como Linux Mint.

sudo tee /etc/apt/sources.list.d/php.sources > /dev/null <<EOF
Types: deb
URIs: https://packages.sury.org/php/
Suites: $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")
Components: main
Architectures: $(dpkg --print-architecture)
Signed-By: /usr/share/keyrings/debsuryorg-archive-keyring.gpg
EOF

sudo apt update

4. Instalar PHP 8.5

sudo apt install -y php8.5-cli php8.5-mbstring php8.5-curl php8.5-zip php8.5-xml

Fíjate en que instalamos php8.5-cli y no el metapaquete php8.5 a secas. El metapaquete arrastra Apache y su módulo de PHP, que seguramente no quieres en tu máquina de desarrollo. Si necesitas un servidor web, añade php8.5-fpm y combínalo con Nginx o Caddy. ¿Base de datos? Añade php8.5-mysql, php8.5-pgsql o php8.5-sqlite3.

No hace falta fijar prioridades en apt: la 8.5.12 de Sury tiene una versión mayor que la 8.5.4 de Ubuntu, así que apt la elige automáticamente. Puedes comprobar de dónde viene cada paquete con:

apt policy php8.5-cli

5. Configurar PHP 8.5 por defecto

El comando php se gestiona con update-alternatives, así que puedes elegir qué versión responde a él:

sudo update-alternatives --set php /usr/bin/php8.5
php --version

6. Instalar Composer

El instalador oficial publica un checksum SHA-384, así que verifícalo antes de ejecutar nada:

EXPECTED_CHECKSUM="$(curl -fsSL https://composer.github.io/installer.sig)"
curl -fsSLo composer-setup.php https://getcomposer.org/installer
ACTUAL_CHECKSUM="$(php -r "echo hash_file('sha384', 'composer-setup.php');")"

if [ "$EXPECTED_CHECKSUM" = "$ACTUAL_CHECKSUM" ]; then
    php composer-setup.php --quiet
    sudo install -m 0755 composer.phar /usr/local/bin/composer
    rm composer.phar
    composer --version
else
    >&2 echo "ERROR: checksum del instalador de Composer no válido"
fi
rm composer-setup.php

Usar install en lugar de mv deja el binario a nombre de root, algo importante porque más adelante ejecutarás sudo composer self-update.

¿Y otras versiones de PHP?

Aquí es donde el repositorio de Sury brilla de verdad. Publica todas las ramas desde php5.6 hasta php8.5, además de las release candidates de PHP 8.6, y pueden convivir todas a la vez:

sudo apt install -y php8.4-cli php8.4-mbstring php8.4-curl php8.4-zip php8.4-xml
sudo update-alternatives --config php

update-alternatives --config php muestra un menú interactivo para cambiar el php por defecto. También puedes llamar directamente a una versión concreta con php8.4 o php8.5, algo muy práctico para pasar los tests de un proyecto antiguo sin tocar tu versión por defecto.

Si pruebas la 8.6 antes de la versión final del 19 de noviembre, revisa apt policy php8.6-cli: las builds anteriores a la RC4 no incluyen los parches de los RCE de octubre.

Ten en cuenta que cada versión que instalas es una más que tienes que mantener parcheada. Con Sury, al menos, apt upgrade las parchea todas de una vez.

El script

Este es el script completo. Incluye confirmaciones, usa un directorio temporal que se borra al terminar y lee tus respuestas desde la terminal, así que funciona cuando lo ejecutas con curl. Puedes cambiar la versión de PHP y las extensiones con las variables del principio.

Este script sale de mi repo de configuración de Neovim, donde guardo mis scripts de instalación. El editor necesita php y composer para que funcionen los language servers y formateadores de PHP, así que los actualizo con frecuencia. Si quieres la versión más reciente, pásate por allí.

#!/bin/bash
#
# Author: Ángel Blanco
# License: MIT
#
# This script is provided "as is", without warranty of any kind. Use at your own risk.
#
# Source: https://angelblanco.dev/blog/apt-install-php-85-on-ubuntu-26
#
# Usage:
#   curl -fsSL https://angelblanco.dev/scripts/ubuntu-install-php-85.sh | bash
#
# Install PHP (from packages.sury.org) and Composer on Ubuntu.
# Normally you will call it from your non-root user; elevated permissions
# will be granted with sudo.
#

set -euo pipefail

# You can configure these variables if needed
PHP_VERSION="8.5"
PHP_EXTENSIONS="cli mbstring curl zip xml"
KEYRING="/usr/share/keyrings/debsuryorg-archive-keyring.gpg"
SOURCE_FILE="/etc/apt/sources.list.d/php.sources"

# Basic confirmation module before executing the script.
confirm_action() {
    while true; do
        read -r -p "$1 (y/n): " choice < /dev/tty
        case "$choice" in
            [Yy]|[Yy][Ee][Ss]) return 0 ;;
            [Nn]|[Nn][Oo])     return 1 ;;
            *)                 echo "Invalid choice. Please enter 'y' or 'n'." ;;
        esac
    done
}

WORKDIR="$(mktemp -d)"
trap 'rm -rf "$WORKDIR"' EXIT

if ! confirm_action "Install PHP $PHP_VERSION from packages.sury.org?"; then
    echo "Skipping PHP installation. Exiting."
    exit 0
fi

# --- Prerequisites ---------------------------------------------------------
sudo apt update
sudo apt install -y ca-certificates curl unzip

# --- Sury signing key (official keyring package) ---------------------------
curl -fsSLo "$WORKDIR/debsuryorg-archive-keyring.deb" https://packages.sury.org/debsuryorg-archive-keyring.deb
sudo dpkg -i "$WORKDIR/debsuryorg-archive-keyring.deb"

# --- Sury repository --------------------------------------------------------
CODENAME="$(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")"

sudo tee "$SOURCE_FILE" > /dev/null <<EOF
Types: deb
URIs: https://packages.sury.org/php/
Suites: $CODENAME
Components: main
Architectures: $(dpkg --print-architecture)
Signed-By: $KEYRING
EOF

sudo apt update

# --- PHP --------------------------------------------------------------------
# Use -cli instead of the bare "phpX.Y" metapackage, which pulls in Apache.
PACKAGES=""
for EXTENSION in $PHP_EXTENSIONS; do
    PACKAGES="$PACKAGES php${PHP_VERSION}-${EXTENSION}"
done

# shellcheck disable=SC2086
sudo apt install -y $PACKAGES

sudo update-alternatives --set php "/usr/bin/php${PHP_VERSION}"

echo ""
php --version
echo ""

# --- Composer ---------------------------------------------------------------
if confirm_action "Install Composer?"; then
    cd "$WORKDIR"

    EXPECTED_CHECKSUM="$(curl -fsSL https://composer.github.io/installer.sig)"
    curl -fsSLo composer-setup.php https://getcomposer.org/installer
    ACTUAL_CHECKSUM="$(php -r "echo hash_file('sha384', 'composer-setup.php');")"

    if [ "$EXPECTED_CHECKSUM" != "$ACTUAL_CHECKSUM" ]; then
        >&2 echo "ERROR: Invalid Composer installer checksum"
        exit 1
    fi

    php composer-setup.php --quiet
    sudo install -m 0755 composer.phar /usr/local/bin/composer

    echo ""
    composer --version
fi

echo ""
echo "Installation process finished."
echo "Run 'sudo apt update && sudo apt upgrade' periodically to get PHP security releases."

Mantén todo al día

Una vez instalado, mantenerlo actualizado es cosa de un par de comandos:

# Sistema operativo y PHP
sudo apt update && sudo apt upgrade

# Composer
sudo composer self-update

Incluso con la 8.5.12, php.net recomienda desactivar el progreso de subida de sesiones hasta la próxima release, para cerrar del todo una vía de RCE poco probable (CVE-2026-115560). Si sirves PHP con FPM, es cosa de una línea:

echo 'session.upload_progress.enabled=0' | sudo tee /etc/php/8.5/fpm/conf.d/99-session-upload-progress.ini
sudo systemctl restart php8.5-fpm

Y no te olvides de las dependencias de tus proyectos: composer outdated y composer audit te dicen qué toca actualizar y qué paquetes tienen vulnerabilidades conocidas.

Dos tandas de parches de seguridad de PHP en menos de un mes, una de ellas de emergencia, recuerdan que no puedes saber qué parche será el importante. Lo que sí puedes hacer es que aplicarlos sea aburrido: un apt upgrade para PHP, un composer self-update para Composer y composer audit para tus proyectos. Déjalo configurado una vez y olvídate.

Mantener Node.js al día no es opcional: merece la pena dedicarle un rato, tanto en tu ordenador personal como en tu servidor. Lo más sencillo es que sea el propio sistema operativo quien gestione esas actualizaciones. Para eso, instalas Node.js con apt desde el repositorio de NodeSource y sudo apt upgrade se encarga del resto.

Ahora que Node.js 26 (Lithium) es LTS desde el 28 de octubre de 2026 y Ubuntu 26.04 LTS (Resolute Raccoon) lleva meses publicado, es buen momento para dejarlo bien instalado. La receta es la misma que en mi guía de Node.js 24 en Ubuntu 24.

Fechas de soporte de un vistazo

Las dos versiones tienen periodos de soporte largos, así que esta instalación te va a durar una buena temporada:

Node.js 26 pasa a mantenimiento el 20 de octubre de 2027 (lo tienes en el calendario oficial) y es la última versión del modelo de pares e impares: a partir de Node.js 27, el proyecto publica una sola versión mayor al año y todas pasan a ser LTS. Si sigues en Node.js 24, tranquilidad: tiene soporte hasta abril de 2028 (y Node.js 22, hasta abril de 2027).

Qué ha cambiado desde Node.js 24

Casi todos los pasos son iguales, pero hay un cambio importante: Corepack ya no viene incluido con Node.js. Se eliminó en Node.js 25, así que corepack enable no funciona en una instalación limpia de Node.js 26. La documentación de Node.js recomienda usar el paquete corepack de npm si todavía lo necesitas.

Yo he optado por lo más sencillo y ahora instalo pnpm con su propio instalador. Si usas Yarn, puedes instalar el paquete corepack de forma global (lo vemos más abajo).

La vía fácil

Igual que antes, puedes instalarlo todo con un solo comando. El script instala Node.js 26 desde NodeSource, configura un prefijo global de npm (para que no necesites sudo con los paquetes globales) y, opcionalmente, instala pnpm y Bun.

curl -fsSL https://angelblanco.dev/scripts/ubuntu-install-node-26.sh | bash

El script te pide confirmación en cada paso importante. Como siempre, échale un vistazo al script antes de pasárselo a bash. Ejecutar scripts aleatorios de internet es muy divertido hasta que deja de serlo.

Si no tienes curl instalado:

sudo apt update
sudo apt install curl

La guía paso a paso

Esto es lo que hace el script, por si prefieres ir paso a paso.

1. Actualizar dependencias y añadir el repositorio de NodeSource

Primero, instala las herramientas necesarias para descargar y verificar paquetes:

sudo apt update
sudo apt install -y ca-certificates curl gnupg

Después, añade el repositorio de NodeSource para Node.js 26:

curl -fsSL https://deb.nodesource.com/setup_26.x | sudo -E bash -

NodeSource usa una única suite nodistro para todas las distribuciones basadas en Debian, así que funciona en Ubuntu 26.04 sin esperar a un repositorio específico para su nombre en clave. El script de NodeSource también añade un pin de apt con prioridad 600, de modo que el paquete de NodeSource siempre gana al paquete nodejs del archivo de Ubuntu. Sin él, podrías acabar con un Node.js más antiguo de los repositorios de Ubuntu.

2. Instalar Node.js y npm

sudo apt-get install -y nodejs
node --version

Esto instala tanto el entorno de ejecución node como npm.

3. Configurar el prefijo global de npm

Para instalar paquetes globales sin sudo, configura un directorio dentro de tu carpeta personal:

mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'

Y añádelo a tu PATH en ~/.bashrc o ~/.zshrc:

export PATH=~/.npm-global/bin:$PATH

4. Instalar pnpm

Como Corepack ya no viene incluido, instala pnpm con su script oficial:

curl -fsSL https://get.pnpm.io/install.sh | sh -

El instalador añade pnpm al PATH en la configuración de tu shell, así que abre una terminal nueva (o haz source de tu fichero de configuración) antes de ejecutar pnpm --version. A partir de ahí, pnpm self-update lo mantiene actualizado.

5. Instalar Bun (opcional)

Si quieres probar Bun, usa su instalador oficial, que necesita unzip:

sudo apt install -y unzip
curl -fsSL https://bun.sh/install | bash

¿Y Yarn?

Si tus proyectos usan Yarn, puedes seguir usando Corepack. Solo tienes que instalarlo tú:

npm install -g corepack
corepack enable

Como hemos configurado un prefijo global de npm, funciona sin sudo. Eso sí, el paquete Corepack ahora se mantiene fuera del ciclo de versiones de Node.js, así que revisa su README si algo no se comporta como esperas en Node.js 26.

El script

Este es el script completo. Incluye confirmaciones, usa un directorio temporal que se borra al terminar y lee tus respuestas desde la terminal, así que funciona aunque lo ejecutes directamente desde curl.

Este script sale de mi repo de configuración de Neovim, donde guardo mis scripts de instalación. El editor necesita Node.js para varios language servers y plugins, así que los actualizo con frecuencia. Si quieres la versión más reciente, pásate por allí.

#!/bin/bash
#
# Author: Ángel Blanco
# License: MIT
#
# This script is provided "as is", without warranty of any kind. Use at your own risk.
#
# Source: https://angelblanco.dev/blog/apt-install-node-26-on-ubuntu-26
#
# Usage:
#   curl -fsSL https://angelblanco.dev/scripts/ubuntu-install-node-26.sh | bash
#
# This script installs Node.js and several package managers.
# Run it as your non-root user: it asks for elevated permissions
# with sudo when needed.
#

set -e

# Basic confirmation module before executing the script.
confirm_action() {
    read -p "$1 (y/n): " choice < /dev/tty
    case "$choice" in
        [Yy]|[Yy][Ee][Ss])
            return 0
            ;;
        [Nn]|[Nn][Oo])
            return 1
            ;;
        *)
            echo "Invalid choice. Please enter 'y' or 'n'."
            confirm_action "$1"
            ;;
    esac
}

# You can configure these variables if needed
NODE_VERSION=26
NPM_PREFIX="~/.npm-global"
DEPS="ca-certificates curl gnupg"

TMP_DIR=$(mktemp -d)
trap 'rm -rf "$TMP_DIR"' EXIT

echo "This script will install Node.js and optionally other package managers."
echo ""

if ! confirm_action "Install Node.js version $NODE_VERSION?"; then
    echo "Skipping Node.js installation. Exiting."
    exit 0
fi

echo "Installing the dependencies needed to install Node.js..."

sudo apt update
sudo apt install -y $DEPS

echo "Installing Node.js..."
curl -fsSL https://deb.nodesource.com/setup_$NODE_VERSION.x -o $TMP_DIR/nodesource_setup.sh
sudo -E bash $TMP_DIR/nodesource_setup.sh

sudo apt-get install -y nodejs

mkdir -p ~/.npm-global
npm config set prefix $NPM_PREFIX
echo "npm prefix set to $NPM_PREFIX"

echo "Node.js installation completed."
echo "Node version: "
node --version

echo ""

if confirm_action "Install pnpm?"; then
    echo "Installing pnpm..."
    curl -fsSL https://get.pnpm.io/install.sh | sh -
    echo "pnpm installation completed. Open a new terminal (or source your shell config) to use it."
fi

echo ""

if confirm_action "Install Bun?"; then
    echo "Installing Bun..."
    sudo apt install -y unzip
    curl -fsSL https://bun.sh/install | bash
    export BUN_INSTALL="$HOME/.bun"
    export PATH="$BUN_INSTALL/bin:$PATH"
    echo "Bun version: "
    bun --version
fi

echo ""
echo "Installation process finished."
echo ""
echo "Add the global npm bin directory to your PATH by adding this line to your .bashrc or .zshrc:"
echo 'export PATH=~/.npm-global/bin:$PATH'
echo ""
echo "Node.js now comes from apt, so keep it patched with:"
echo "sudo apt update && sudo apt upgrade"
echo ""

Mantén todo al día

Una vez instalado, mantenerlo al día es cuestión de un par de comandos:

# Sistema operativo y Node.js
sudo apt update && sudo apt upgrade

# Gestores de paquetes
pnpm self-update
bun upgrade
npm update -g

Y no te olvides de las dependencias de tus proyectos: pnpm outdated y pnpm audit te dicen qué toca actualizar.

Por eso mismo sigo sin usar NVM en el día a día, como ya conté en el post anterior. Es estupendo si de verdad necesitas varias versiones de Node.js a la vez, pero cada versión que instalas con NVM es una más que tienes que acordarte de parchear.

Con una inteligencia artificial que acelera cómo se descubren y explotan las vulnerabilidades, y con brechas de seguridad que no paran de surgir, mantenerse al día tiene que ser lo más sencillo posible. Porque ahora, más que nunca, no es opcional.

Por qué me encanta antfu/eslint-config

Descubrir @antfu/eslint-config cambió mi forma de configurar ESLint. El paso a "Flat Config" me parecía innecesario, hasta que Anthony Fu creó una configuración que hace que ESLint sea sencillo de montar y de extender.

En lugar de hacer malabares con docenas de plugins, configuraciones y dependencias, instalas un paquete y listo. Por defecto no necesita configuración: lo importas, lo exportas y respeta tu .gitignore. Analiza tu proyecto y activa las reglas adecuadas para Vue, TypeScript o JavaScript, con unos valores por defecto con criterio que puedes sobrescribir.

Además formatea el código, así que en la mayoría de proyectos no necesitas Prettier. Aparte de JavaScript y TypeScript, se encarga de JSON, Markdown y YAML, de modo que ESLint lo gestiona todo.

Para mi stack habitual (Vue y TypeScript), es el mejor punto de partida para configurar ESLint.

¿Por qué crear tu propio paquete de configuración de ESLint?

Extender la configuración de antfu con mis preferencias y plugins es sencillo, porque está pensada para componer la tuya propia. Estoy acostumbrado a acabar las líneas con punto y coma, indentar con 2 espacios y tener el <template> al principio de mis ficheros .vue.

Pero lo importante no son los gustos personales, sino la consistencia y la reutilización. Cuando publicas tu configuración de ESLint como paquete de npm, puedes:

• Añadir plugins de librerías concretas que no pueden entrar en el core de antfu.
• Usarla en todos tus repositorios, con las mismas reglas en todos.
• Versionar tus reglas de linting: actualizas el paquete, subes la versión en tus proyectos y todos tienen las reglas nuevas.
• Compartirla con tu equipo o hacerla pública.
• Mantenerla en un solo sitio en vez de actualizar las mismas reglas en 10 proyectos.

Mi configuración: @angelblanco/eslint-config

Mi configuración, @angelblanco/eslint-config, está disponible en npm y el código fuente está en GitHub:

github.com/angelblanco/eslint-config · Configuración de ESLint de Ángel Blanco, construida sobre @antfu/eslint-config para proyectos Vue + TypeScript.

Cómo crear la tuya

Crear tu propia configuración de ESLint es sencillo. En lugar de empezar de cero, puedes hacer un fork de la mía:

1. Haz fork de @angelblanco/eslint-config.
2. Regístrate en npm con tu usuario de GitHub.
3. Actualiza package.json con el nombre de tu paquete, por ejemplo @tunombre/eslint-config, y el resto de datos.
4. Instala las dependencias con pnpm install.
5. Personaliza las reglas en index.ts.
6. Genera el JavaScript con tsup ejecutando pnpm build.
7. Publícalo con npm publish --access public.
8. Instala @tunombre/eslint-config en el resto de tus repositorios e impórtalo en su configuración de ESLint.

El README de mi repositorio tiene las instrucciones de instalación actualizadas, ejemplos de uso y todas las reglas que he cambiado. Abre un issue si quieres que te eche una mano.

Hazla tuya

No hace falta reinventar la rueda. Parte de algo sólido como @antfu/eslint-config, ajústalo a tu gusto y publícalo. Todo el proceso lleva más o menos una hora, y acabas con una única configuración de linting versionada para todos tus proyectos.

Si trabajas con Vue y TypeScript, prueba la configuración de antfu o la mía. Si ninguna es exactamente lo que buscas, haz un fork y hazla tuya.

Veremos un script de una sola línea que lo automatiza todo, incluyendo la configuración de npm necesaria para instalar herramientas globales sin permisos de administrador y la activación de Yarn y pnpm usando Corepack.

Si quieres personalizar la instalación, también veremos cómo hacerlo paso a paso.

La vía fácil

Si tienes prisa, puedes instalarlo todo con un solo comando. He preparado un script que se encargará de instalar Node.js 24, configurar npm (para que no necesites sudo al instalar paquetes globales) y, opcionalmente, habilitar corepack (para Yarn y pnpm) e instalar Bun.

Abre la terminal y ejecuta:

curl -fsSL https://angelblanco.dev/scripts/ubuntu-install-node-24.sh | bash

El script te pedirá confirmación en cada paso importante, así que seguirás teniendo el control sobre lo que se instala. Por supuesto, puedes revisar el contenido completo del script en este post, o en la propia URL antes de ejecutarlo.

Si no tienes curl instalado:

sudo apt update
sudo apt install curl

La guía paso a paso

Para quienes prefieren un enfoque más manual, aquí tienes un desglose de lo que hace el script. Puedes seguir estos pasos para realizar la instalación por tu cuenta.

1. Actualizar dependencias y añadir el repositorio de NodeSource

Primero, tenemos que asegurarnos de que nuestro sistema tiene las herramientas necesarias para descargar e instalar Node.js.

sudo apt update
sudo apt install -y ca-certificates curl gnupg

A continuación, añadiremos el repositorio de NodeSource, que es una fuente de confianza para obtener versiones actualizadas de Node.js en Debian y Ubuntu.

curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -

2. Instalar Node.js y npm

Con el repositorio ya configurado, instalar Node.js es tan sencillo como ejecutar:

sudo apt-get install -y nodejs

Este comando instala tanto el entorno de ejecución node como el gestor de paquetes npm.

3. Configurar el prefijo global de npm

Por defecto, npm instala los paquetes globales en un directorio del sistema que requiere sudo. Esto puede provocar problemas de permisos más adelante. Para evitarlo, es una buena práctica configurar un directorio local para tus paquetes globales.

mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'

También necesitarás añadir este directorio a tu PATH. Abre tu fichero ~/.bashrc o ~/.zshrc y añade la siguiente línea:

export PATH=~/.npm-global/bin:$PATH

4. Habilitar Corepack (para Yarn y pnpm)

Corepack es una herramienta experimental incluida con Node.js que simplifica la gestión de diferentes gestores de paquetes. Con ella, no necesitas instalar Yarn o pnpm manualmente.

Para habilitarla, ejecuta:

sudo corepack enable

Ahora puedes usar yarn y pnpm en tus proyectos sin pasos de instalación adicionales.

5. Instalar Bun (opcional)

Bun es un toolkit de JavaScript todo en uno y muy rápido que está ganando mucha popularidad. Si quieres probarlo, puedes instalarlo con su script oficial, que necesita unzip:

sudo apt install -y unzip
curl -fsSL https://bun.sh/install | bash

El script

Este es el script completo que automatiza los pasos anteriores. Pide confirmación antes de cada paso y borra sus archivos temporales al terminar.

#!/bin/bash
#
# Author: Ángel Blanco
# License: MIT
#
# This script is provided "as is", without warranty of any kind. Use at your own risk.
#
# Source: https://angelblanco.dev/blog/install-node-24-on-ubuntu-24
#
# Usage:
#   curl -fsSL https://angelblanco.dev/scripts/ubuntu-install-node-24.sh | bash
#
# This script installs Node.js and several package managers.
# Run it as your non-root user: it asks for elevated permissions
# with sudo when needed.
#

set -e

# Basic confirmation module before executing the script.
confirm_action() {
    read -p "$1 (y/n): " choice < /dev/tty
    case "$choice" in
        [Yy]|[Yy][Ee][Ss])
            return 0
            ;;
        [Nn]|[Nn][Oo])
            return 1
            ;;
        *)
            echo "Invalid choice. Please enter 'y' or 'n'."
            confirm_action "$1"
            ;;
    esac
}

# You can configure these variables if needed
NODE_VERSION=24
NPM_PREFIX="~/.npm-global"
DEPS="ca-certificates curl gnupg"

TMP_DIR=$(mktemp -d)
trap 'rm -rf "$TMP_DIR"' EXIT

echo "This script will install Node.js and optionally other package managers."
echo ""

if ! confirm_action "Install Node.js version $NODE_VERSION?"; then
    echo "Skipping Node.js installation. Exiting."
    exit 0
fi

echo "Installing the dependencies needed to install Node.js..."

sudo apt update
sudo apt install -y $DEPS

echo "Installing Node.js..."
curl -fsSL https://deb.nodesource.com/setup_$NODE_VERSION.x -o $TMP_DIR/nodesource_setup.sh
sudo -E bash $TMP_DIR/nodesource_setup.sh

sudo apt-get install -y nodejs

mkdir -p ~/.npm-global
npm config set prefix $NPM_PREFIX
echo "npm prefix set to $NPM_PREFIX"

echo "Node.js installation completed."
echo "Node version: "
node --version

echo ""

if confirm_action "Enable Yarn and pnpm via corepack?"; then
    echo "Enabling corepack..."
    sudo corepack enable
    echo "Corepack enabled."
    echo "Yarn version: "
    yarn --version
    echo "PNPM version: "
    pnpm --version
fi

echo ""

if confirm_action "Install Bun?"; then
    echo "Installing Bun..."
    sudo apt install -y unzip
    curl -fsSL https://bun.sh/install | bash
    export BUN_INSTALL="$HOME/.bun"
    export PATH="$BUN_INSTALL/bin:$PATH"
    echo "Bun version: "
    bun --version
fi

echo ""
echo "Installation process finished."
echo ""
echo "Add the global npm bin directory to your PATH by adding this line to your .bashrc or .zshrc:"
echo 'export PATH=~/.npm-global/bin:$PATH'
echo ""

¿Y qué hay de NVM?

Node Version Manager (NVM) es una herramienta fantástica para gestionar múltiples versiones de Node.js. Sin embargo, personalmente prefiero mantenerme con una única instalación de la última versión LTS a nivel de sistema. Este enfoque me obliga a mantener mis proyectos actualizados. Además, Node.js no suele introducir grandes cambios disruptivos en sus versiones LTS, por lo que el proceso de actualización suele ser sencillo.

Si prefieres la flexibilidad de NVM, puedes seguir usándolo, pero probablemente acabarías eligiendo un método u otro. Después de instalar NVM, gestionarías tus gestores de paquetes como yarn y pnpm instalándolos globalmente a través de npm para cada versión de Node que utilices. Podrías entonces usar alias para cambiar entre diferentes versiones de tus herramientas. Ten en cuenta que esto a veces puede llevar a conflictos de rutas o comportamientos inesperados, así que ten cuidado con qué versiones están activas en tu terminal.

La decisión de 2020: ¿Por qué Svelte?

En 2020, cuando construí la primera versión de esta web, el ecosistema de Vue estaba en plena transición. Vue 3 estaba en pruebas, y se lanzó justo cuando yo ya había acabado mi página web. Los primeros dos años de Vue 3 fueron un dolor y Nuxt 3 no fue estable hasta noviembre de 2022. El camino de migración desde Vue 2 era incierto y, francamente, el futuro parecía algo inestable.

En aquel momento, Svelte y Sapper, su framework de aplicaciones, eran una alternativa muy atractiva: rápida, sencilla y estable. Fue la decisión acertada para su momento.

El punto de inflexión: Ecosistema vs. DIY

Cinco años después, la situación ha cambiado. Svelte sigue siendo un gran framework, pero el ecosistema de Nuxt ha crecido hasta cubrir casi todo lo que necesita una web como esta.

Con mi antigua web en Sapper, tuve que construir desde cero muchas funcionalidades: metaetiquetas para SEO, gestión de contenido para el blog y optimización de imágenes. Aprendí mucho, pero mantener ese código a medida se convirtió en un engorro. Además, migrar de Sapper a SvelteKit era un proyecto grande para el que, simplemente, no tenía tiempo.

Nuxt, en cambio, tiene módulos que resuelven todo eso sin configuración:

• @nuxt/content para gestionar el contenido desde archivos.
• @nuxtjs/seo para el SEO y los metadatos, con valores por defecto que sirven sin tocar nada.
• @nuxt/image para optimizar las imágenes.
• @nuxt/icon para usar cualquier colección de iconos sin cargarla entera.

Con eso resuelto, puedo centrarme en escribir.

Alineación con mi flujo de trabajo diario

En el frontend de mi trabajo usamos Vue 3 con la Composition API, TypeScript y Tailwind. Tiene sentido que mi web personal use las mismas tecnologías que uso a diario. Trabajar con Nuxt me resulta natural y sencillo, una vez entiendes su filosofía.

El nuevo stack de un vistazo

Nuxt es el núcleo de la aplicación. Tailwind CSS se encarga de los estilos y daisyUI añade los componentes y los temas claro y oscuro. Turborepo gestiona el monorepo, que reúne la app principal, las configuraciones compartidas y las herramientas internas en un único lugar.

De Bulma a Tailwind CSS & daisyUI

En la versión anterior de mi web usaba Bulma, que es una librería CSS estupenda. Sin embargo, mi día a día gira en torno a Tailwind CSS, y pasar del template a un fichero CSS aparte me parece el doble de trabajo, porque rara vez reutilizas las clases entre componentes .vue o .svelte.

Como uso Tailwind todos los días, he empezado a "pensar" en Tailwind a la hora de maquetar. El live reload de Vite y el enfoque utility-first son parte de mi forma de trabajar y, una vez que piensas así, es muy difícil volver atrás. Para esta versión lo he combinado con daisyUI. Me permite usar componentes ya listos cuando no me quiero complicar, y prescindir de ellos para crear algo totalmente a medida sin perder ninguna de las ventajas de Tailwind. Además, trae un sistema de temas pensado para Tailwind con el que puedes tener tantos temas como quieras.

El papel de la IA en el desarrollo

Esta reconstrucción también ha sido una oportunidad para probar la última generación de asistentes de código con IA. He probado (demasiadas) herramientas, como Gemini CLI, Aider y GitHub Copilot. Algunos días me he sentido con superpoderes y otros, como si tuviera la gripe. Si cumplo mi objetivo de escribir más, pronto te contaré más sobre cada una.

¿Y ahora qué?

Quiero escribir más, compartir algunas ideas que llevo mucho tiempo pensando y quizás empezar a contribuir en algún proyecto open source.

Gracias por leer. Nos vemos.