Astro App Starter

This project includes:

• Astro 5
• Svelte 5
• Tailwind 3
• Typescript 5

Formatting

Prettier & Stylelint are used for formatting & ESLint for linting.

Style

We use stylelint instead of prettier for style formatting. This is because prettier doesn't work with scss files and stylelint gives us more control over the formatting.

Currently we are formatting astro, svelte & html style tags, as well as css and scss files. It will reorder the properties in some groups and alphabetically within these groups.

Tailwind

For Tailwind, a prettier plugin is used. This plugin is reordering the classes automatically.

Editor Settings

VSCode

• Install the Prettier extension.
• Install the Stylelint extension.

The extensions are needed to format the code automatically on save. If it doesn't work out of the box, you might have to configure it in VSCode settings.json:

CMD + SHIFT + P -> Preferences: Open Settings (JSON)

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[astro]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[svelte]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.documentSelectors": ["**/*.astro", "**/*.svelte"]

    "stylelint.validate": [
        "css",
        "scss",
        "svelte",
        "astro",
        "html"
    ]

Linting

ESLint is set up for js, ts, svelte and astro files. There is also an additional package to help us with accessibility.

Editor Settings

VSCode

• Install the ESLint extension.

The extensions is needed to lint the code automatically on save. If it doesn't work out of the box, you might have to configure it in VSCode settings.json:

CMD + SHIFT + P -> Preferences: Open Settings (JSON)

    "eslint.validate": [
        "javascript",
        "astro",
        "typescript",
        "svelte",
        "html",
    ],