JoeyMckenzie/sveltekit-typescript-tailwind-template

A Sveltekit template project including TypeScript, Tailwind, and all your favorite dev tooling!

Sveltekit Tailwind Typescript Template

This projects is an enhancement of the templated project that is generated when scaffolding a sveltekit project. In addition to the tools that the original template brings, this template also includes:

• TypeScript by default
• Yarn as a package manager
• Tailwind CSS
• Husky git hooks for formatting, testing, and commit message verification
• Commitlint to enforce semantic commit messages
• Dev containers for platform agnostic local development and ease of portability

The template builds upon the sveltekit template included tools in ESLint, Prettier, and Playwright. The motivation for using this template is to simply save time with a development-ready sveltekit project with batteries included.

Getting started

The simplest way to get up and running with the template is using degit. In a terminal of your choice, install degit and clone the project (without git history):

yarn global add degit # or, npm install -g degit
degit JoeyMcKenzie/sveltekit-typescript-tailwind-template path-to/your-project

Once cloned, simply install dependencies and run:

yarn install
yarn dev

That's it!

Using dev containers

If you'd prefer to use Docker with dev containers (my personal preference), first install the dev containers CLI:

yarn add --global @devcontainers/cli # or, npm install -g @devcontainers/cli

For ease of integration, add the remote containers extension to your VS Code installation as well. Next, open the project:

code path-to/your-project

Either:

• Open the project in a container through VS Code using ctrl + shift + p and select Dev Containers: Open Folder in Container...
• Build the container locally with devcontainer build --workspace-folder . and use the above command to attach your local workspace to the container

Husky git hooks

If you'd rather disable/enable only certain hooks, it's only a matter of removing the individual lifecycle hook you're interested in in the .husky folder. By default, three hooks are enabled:

• commit-msg: validates commit messages on an individual commit conform to (more/less) semantic commit convention (see commitlint.config.js to customize this)
• pre-commit: formats staged code using lint-staged based on .prettierrc configuration
• pre-push: runs Playwright tests before pushing commits to the remote origin