Easy Full Stack

A CLI tool to create SvelteKit apps.

pnpm create efs@latest

Prompts

┌  Easy Full Stack
│
◆  Path
│  Hit Enter to use the current directory.
│
├────┐
│    ◆  Directory Not Empty
│    │  ● Exit
│    │  ○ Delete! ( <DIRECTORY> )
│    │
│    ├────┐
│    │    ◇  Exit
│    │    └  Exited.
│    │
│    ◇  Delete!
│    │  Directory deleted.
├────┘
│
◆  Database
│  ○ Yes / ● No
│
├────┬────┐
│    │    ◇  No
│    │    │
│    │    ◆  Env
│    │    │  ○ Yes / ● No
│    │    │
│    │    └──────────────────────┐
│    │                           │
│    ◇  Yes                      │
│    │                           │
│    ◆  Realtime Database        │
│    │  ○ Yes / ● No             │
│    │                           │
├────┴───────────────────────────┘
│
◆  Markdown
│  ○ Yes / ● No
│
◆  Adapter
│  ● Auto
│  ○ Node
│  ○ Static
│  ○ Vercel
│  ○ Netlify
│
◆  Scaffold
│  ○ Yes / ● No
│
◇  Dependencies installed.
│
◆  Git
│  ● Yes / ○ No
│
└  All done.

FrontEnd & BackEnd

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

Storage

• PocketBase
• SQLite

vsCode Extensions

Project Specific

These extensions are essential.

• Prettier
• Svelte
• Tailwind CSS

These extensions are useful.

• Svelte Snippets
• Inline Fold

General

• Bearded Icons
• GitLens
• JSDoc Markdown Highlighting
• Open File
• Open Folder in Explorer
• Peek Hidden Files
• Pretty TypeScript Errors
• Select Line Status Bar
• Text Transformer

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.
    "prettier.experimentalTernaries": true,
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.experimentalOperatorPosition": "start",

    // 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 CSS](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
    "tailwindCSS.colorDecorators": false, // Because they don't get folded.
    "tailwindCSS.emmetCompletions": true,
    "files.associations": {
        "*.css": "tailwindcss",
    },

    // https://github.com/antfu/vscode-file-nesting-config
}