Estructura

Para crear varios archivos desde la consola puede utilzar el siguiente comando

touch {Header,Main,Timeline,Sidebar}.svelte

También les recomiendo la extensión Relative Path para vscode que permite buscar de forma sencilla los archivos para completar la ruta y no escribirla toda, aquí el enlace:

https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath

Con Emmet puedes generar la estructura de forma sencilla con:

Header+Main>Timeline+Sidebar

<slot /> : Le indica al componente que aceptará componentes hijos.

Para los gustosos de Emmet, les comparto el enlace de la documentación :

div.main>{Header}

Yo recomiendo utilizar un alias en webpack, a partir de la indexación de su archivo webpack, para manejar una indexación que utilizamos mucho:

...
  resolve: {
    extensions: ["*", ".mjs", ".js", ".svelte"],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@Components": path.resolve(__dirname, "./src/components")
    }
  },
...

Se puede automatizar la creación de componentes con un script como el siguiente:

#!/bin/bash

for componentName in "$@" 
do
    echo "creating file $componentName.svelte"
    touch "$componentName.svelte"
    printf "<script>\n\n</script>\n\n<style>\n\n</style>\n\n<div class=\"$componentName\">\n\n</div>" > "$componentName.svelte"
done

Lo guardan, le agregan permisos de ejecución y lo agregan a la variable PATH

La próxima vez que necesiten crear uno o varios componentes abren el terminal, ponen el nombre del archivo con el que guardaron este script, seguido de uno o varios nombres para los componentes que quieran crear.

Ejemplo:
Yo llame al archivo que contiene el script “newSvelteComponent”, para crear dos componentes abro el terminal dentro de la carpeta components y ejecuto:

$ newSvelteComponent Componente1 Componente2

como resultado se crean dos archivos llamados Componente1.svelte y Componente2.svelte, cada uno con la siguiente estructura:

<script>

</script>

<style>

</style>

<div class="nombreDelComponente">

</div>

Además de usar slots, también los puedes usar nombrados:

<SomeComponent>
	<slot name="box"/>
</SomeComponent>

Y cuando lo quieres usar

<SomeComponent>
	<div slot="box">
		<h1>Nunca pares de aprender</h1>
	</div>
</SomeComponent/>

Esto es muy útil sobretodo cuando tu componente se usa en distintos lugares pero tiene variaciones que a lo mejor no puedes solucionar simplemente con props.
Aquí tienes más información: Named slots

Oscar es de mis profesores favoritos en Platzi

Si tienen el siguiente error

Unexpected end of JSON input while parsing near '...^2.1.0","electron-rel'

Ejecuten el comando npm cache clean --force y luego npm install esto funciono para mi