Skip to content
Atlas
← Back to Blog
ProductivityWeb Reaper

How to Use TSConfig Path Aliases to Improve Your Code

Enable cleaner, more readable import statements with TSConfig path aliases. Learn how to set them up and improve your TypeScript code maintainability.

Path aliases let you replace deep relative imports like ../../../lib/utils with clean absolute-style paths such as @/lib/utils.

Why aliases help

  • Easier refactors when files move
  • Readable imports at a glance
  • Consistent conventions across a team

Quick setup

In tsconfig.json, map a base alias:

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

Then configure your bundler (Vite/Astro already respects these paths in modern setups) and start importing from @/.

Tips

Prefer a small set of aliases (@/components, @/lib) over dozens of one-off mappings. Keep the mental model simple so new contributors ramp up fast.