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
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.
Install packages: npm run dev
- Install Eslint and prettier extension for vs code (separate extensions; not the combined one)
- Make Sure Both are enabled
- Make sure all packages are Installed. (Mostly Eslint and prettier in node_modules)
- Enable formatOnSave of vs code
- 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.
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.
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.