Vite: Import path alias only setting tsconfig.json

takashi-kisaku

TK

Posted on June 22, 2022

Vite: Import path alias only setting tsconfig.json

Hello!! These days I usually use vite. And I usually set alias but, in generally we need to set alias to tsconfig.json and vite.config.ts. I think it is too trouble!!
If you want configure only tsconfig.json, I recommand this article.

The problem can be solved by vite-tsconfig-paths package.

1. You need to install the package via below command

npm i -s vite-tsconfig-paths
Enter fullscreen mode Exit fullscreen mode

2. Plese configure vite.config.ts like below


export default defineConfig({

  //... some configs

  plugins: [tsconfigPaths()],

  //... some configs

})

Enter fullscreen mode Exit fullscreen mode

3. Plese configure tsconfig.json which you like. Below is my sample


{
  "compilerOptions": {
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"],
      "$lib":["src/lib"],
      "$lib/*":["src/lib/*"]
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

4. Done

Note

You can use vite-tsconfig-paths on SvelteKit project. And it doesn't work, plese try delete generated folder for dev server like .svelte-kit.

Thank you for reading this article!!

💖 💪 🙅 🚩
takashi-kisaku
TK

Posted on June 22, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related