~koehr/koehr.in

e961909554a3b7513a3e35f653030c4b2d9ad93b — koehr 9 months ago 0dabc27
add TIL
1 files changed, 42 insertions(+), 0 deletions(-)

A content/til/20220222_vite_typescript_aliases.md
A content/til/20220222_vite_typescript_aliases.md => content/til/20220222_vite_typescript_aliases.md +42 -0
@@ 0,0 1,42 @@
+++
title = "Adding aliases in vite with typescript needs the same alias in tsconfig"
date = "2022-02-22"
+++

For example:

```js
import { fileURLToPath, URL } from "url"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "!component": fileURLToPath(new URL("./src/components", import.meta.url)),
      "!composable": fileURLToPath(new URL("./src/composables", import.meta.url)),
      "!lib": fileURLToPath(new URL("./src/lib", import.meta.url)),
    }
  }
})
```

will need the following in tsconfig.json:

```json
{
  "compilerOptions": {
    "paths": {
      "@/*": [ "./src/*" ],
      "!component/*": [ "./src/components/*" ],
      "!composable/*": [ "./src/composables/*" ],
      "!lib/*": [ "./src/lib/*" ]
    }
  }
}
```

The asterixes in the syntax is important (`alias/* => ./path/*`).