ReactTS 18 with Tailwind CSS, ESLint, Prettier and Vite

This is a React + TypeScript + Tailwind CSS boilerplate to be built with Vite. It also includes ESLint 8, Vitest, Husky and a pre-commit hook that runs prettier --write and eslint --fix.

What's inside?

• Vite
• React 18
• TypeScript
• @vitejs/plugin-react-swc uses SWC for Fast Refresh
• ESLint 8
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-react-refresh
  • typescript-eslint
  • eslint-plugin-tailwindcss
• Tailwind CSS
• Headless UI
• heroicons
• Vitest
• Prettier
• Husky

Getting Started

Install

Create the project.

npx degit sbroccardi/ari-react-boilerplate my-app

Access the project directory.

cd my-app

Install dependencies.

yarn

Serve with hot reload at http://localhost:{PORT}.

yarn dev

Other Commands

Prettier

yarn format

Lint

Run ESLint

yarn lint

Run ESLint and fix

yarn lint:fix

Build

yarn build

Test

yarn test

Recommended VS Code extensions

• ESLint
• Prettier

Husky

Workaround for Node Version Managers and GUIs

# ~/.config/husky/init.sh

export NVM_DIR=~/.nvm

#source $(brew --prefix nvm)/nvm.sh # This loads nvm with brew.sh
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # or this loads nvm

#exit 1 # test hook without committing

ESLint version 9+

• Tracking: Flat Config support

Open issues

• eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313
• -BUG- Support eslint's new config file (flat) for recommended rules #280