[
{
"No": "1",
"Category": "Reactivity",
"Guideline": "Use $: for reactive statements",
"Description": "Automatic dependency tracking",
"Do": "$: for derived values",
"Don't": "Manual recalculation",
"Code Good": "$: doubled = count * 2",
"Code Bad": "let doubled; count && (doubled = count * 2)",
"Severity": "Medium",
"Docs URL": "https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive"
},
{
"No": "2",
"Category": "Reactivity",
"Guideline": "Trigger reactivity with assignment",
"Description": "Svelte tracks assignments not mutations",
"Do": "Reassign arrays/objects to trigger update",
"Don't": "Mutate without reassignment",
"Code Good": "items = [...items, newItem]",
"Code Bad": "items.push(newItem)",
"Severity": "High",
"Docs URL": "https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive"
},
{
"No": "3",
"Category": "Reactivity",
"Guideline": "Use $state in Svelte 5",
"Description": "Runes for explicit reactivity",
"Do": "let count = $state(0)",
"Don't": "Implicit reactivity in Svelte 5",
"Code Good": "let count = $state(0)",
"Code Bad": "let count = 0 (Svelte 5)",
"Severity": "Medium",
"Docs URL": "https://svelte.dev/blog/runes"
},
{
"No": "4",
"Category": "Reactivity",
"Guideline": "Use $derived for computed values",
"Description": "$derived replaces $: in Svelte 5",
"Do": "let doubled = $derived(count * 2)",
"Don't": "$: in Svelte 5",
"Code Good": "let doubled = $derived(count * 2)",
"Code Bad": "$: doubled = count * 2 (Svelte 5)",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "5",
"Category": "Reactivity",
"Guideline": "Use $effect for side effects",
"Description": "$effect replaces $: side effects",
"Do": "Use $effect for subscriptions",
"Don't": "$: for side effects in Svelte 5",
"Code Good": "$effect(() => console.log(count))",
"Code Bad": "$: console.log(count) (Svelte 5)",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "6",
"Category": "Props",
"Guideline": "Export let for props",
"Description": "Declare props with export let",
"Do": "export let propName",
"Don't": "Props without export",
"Code Good": "export let count = 0",
"Code Bad": "let count = 0",
"Severity": "High",
"Docs URL": "https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop"
},
{
"No": "7",
"Category": "Props",
"Guideline": "Use $props in Svelte 5",
"Description": "$props rune for prop access",
"Do": "let { name } = $props()",
"Don't": "export let in Svelte 5",
"Code Good": "let { name, age = 0 } = $props()",
"Code Bad": "export let name; export let age = 0",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "8",
"Category": "Props",
"Guideline": "Provide default values",
"Description": "Default props with assignment",
"Do": "export let count = 0",
"Don't": "Required props without defaults",
"Code Good": "export let count = 0",
"Code Bad": "export let count",
"Severity": "Low",
"Docs URL": ""
},
{
"No": "9",
"Category": "Props",
"Guideline": "Use spread props",
"Description": "Pass through unknown props",
"Do": "{...$$restProps} on elements",
"Don't": "Manual prop forwarding",
"Code Good": "<button {...$$restProps}>",
"Code Bad": "<button class={$$props.class}>",
"Severity": "Low",
"Docs URL": "https://svelte.dev/docs/basic-markup#attributes-and-props"
},
{
"No": "10",
"Category": "Bindings",
"Guideline": "Use bind: for two-way binding",
"Description": "Simplified input handling",
"Do": "bind:value for inputs",
"Don't": "on:input with manual update",
"Code Good": "<input bind:value={name}>",
"Code Bad": "<input value={name} on:input={e => name = e.target.value}>",
"Severity": "Low",
"Docs URL": "https://svelte.dev/docs/element-directives#bind-property"
},
{
"No": "11",
"Category": "Bindings",
"Guideline": "Bind to DOM elements",
"Description": "Reference DOM nodes",
"Do": "bind:this for element reference",
"Don't": "querySelector in onMount",
"Code Good": "<div bind:this={el}>",
"Code Bad": "onMount(() => el = document.querySelector())",
"Severity": "Medium",
"Docs URL": ""
}
]
