Guia de estilo de código em svelte

Sempre crie as tags na ordem: script - html - style.

✅ Do

<script>
</script>

<div>
  Olá
</div>

<style>
</style>

❌ Don't Do

<div>
  Olá
</div>

<script>
</script>

<style>
</style>

Quando usar JS no html coloque espaços antes e depois das chaves.

✅ Do

<div class={ myVariable }>
  Olá
</div>

❌ Don't Do

<div class={myVariable}>
  Olá
</div>

Os statements do svelte (each, if, ...) devem ser indentados, e o que vai dentro também.

✅ Do

<div>
  {#each}
    <p>
      Olá
    </p>
  {/each}
</div>

❌ Don't Do

<div>
  {#each}
  <p>
    Olá
  </p>
  {/each}
</div>

Na tag script sempre siga a ordem:

1. imports de tipo externos
2. imports externos
3. imports de tipos internos
4. imports internos
5. declaração de variáveis exportadas
6. declaração de variáveis internas
7. declaração de funções
8. reatividade**
9. coisa que executam antes de montar

✅ Do

<script lang="ts">
  import type { someType } from 'external-lib';
  import MyClass from 'external-lib';

  // de preferência separar por uma quebra de linha
  import type { otherType } from './internal-lib';
  import MyOtherClass from 'internal-lib';

  export let myVar = "";

  const internalVar = "";

  function myFn() {

  }

  function setStuff() {

  }

  // declaração de reatividade
  $: internalVar = myFn(myVar);

  // on Before mount
  setStuff()
</script>

Mantenha a linha com menos de 80 caracteres

✅ Do

<MyComponent
  propsWithGiantName1="ValueForThePropsWithGiantName1"
  propsWithGiantName2="ValueForThePropsWithGiantName2"
  propsWithGiantName3="ValueForThePropsWithGiantName3"
  propsWithGiantName4="ValueForThePropsWithGiantName4"
/>

❌ Don't Do

<MyComponent propsWithGiantName1="ValueForThePropsWithGiantName1" propsWithGiantName2="ValueForThePropsWithGiantName2" propsWithGiantName3="ValueForThePropsWithGiantName3" propsWithGiantName4="ValueForThePropsWithGiantName4" />

Ao quebrar os atributos de uma tag em várias linhas, mantenha a identação.

✅ Do

<MyComponent
  propsWithGiantName1="ValueForThePropsWithGiantName1"
  propsWithGiantName2="ValueForThePropsWithGiantName2"
  propsWithGiantName3="ValueForThePropsWithGiantName3"
  propsWithGiantName4="ValueForThePropsWithGiantName4"
/>

❌ Don't Do

<MyComponent
propsWithGiantName1="ValueForThePropsWithGiantName1"
propsWithGiantName2="ValueForThePropsWithGiantName2"
propsWithGiantName3="ValueForThePropsWithGiantName3"
propsWithGiantName4="ValueForThePropsWithGiantName4"/>