This is a React and Vite project template bootstraped with Tailwindcss, Pretiier, Prettier-tailwindcss-plugin, Husky and lint-staged
Linting and code formatting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. But running a lint process on a whole project is slow, and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.
-
Prettier - Code is formatted on save - Same code formatting throughtout the codebase - No need to discuss code style in code review
-
Prettier-tailwindcss-plugin - Formats tailwindcss classes - Each contributer will have same tailwindcss class sequence
-
Husky - Create a pre commmit hook - Run a script on staged code before committing.
-
Lint-staged - Ensure no errors go into the repository and enforce code style.
git clone https://github.com/BUMBAIYA/vite-js-tailwindcss-husky.git
Important: Install dependencies before changing files.
Run this command in project root folder
npm install
Delete the .git
folder from the repo
Note: Enable show hidden folder to show .git
folder on windows
Initialize new local repo run this from project root
git init .
Important: Edit the name in package.json
file as your project name
npx husky install
git add .
git commit -m "Initial commit"
To set code style of your liking edit .prettierrc
Note: After changing code styles run this commands to format the codebase as your code style
npx prettier --write *
npx prettier --write ./src
npx husky add .husky/pre-commit "# New Hook"
or refer
To add new lint stage edit .lintstagedrc.json
or refer