Zenn
Open1

svelteとviteとvscodeの設定

VS Code
Svelte
Vite
NoboNoboNoboNobo

frontend/bindings配下にモジュールおいていて、インポートパスをすっきり書きたいとき。

vite.config.js
import { defineConfig } from "vite";
import path from "path";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      $bindings: path.resolve("./bindings"),
    },
  },
});

って書くと"$bindings/..."にてインポートが書ける。

が、VSCodeではエラーになる。LSPがこのエイリアスを知らないから。
そこで、vite.config.jsonのそばに以下のファイルを置こう。

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@bindings/*": ["bindings/*"]
    }
  }
}