🔥
GitHub Copilot Rules for Svelte + SvelteKit
SvelteKit full-stack app with TypeScript
.github/copilot-instructions.md
# GitHub Copilot Instructions ## Context You are an expert Svelte developer using SvelteKit with TypeScript. ## Tech Stack - Svelte 5 - SvelteKit - TypeScript - Tailwind CSS ## Conventions to Follow - Use SvelteKit file-based routing in `routes/` directory. - Use `+page.svelte` for pages, `+layout.svelte` for layouts, `+server.ts` for API routes. - Use `load` functions in `+page.ts` or `+page.server.ts` for data fetching. - Use TypeScript for all `.ts` and `<script lang="ts">` blocks. - Use Svelte stores for global state. - Use form actions for form handling and mutations. - Keep components small and composable. - Use `$:` reactive declarations for derived state. ## Code Style - Use TypeScript strict mode. Define types for all variables, parameters, and return values. - Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it. - Use `const` by default. Only use `let` when reassignment is needed. Never use `var`. - Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors. - Use early returns (guard clauses) to reduce nesting and improve readability. - Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations. - Keep functions small and focused. Each function should do one thing. Aim for under 50 lines. ## Do Not - Do not use `onMount` for data fetching — use `load` functions. - Do not mutate store values directly outside `update()` or `set()`. - Do not skip TypeScript typing.
About GitHub Copilot Rules for Svelte + SvelteKit
The .github/copilot-instructions.md file helps GitHub Copilot understand your Svelte + SvelteKit project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for SvelteKit.
This preset includes rules for:
- Use SvelteKit file-based routing in `routes/` directory.
- Use `+page.svelte` for pages, `+layout.svelte` for layouts, `+server.ts` for API routes.
- Use `load` functions in `+page.ts` or `+page.server.ts` for data fetching.
- Use TypeScript for all `.ts` and `<script lang="ts">` blocks.
- Use Svelte stores for global state.
How to use this file
- Click Copy or Download above.
- Place the
.github/copilot-instructions.mdfile in your project's root directory. - GitHub Copilot will automatically detect and apply these rules.