| name | svelte_patterns |
| description | Svelte/SvelteKit 代码审查规则。当审查 .svelte 文件或 Svelte 项目的 JS/TS 文件时套用。检查 Runes 响应式、stores、模板安全({@html} XSS)。 |
| category | style |
| reviewer_type | style |
| languages | ["typescript","javascript"] |
| frameworks | ["svelte"] |
Svelte/SvelteKit Patterns Review
When to Apply
- 审查
.svelte 文件或 .svelte.js/.svelte.ts 文件
- 审查 SvelteKit 项目的组件和页面
When NOT to Apply
- 测试文件(
*.test.ts, *.spec.ts)→ 测试规则放宽
- 配置文件(
svelte.config.*, vite.config.*)→ 不同规则
- 生成的代码 → 不审查
- Svelte 4 旧语法(非 runes 模式)→ 不强制用 runes
- 纯服务端代码(
+server.ts, hooks.server.ts)→ 组件规则不适用
Security(必查,最高优先级)
XSS
{@html userContent} — 用户内容渲染为原始 HTML → error
element.innerHTML = userContent 在 onMount 中 → error
Client-Side Secrets
- API key、token 在组件/store 中硬编码 → error
- SvelteKit 的 public env vars 含敏感凭证 → error
Key Areas
Reactivity (Runes Mode — Svelte 5)
$state() for reactive variables; $state.snapshot() for plain copies
$derived() must be pure — no side effects, no mutations
$effect() auto-tracks dependencies; don't over-specify
- Never mutate
$state during $derived computation
Component Design
-
250 lines → split into components or .svelte.js helpers
$props() with destructuring for type-safe props
- Slot props for flexible composition
Stores
- Svelte 5: use
$state() runes in .svelte.js files for shared state
- Svelte 4:
writable()/derived() stores; $storeName auto-subscription
- Clean up manual
.subscribe() in onDestroy
Template
{#each} always needs unique key
{#if} blocks are statements, not expressions
- Use
{@const} for template-local constants
Validation Criteria
True Positive: Creates reactivity bugs, memory leaks, or XSS. Confidence > 0.7.
False Positive:
{@html} 的内容来自可信 CMS 且已 sanitize
- Svelte 4 语法在尚未迁移的项目中
$effect 中的操作是必要的初始化副作用