VSCodeでのSvelteKit開発体験を10倍に向上させる9つのヒント

SvelteKitとVSCode(Cursor)の組み合わせは非常に強力ですが、デフォルトのままではファイル名がすべて +page.svelte や +layout.server.ts となってしまい、どのルートに属するファイルなのか判別しづらいことがあります。

ここでは、そのような問題に対して、ほんの数分の設定変更や拡張機能の導入で劇的に開発効率を上げる9つのヒントをご紹介します。

1. タブに表示されるファイル名を短くする

VSCodeのタブにはデフォルトでフルパスが表示されますが、SvelteKitではすべて +page.svelte と同じ名前になりがち。

// settings.json
"workbench.editor.labelFormat": "short"

これを "short" にすると、タブ上に必ず「ディレクトリ名/+page.svelte」のように表示され、どのルートのファイルか一目瞭然になります。

ネストが深いルート配下で「フォルダー＞ファイル」の並びだと、どのファイルなのかパッとわかりにくいことも。

// settings.json
"explorer.sortOrder": "filesFirst"

を設定すると、まずファイル一覧、次にサブフォルダーが表示されるので、視認性が向上します。

中間フォルダーにファイルがないと自動で折りたたまれてしまい、「ここにファイルがあるはずなのに…？」と混乱する場合があります。

// settings.json
"explorer.compactFolders": false

これで空フォルダーも独立して見えるようになり、ルート構造を正確に把握できます。

アイコンテーマの拡張機能「Material Icon Theme」を使うと、ルートディレクトリに任意の色を割り当てられます。

// settings.json
"material-icon-theme.folders.colorRoutes": "#43a047"

緑色に統一すると、Explorer上でルートがすぐに見つかり、階層構造も直感的に把握しやすくなります。

ちなみに、同様の拡張機能として「VSCode Great Icons」という拡張機能もオススメです。

デフォルトのインデント（たとえば8px）は狭く、深い階層になるほど “どこからどこまで” がわかりづらくなります。

// settings.json
"workbench.tree.indent": 12

12~14px程度に設定すると、ファイルとフォルダーの所属関係がよりハッキリします。

SvelteKit Files 拡張を使うと、コマンドパレットからルートをポップアップ形式で追加可能。

よく使う load 関数や actions、フォーム送信の submit 処理などは、自作スニペットでさらにラクに。

→ settings.json や .code-snippets に登録しておくと便利です。

Explorer をたどるより、Ctrl+P → +page と入力すると、全 +page.svelte／+page.server.ts がリストアップされます。

create+ → src/routes/resume/create/+page.svelte
education+ → src/routes/candidates/resume/education/+page.svelte これだけで深いネストも一発ジャンプでき、ファイル探しの手間が激減。

公式DiscordサーバーはQ&Aの宝庫。

検索機能で「loading data」「cookie」などキーワード検索
実際のコード例や開発経験豊富なユーザーの回答がすぐに見つかる SvelteKitならではの細かい挙動やベストプラクティスは、ドキュメント以上にDiscordで解決できることも多いです。

以上、短時間で設定できる9つのテクニックを駆使すれば、VSCode上でのSvelteKit開発効率は間違いなく向上します。ぜひ今日から試してみて、コーディングの快適さを実感してください！何か質問があれば、コメントやDiscordでお気軽にどうぞ。