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

  1. Svelte core imports

  2. Svelte third-party library imports

  3. Other library imports

  4. Svelte third-party component imports

  5. Svelte component imports

  6. Asset imports

  7. Normal JS imports

  8. const variables

  9. export let props

  10. export const props

  11. let variables

  12. Computed variables (with mix of let variables)

  13. Computed blocks

  14. Lifecycle functions

  15. Core logic functions

  16. export function props

  17. Event handler functions (name starts with handle)

  18. 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} />