Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joeymckenzie/sveltekit-typescript-tailwind-template
A Sveltekit template project including TypeScript, Tailwind, and all your favorite dev tooling!
https://github.com/joeymckenzie/sveltekit-typescript-tailwind-template
commitlint devcontainers eslint husky playwright prettier svelte sveltekit tailwindcss typescript yarn
Last synced: 2 months ago
JSON representation
A Sveltekit template project including TypeScript, Tailwind, and all your favorite dev tooling!
- Host: GitHub
- URL: https://github.com/joeymckenzie/sveltekit-typescript-tailwind-template
- Owner: JoeyMckenzie
- License: mit
- Created: 2022-11-01T18:34:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-28T00:23:04.000Z (almost 2 years ago)
- Last Synced: 2023-03-04T16:39:32.038Z (almost 2 years ago)
- Topics: commitlint, devcontainers, eslint, husky, playwright, prettier, svelte, sveltekit, tailwindcss, typescript, yarn
- Language: Svelte
- Homepage: https://sveltekit-typescript-tailwind-template.vercel.app/
- Size: 1.58 MB
- Stars: 20
- Watchers: 1
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.typescriptlang.org/) by default
- [Yarn](https://yarnpkg.com/) as a package manager
- [Tailwind CSS](https://tailwindcss.com/)
- [Husky](https://github.com/typicode/husky) git hooks for formatting, testing, and commit message verification
- [Commitlint](https://commitlint.js.org/#/) to enforce semantic commit messages
- [Dev containers](https://containers.dev/) 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](https://github.com/Rich-Harris/degit). In a terminal of your choice, install degit and clone the project (without git history):
```bash
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:
```bash
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:
```bash
yarn add --global @devcontainers/cli # or, npm install -g @devcontainers/cli
```
For ease of integration, add the [remote containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) to your VS Code installation as well. Next, open the project:
```bash
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](https://github.com/okonet/lint-staged) based on `.prettierrc` configuration
- `pre-push`: runs [Playwright](https://playwright.dev/) tests before pushing commits to the remote origin