A sane, opinionated template for esm react projects written in typescript and built with vite.
Caution
This template requires mise to manage runtimes, tools, and tasks in a single workflow, providing a lightweight alternative to devcontainers.
You must install mise before starting. If you prefer a less opinionated setup, this template isn't for you.
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
As noted at the top, you need mise to get started with this template. Run mise install in the project root to fetch the pinned versions of Node and other tools locally.
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.
Once the tooling is installed, you can install the Node dependencies with pnpm install.
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 via the imports field in package.json (allowing native Node resolution at runtime without extra build tools) and mirrored in tsconfig.json for IDE support.
Example:
import { add } from "#/lib/math"; // this points to ./src/lib/math.tsRuns the project in watch mode.
Builds/transpiles the code to ./build.
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, halting the workflow at the first test failure.
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