|
| 1 | +# svelte-starter |
| 2 | + |
| 3 | +> Opinionated starter template for SvelteKit |
| 4 | +
|
| 5 | +The Svelte-world is akin to the universes of |
| 6 | +[Mad Max](https://en.wikipedia.org/wiki/Mad_Max:_Fury_Road) and |
| 7 | +[Split](https://en.wikipedia.org/wiki/Split_(2016_American_film) collided - full of peril, violent |
| 8 | +sandstorms and new beginnings with a touch of disassociative personality disorder. |
| 9 | + |
| 10 | +To help navigate through this madness, just like how Moses parted the Red Sea, behold the emergence |
| 11 | +of this repo. Cue angels singing. The best way to describe this is it's like a brick-layer - but |
| 12 | +instead of bricks are Svelte's somewhat arbitrary building blocks. And instead of cement are my |
| 13 | +opinions. |
| 14 | + |
| 15 | +So let's get started. |
| 16 | + |
| 17 | +## Usage |
| 18 | + |
| 19 | +This combo-patcher uses [zx](https://github.com/google/zx), so make sure that's installed. Then run: |
| 20 | + |
| 21 | +``` |
| 22 | +$ zx --install https://raw.githubusercontent.com/zerodevx/svelte-starter/master/index.mjs <app-name> [flags] |
| 23 | +``` |
| 24 | + |
| 25 | +This generates the starter based on the latest SvelteKit decisions. Output saved to `/app-name`. |
| 26 | + |
| 27 | +### Flags |
| 28 | + |
| 29 | +| Flag | Type | Default | Description | |
| 30 | +| ---- | -------------------------------------- | ---------- | ---------------------------------- | |
| 31 | +| -o | boolean | false | Overwrite existing path if exists. | |
| 32 | +| -t | ('skeleton'\|'skeletonlib'\|'default') | 'skeleton' | Base template from `create-svelte` | |
| 33 | + |
| 34 | +## Opinions |
| 35 | + |
| 36 | +### SvelteKit |
| 37 | + |
| 38 | +Base skeleton `create-svelte` template with JSDoc+Prettier+ESLint+Playwright. |
| 39 | + |
| 40 | +### Tailwind CSS |
| 41 | + |
| 42 | +Add `tailwindcss` using `svelte-add`. |
| 43 | + |
| 44 | +### Prettier config |
| 45 | + |
| 46 | +No semicolons; because they're redundant. Also use spaces over tabs - modern code editors handle |
| 47 | +both well, but spaces display better outside IDEs (I'm looking at you Github). |
| 48 | + |
| 49 | +```json |
| 50 | +{ |
| 51 | + "printWidth": 100, |
| 52 | + "useTabs": false, |
| 53 | + "semi": false, |
| 54 | + "singleQuote": true, |
| 55 | + "trailingComma": "none", |
| 56 | + "proseWrap": "always", |
| 57 | + "svelteSortOrder": "options-scripts-markup-styles", |
| 58 | + "svelteIndentScriptAndStyle": false |
| 59 | +} |
| 60 | +``` |
| 61 | + |
| 62 | +### ESLint config |
| 63 | + |
| 64 | +Add defence against `no-semi`: |
| 65 | + |
| 66 | +```js |
| 67 | +module.exports = { |
| 68 | + ... |
| 69 | + rules: { |
| 70 | + 'no-tabs': 'error', |
| 71 | + 'no-unexpected-multiline': 'error' |
| 72 | + } |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +### Static site setup |
| 77 | + |
| 78 | +Seriously, don't use SSR unless you really need it. Installs `adapter-static` and adds sensible |
| 79 | +defaults. |
| 80 | + |
| 81 | +## License |
| 82 | + |
| 83 | +ISC |
0 commit comments