https://github.com/kentonishi/svelte-typescript-template

An opinionated template for my Svelte projects.
https://github.com/kentonishi/svelte-typescript-template

eslint github-pages i18n prettier svelte svelte-ts template typescript vite vscode

Last synced: 3 months ago
JSON representation

An opinionated template for my Svelte projects.

• Host: GitHub
• URL: https://github.com/kentonishi/svelte-typescript-template
• Owner: KentoNishi
• Created: 2021-10-25T17:26:03.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-17T15:21:20.000Z (over 1 year ago)
• Last Synced: 2024-07-30T19:09:21.365Z (5 months ago)
• Topics: eslint, github-pages, i18n, prettier, svelte, svelte-ts, template, typescript, vite, vscode
• Language: JavaScript
• Homepage:
• Size: 238 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-ts-template

An opinionated template for my Svelte projects.

## ⚠️ WARNING (July 2023)

This template was created before SvelteKit had a stable and reliable TypeScript configuration. However, as of July 2023, the default SvelteKit template now uses the same core parsers and formatters as I set up in this template. Therefore, I highly recommend you refer to [SvelteKit's  ``Creating a Project''](https://kit.svelte.dev/docs/creating-a-project) page instead of this template.

## What's Included

* TypeScript

* Svelte (with TS support)

* ESLint (with TS support)

* Prettier (with Svelte support)

* Preconfigured `svelte-i18n`

* GitHub Actions template for GitHub Pages 

* Vite with preconfigured Svelte support

* Preconfigured VSCode settings for ESLint, i18n, etc.

I prefer this template over other existing templates for several reasons:

* Prettier properly formats everything in `.svelte` files

* ESLint properly lints and autofixes `` tags in `.svelte` files

* ESLint works with TypeScript in both `.svelte` and `.ts` files

* i18n support in Svelte components

* Easy deploy to GitHub Pages

* VSCode extensions work out of the box 

At the time of writing, no other template satisfied all of the above. As an autoformat and autofix ~~ab~~user, I NEED this template. I hope you like it too!

## Usage

Click the [***Use this template***](https://github.com/KentoNishi/svelte-typescript-template/generate) button in GitHub to use this template.

Once you clone your repository, run `yarn` to install dependencies. Then, reload VSCode to refresh the ESLint extension. Finally, use the `ESLint: Fix all auto-fixable problems` command to auto-fix any file.

## Commands

```bash

yarn                   # install

yarn dev               # dev server

yarn build             # prod build

yarn format            # autofix from cli

yarn serve             # serve prod

yarn type:check        # ts checks

yarn type:check:watch  # ts checks (watch mode)

```