babakfp / create-efs

Easy Full Stack

A CLI tool to create SvelteKit apps.

pnpm create efs@latest

Prompts

┌  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.

FrontEnd & BackEnd

• Svelte
• SvelteKit
• Tailwind
• Prettier
• Prettier Plugin Svelte
• Prettier Plugin Tailwind
• Prettier Plugin Sort Imports

Storage

• PocketBase
• SQLite

vsCode Extensions

Project Specific

These extensions are essential.

• PostCSS
• Prettier
• Svelte
• Tailwind

General

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

vsCode Config

{
    // 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%/`.
    },
}