toddwseattle / pretty-vitest-react-ts-template

This is an example template that uses Vite + React + Typescript + Vitest + Eslint + Prettier

Vite + React + Typescript + Eslint + Prettier: an example repo

A starter for React with Typescript with the fast Vite, Vitest and all static code testing with Eslint and formatting with Prettier. As of this writing updated to React 18; and the latest versions of all tools as of April 2024. This was built for use by the Northwestern University CS394 Class taught by Todd Warren

You can find more about these in the following links: Vite, React, Typescript, Eslint, Prettier, Vitest

Installation

Make sure you are running node 20 or later

node --version

Clone the repo and run npm install

or preferred Run command

npx degit toddwseattle/pretty-vitest-react-ts-template project-name

this will create a clean version of the template in the project-name folder. omit project-name to create in the current directory. You will then need to initialize git yourself and push to github.

Start

Install packages: npm run dev

Steps in Vscode

(works better with this template)

1. Install Eslint and prettier extension for vs code (separate extensions; not the combined one)
2. Make Sure Both are enabled
3. Make sure all packages are Installed. (Mostly Eslint and prettier in node_modules)
4. Enable formatOnSave of vs code
5. Open a .tsx file and check if the bottom right corners of vs code have Eslint and Prettier with a double tick

If Everything is Good Then It Should Work, but let me new if something else happens.

pre-commit hook to lint files with eslint/prettier

In this template, when you commit via git commit a pre-commit hook runs the command npm run lint, so that eslint and prettier are run and modify the files to conform. Consequently, you may end up with new changes after you commit! The easiest way to make sure you get a clean commit is to npm run lint before you commit.

The npm command used in pre-commit is in the package.json key "pre-commit": "lint". Change or remove this as you see fit for your project.

Authorship and acknowledgments

This was based on a starter made with ❤️ by theSwordBreaker. Thanks theSwordBreaker for the starter and vscode screenshots! It's been enhanced with vitest by toddwseattle using the best of the js react starter from c-riesbeck for use by Northwestern University CS 394 students and others who like consistent looking typescript code.