A sane, opinionated template for esm react projects written in typescript and built with vite.
Important
This template requires mise. It manages the correct versions of runtimes and tooling, such as Node itself, pnpm, and others.
It is also the task manager for the project, so no package.json scripts.
Check https://mise.jdx.dev for more details on mise, and the tasks section below (or the .mise.toml file) for the available tasks.
Uses, among other tools/packages:
- pnpm as package manager for node
- biome for code linting and formatting
- lefthook for git hooks
- cocogitto for commit message linting
- vitest for testing
- tailwindcss for styling
- tanstack router for file based router
- tanstack query for fetching stuff
To ensure a reproducible environment, mise is used:
- Install mise: https://mise.jdx.dev/getting-started.html#installing-mise-cli
- Activate mise: https://mise.jdx.dev/getting-started.html#activate-mise
- Run setup:
mise setup
This task trusts the project config, installs CLI tools (Node, pnpm, ncu), and runs pnpm install. All other scripts are standard package.json commands.
Note
Git hooks are in place to make sure both the tooling managed by mise and the project dependencies are synced with each checkout and merge.
Subpath imports (#/) are used instead of relative paths, mapped in both package.json and tsconfig.json.
Example:
import { add } from "#/math/basic"; // this points to ./src/math/basic.tsRuns the project in watch mode.
Builds/transpiles the code to ./build.
Runs the production simulation of the project.
Runs tests with vitest.
Runs biome in fix mode to lint and format the project.
Runs type checking using tsc.
This repository uses GitHub Actions for CI. The workflow is defined in .github/workflows/checks.yml.
It automates:
- Linting & Formatting: Running Biome.
- Type Checking: Running TypeScript type checking.
- Testing: Running Vitest with code coverage (generated by Istanbul).
You might want to install the recommended extensions in vscode. Search for @recommended in the extensions tab, they'll show up as "workspace recommendations".
If you have been using eslint and prettier and their extensions, you might want to disable eslint entirely and keep prettier as the formatter only for certain types of files.
This is done by the .vscode/settings.json file.
A debug configuration for Firefox is also included.
MIT