Opinionated starter template for SvelteKit
The Svelte ecosystem is akin to the fiery aftermath when the worlds of Mad Max and Split collide - full of peril, violent sandstorms and new beginnings with a touch of dissociative identity disorder.
To help navigate through this madness, just like how Moses parted the Red Sea, behold the emergence of this repo. Cue angels singing. The best way to describe this is it's like a brick-layer - but instead of bricks are Svelte's somewhat arbitrary building blocks. And instead of cement are my opinions.
So let's get started.
Generate the base template using create-svelte
with these recommended options:
$ npm create svelte@latest my-app
Then, layer the patches based on the last-known SvelteKit decisions. This uses
zx
, so make sure that's installed.
$ zx https://cdn.jsdelivr.net/gh/zerodevx/svelte-starter@2/index.mjs my-app
Finally, apply the finishing touches.
$ cd my-app
$ npm update --save
$ npm run format
Base create-svelte
skeleton template with jsdoc
, prettier
, eslint
and playwright
.
Adds tailwindcss
and prettier-plugin-tailwindcss
using svelte-add
, then adds
tailwindcss/typography
.
No semicolons; because they're redundant. Also use spaces over tabs - modern code editors handle both well, but spaces display better outside IDEs (I'm looking at you Github).
{
//...
"printWidth": 100,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"proseWrap": "always",
"svelteSortOrder": "options-scripts-markup-styles",
"svelteIndentScriptAndStyle": false
}
Add defence against no-semi
:
{
//...
"rules": {
"no-tabs": "error",
"no-unexpected-multiline": "error"
}
}
Seriously, don't use SSR unless you really need to. Installs adapter-static
and adds sensible
defaults.
Use the version
from package.json
in SvelteKit's native versioning system, like so:
import { version } from '$app/environment' // `version` string from `package.json`
Use @fontsource-variable
for self-hosted open-source fonts.
Use @iconify/tailwind
plugin for high-performance css-only icons. Apply icon classes using
iconify {prefix}--{name}
. Install icon sets at @iconify-json/{prefix}
. Set icon size using
standard tailwind classes like text-lg
or w-6 h-6
. Only icons you use will be included in your
build. Read more at Iconify.
ISC