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」のように表示され、どのルートのファイルか一目瞭然になります。
2. エクスプローラーでファイルを先に表示する
ネストが深いルート配下で「フォルダー＞ファイル」の並びだと、どのファイルなのかパッとわかりにくいことも。
// settings.json
"explorer.sortOrder": "filesFirst"を設定すると、まずファイル一覧、次にサブフォルダーが表示されるので、視認性が向上します。
3. 空フォルダーを圧縮表示しない
中間フォルダーにファイルがないと自動で折りたたまれてしまい、「ここにファイルがあるはずなのに…？」と混乱する場合があります。
// settings.json
"explorer.compactFolders": falseこれで空フォルダーも独立して見えるようになり、ルート構造を正確に把握できます。
4. Material Icon Themeでルートフォルダーを色分け
アイコンテーマの拡張機能「Material Icon Theme」を使うと、ルートディレクトリに任意の色を割り当てられます。
- 拡張機能から Material Icon Theme をインストール
- 設定でフォルダー色を指定（例: 緑系をルートに統一）
// settings.json
"material-icon-theme.folders.colorRoutes": "#43a047"緑色に統一すると、Explorer上でルートがすぐに見つかり、階層構造も直感的に把握しやすくなります。
ちなみに、同様の拡張機能として「VSCode Great Icons」という拡張機能もオススメです。
5. エクスプローラーのインデント幅を調整
デフォルトのインデント（たとえば8px）は狭く、深い階層になるほど “どこからどこまで” がわかりづらくなります。
// settings.json
"workbench.tree.indent": 1212~14px程度に設定すると、ファイルとフォルダーの所属関係がよりハッキリします。
6. SvelteKit Files 拡張でルートを自動生成
SvelteKit Files 拡張を使うと、コマンドパレットからルートをポップアップ形式で追加可能。
- 右クリック → SvelteKit Files: Create Route
/employer/newのようにパスを入力- 自動で
+page.svelte／+page.server.tsがボイラープレート付きで生成されます。
7. 独自スニペットでより高速にコーディング
よく使う load 関数や actions、フォーム送信の submit 処理などは、自作スニペットでさらにラクに。
- 例:
kitsubmitスニペットで共通の進捗強化処理を一括挿入 - デフォルトで用意されている
kitload／kiteventsも活用
→ settings.json や .code-snippets に登録しておくと便利です。
8. Ctrl+P／Cmd+P で瞬時にファイル切り替え
Explorer をたどるより、Ctrl+P → +page と入力すると、全 +page.svelte／+page.server.ts がリストアップされます。
create+→src/routes/resume/create/+page.svelteeducation+→src/routes/candidates/resume/education/+page.svelteこれだけで深いネストも一発ジャンプでき、ファイル探しの手間が激減。
9. Discordコミュニティをフル活用
公式DiscordサーバーはQ&Aの宝庫。
- 検索機能で「loading data」「cookie」などキーワード検索
- 実際のコード例や開発経験豊富なユーザーの回答がすぐに見つかる SvelteKitならではの細かい挙動やベストプラクティスは、ドキュメント以上にDiscordで解決できることも多いです。
おわりに
以上、短時間で設定できる9つのテクニックを駆使すれば、VSCode上でのSvelteKit開発効率は間違いなく向上します。ぜひ今日から試してみて、コーディングの快適さを実感してください！何か質問があれば、コメントやDiscordでお気軽にどうぞ。