My Svelte Code Ordering Style

28 March 2021

Formatting Svelte code with Prettier is just half the story, the script tag is where the magic happens, but there's no formal way to organize it.

Over time I picked up a pattern to help with readabilty, code flow, and familiarity. Feel free to use and tweak it to your own style. YMMV!

Order

Svelte core imports
Svelte third-party library imports
Other library imports
Svelte third-party component imports
Svelte component imports
Asset imports
Normal JS imports
const variables
export let props
export const props
let variables
Computed variables (with mix of let variables)
Computed blocks
Lifecycle functions
Core logic functions
export function props
Event handler functions (name starts with handle)
Utility functions

Break this pattern whenever it feels right, e.g. grouping things by feature than type

Example

<script>
  import { createEventDispatcher, onMount } from 'svelte'
  import { _ } from 'svelte-i18n'
  import { debounce } from 'lodash'
  import { Modal } from 'svelte-components'
  import Button from './Button.svelte'
  import picture from './picture.svg'
  import { download } from './utils'

  const MAX_NUMBER = 5
  const dispatch = createEventDispatcher()

  export let value
  export let disabled = false
  export const magicNumber = 10

  let currentNumber = 0

  $: nextNumber = currentNumber + 1

  $: if (currentNumber === magicNumber) {
    console.log(':)')
  }

  onMount(() => {
    currentNumber = -currentNumber
  })

  function calculateSeverity() {
    currentNumber = currentNumber * 5 - 1
  }

  export function reset() {
    currentNumber = -currentNumber
  }

  function handleClick() {
    dispatch('alert')
    boo('alert')
  }

  function boo(str) {
    console.log('[Example] ' + str)
  }
</script>

<Button {value} {disabled} on:click={handleClick} />