A CLI tool to create SvelteKit apps.
pnpm create efs@latest
┌ Welcome (v<VERSION>)
│
◆ Name / Path
│ Hit Enter to use the current directory.
│
├────┐
│ ◆ Directory Not Empty
│ │ ● Exit
│ │ ○ Delete and Continue! (This will delete the directory and all its contents.)
│ │
│ └────┬────┐
│ │ ◇ Exit
│ │ └ Exited.
│ │
│ └────┐
│ ◇ Delete and Continue!
│ │
│ ◆ Delete <DIRECTORY>
│ │ ○ Yes / ● No
│ │
│ └────┬────┐
│ │ ◇ No
│ │ └ Exited.
│ │
│ ◇ Yes
│ │ Project deleted.
├───────────────────┘
│
◆ Template
│ ● No Database
│ ○ With Database
│
├────┬────┐
│ │ ◇ No Database
│ │ │
│ │ ◆ Environment Variables?
│ │ │ ○ Yes / ● No
│ │ │
│ │ └──────────────────────────────────────────────────┐
│ │ │
│ └────┐ │
│ ◇ With Database │
│ │ │
│ ◆ Setup PocketBase for real-time features? │
│ │ ○ Yes / ● No │
│ │ │
│ ├──────────────────────────────────────────────────┘
├─────────┘
│
◆ Adapter
│ ● Auto
│ ○ Node
│ ○ Static
│ ○ Vercel
│ ○ Netlify
│
◆ Simple scaffold?
│ ○ Yes / ● No
│
◇ Dependencies installed.
│
◇ Git initialized.
│
└ Your app is ready.
- Svelte
- SvelteKit
- Tailwind
- Prettier
- Prettier Plugin Svelte
- Prettier Plugin Tailwind
- Prettier Plugin Sort Imports
These extensions are essential.
These extensions are useful.
- Auto Comment Blocks
- Bearded Icons
- GitLens
- Inline Fold
- JSDoc Markdown Highlighting
- Markdown All in One
- Path Intellisense
- Pretty TypeScript Errors
- Select Line Status Bar
- Supermaven
- Text Transformer
- Todo Tree
{
// Formatting
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode", // Install [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension.
// Editor
"editor.linkedEditing": true, // Edit opening HTML tag, and closing tag will be edited simultaneously (same vise versa). If you have any extension installed that does this, you can uninstall it.
// Workbench
"workbench.sideBar.location": "right",
/**
* https://github.com/microsoft/vscode/issues/223107#issuecomment-2292519067.
* - `src/routes/+page.svelte`: `+page.svelte`.
* - `src/routes/about/+page.svelte`: `about/+page.svelte`.
* - `src/routes/posts/[id]/+page.svelte`: `posts/[id]/+page.svelte`.
*/
"workbench.editor.customLabels.patterns": {
"**/+*.*": "${dirname}/${filename}.${extname}",
"**/[[]*[]]/+*.*": "${dirname(1)}/${dirname(0)}/${filename}.${extname}",
"**/routes/+*.*": "${filename}.${extname}",
},
// Extension: [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
"prettier.semi": false, // Keep code clean by removing semicolons.
"prettier.tabWidth": 4, // Improve readability.
// Extension: [Inline Fold](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold)
"inlineFold.maskChar": "...",
"inlineFold.unfoldedOpacity": 1,
"inlineFold.unfoldOnLineSelect": true,
"inlineFold.disableInDiffEditor": true,
// Fixes qurly brackets (`{}`) not being folded.
"inlineFold.regex": "(class)=\"(.*?)\"",
"inlineFold.regexGroup": "2",
// Extension: [Tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
"tailwindCSS.colorDecorators": false, // Because they don't get folded.
"tailwindCSS.emmetCompletions": true,
// Extension: [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
"path-intellisense.extensionOnImport": true,
"path-intellisense.autoTriggerNextSuggestion": true,
"path-intellisense.autoSlashAfterDirectory": true,
"path-intellisense.mappings": {
"%sveltekit.assets%": "${workspaceFolder}/static", // You will get intellisense for the static folder after typing `%sveltekit.assets%/`.
},
}