A sane, opinionated template for esm react projects written in typescript and built with vite.
Note
This template provides a mise configuration to make it easy to keep node and pnpm versions in sync.
Uses, among other tools/packages:
- pnpm as package manager for node
- biome for code linting and formatting
- lefthook for git hooks
- commitlint for commit message linting
- vitest for testing
- tailwindcss for styling
- tanstack router for file based router
- tanstack query for fetching stuff
If you use mise and run mise install in the project root, you'll have the correct node and pnpm versions installed.
This is by far the easiest way to keep your environment consistent across different machines and team members, no matter the frequency of version updates. I'm not affiliated with mise but I wholeheartedly recommend it, so check it here: https://mise.jdx.dev.
If not using mise, make sure you have:
- node 24+ installed (v24.14.1 used)
- pnpm 10+ installed (v10.33.0 used)
Then, install dependencies with:
pnpm installNote
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