Los alias de rutas reemplazan imports relativos profundos (../../components/Button) con alias limpios (@/components/Button). Mejoran la legibilidad y facilitan la reestructuración.

Configuración en tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Integración con bundlers

Vite: resuelve alias de tsconfig automáticamente con vite-tsconfig-paths. Webpack: resolve.alias. Next.js: tsconfig.json paths soportado nativamente.

ESLint y editores

eslint-plugin-import necesita import/resolver configurado para seguir alias. VS Code usa tsconfig para autocompletado y navegación.

Buenas prácticas

Usar @/ como prefijo estándar. Mantener alias limitados (2-3). No mezclar imports absolutos y relativos inconsistentemente.