emisua / books

Vite + React + Typescript + Tailwind + EsLint (AirBnB)

🚀 React-TS-Tailwind 🚀

Starter kit for modern web applications with EsLint and Husky

Motivation

Starting a new project and setting up everything from scratch can be a pain. Therefor i decided to create my own little Starter kit with the most common Libraries and stuff.

Features

• ✨ Vite
• ✨ React
  • v18
• ✨ TypeScript
• ✨ Tailwind CSS
• ✨ ESlint
  • AirBnB config
  • Prettier config
• ✨ Prettier
• ✨ Husky

Vite

Vite is the build tool of choice. It is super fast and is based on native ES modules, rollup, and esbuild

React

React in the latest version (v18). All dependencies match up against the version of React.

TypeScript

"Not using TypeScript is like driving without a seatbelt" - Matt Howard.

TypeScript is a superset of JavaScript. Once you know JavaScript you should learn TypeScript easily and fast. Checkout the official documentation!

Tailwind

"Rapidly build modern websites without ever leaving your HTML." - Official Tailwind CSS Website. Tailwind CSS is a framework for quickly building and customizing applications without writing custom CSS.

ESlint

ESlint is preconfigured with one of the most popular config.

The following configs are included:

• eslint-config-airbnb
• eslint-config-airbnb-typescript
• eslint-config-prettier

Prettier

Prettier is preconfigured. For the current configuration check the ./.prettierrc.cjs file.

Husky

Check out husky. Currently it is configured with a pre-commit hook that checks your code.

Usage

You can fork/clone the repository.

Install dependencies:

npm install # or yarn

In order to run it in development, run:

npm run dev # or yarn dev

In order to do a production build, run:

npm run build # yarn build

To lint the code, run

npm run lint # yarn lint

To fix autofixable linting errors, run

npm run lint:fix # yarn lint:fix

To check your formatting, run

npm run format:check # yarn format:check

To fix your formatting, run

npm run format:fix # yarn format:fix

License

MIT