├── .eslintrc.cjs ├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.tsx ├── assets │ ├── axios.svg │ ├── eslint.svg │ ├── prettier.svg │ ├── react.svg │ ├── tenacity-dev.png │ ├── ts.svg │ └── vite.svg ├── global.css ├── main.tsx ├── utils │ ├── index.ts │ └── tailwindUtils.ts └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | 'airbnb', 9 | 'airbnb-typescript', 10 | 'plugin:prettier/recommended', 11 | ], 12 | // Remove linting from dist, eslintrc.cjs and vite.config.ts 13 | ignorePatterns: ['dist', '.eslintrc.cjs', "vite.config.ts"], 14 | parser: '@typescript-eslint/parser', 15 | "parserOptions": { 16 | "project": "./tsconfig.json" 17 | }, 18 | plugins: ['react-refresh'], 19 | rules: { 20 | 'react-refresh/only-export-components': [ 21 | 'warn', 22 | { allowConstantExport: true }, 23 | ], 24 | // Since react 17 we don't need to have React imported at the top 25 | "react/react-in-jsx-scope": "off", 26 | "import/order": "off", 27 | "import/prefer-default-export": "off", 28 | "react/jsx-props-no-spreading": "off", 29 | "react/require-default-props": "off", 30 | "react/button-has-type": "off", 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "printWidth": 120, 4 | "bracketSpacing": true, 5 | "singleQuote": true, 6 | "jsxSingleQuote": true, 7 | "plugins": ["prettier-plugin-tailwindcss"] 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite + React + Typescript + Tanstack Query + Tailwind + Eslint + Prettier 2 | 3 | This is a starter template to get you going with the must-have libraries for every project. 4 | 5 | The starter includes the following libraries: 6 | - `@tanstack/react-query` 7 | - `axios` 8 | - `tailwind` 9 | - `classnames` 10 | - `tailwind-merge` 11 | - `eslint` and the libraries for the airbnb config 12 | - `prettier` 13 | 14 | Also, relative paths are setup in the `tsconfig.json` file so that you can easily import anything you need relatively. 15 | 16 | ## How to use this starter 17 | 18 | --- 19 | Clone the repository: 20 | ``` 21 | https://github.com/Tenacity-Dev/vite-react-ts-tailwind-tanstack-query-eslint-prettier.git 22 | ``` 23 | 24 | cd into the repository: 25 | ``` 26 | cd vite-react-ts-tailwind-tanstack-query-eslint-prettier 27 | ``` 28 | 29 | To make this repository yours: 30 | ``` 31 | rm -rf .git && git init && npm init 32 | git add . 33 | git commit -m "Initial commit" 34 | ``` 35 | 36 | Install dependencies: 37 | ``` 38 | npm install 39 | ``` 40 | 41 | Start the local server: 42 | ``` 43 | npm run web 44 | ``` 45 | 46 | # React + TypeScript + Vite 47 | 48 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 49 | 50 | Currently, two official plugins are available: 51 | 52 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 53 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 54 | 55 | ## Expanding the ESLint configuration 56 | 57 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 58 | 59 | - Configure the top-level `parserOptions` property like this: 60 | 61 | ```js 62 | export default { 63 | // other rules... 64 | parserOptions: { 65 | ecmaVersion: 'latest', 66 | sourceType: 'module', 67 | project: ['./tsconfig.json', './tsconfig.node.json'], 68 | tsconfigRootDir: __dirname, 69 | }, 70 | } 71 | ``` 72 | 73 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 74 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 75 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 76 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-ts-tailwind-tanstack-query-eslint-prettier", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@tanstack/react-query": "^5.28.4", 14 | "axios": "^1.6.8", 15 | "clsx": "^2.1.0", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "tailwind-merge": "^2.2.1" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.2.64", 22 | "@types/react-dom": "^18.2.21", 23 | "@typescript-eslint/eslint-plugin": "^7.1.1", 24 | "@typescript-eslint/parser": "^7.1.1", 25 | "@vitejs/plugin-react-swc": "^3.5.0", 26 | "autoprefixer": "^10.4.18", 27 | "eslint": "^8.2.0", 28 | "eslint-config-airbnb": "^19.0.4", 29 | "eslint-config-airbnb-typescript": "^18.0.0", 30 | "eslint-config-prettier": "^9.1.0", 31 | "eslint-plugin-import": "^2.25.3", 32 | "eslint-plugin-jsx-a11y": "^6.5.1", 33 | "eslint-plugin-prettier": "^5.1.3", 34 | "eslint-plugin-react": "^7.28.0", 35 | "eslint-plugin-react-hooks": "^4.3.0", 36 | "eslint-plugin-react-refresh": "^0.4.5", 37 | "postcss": "^8.4.35", 38 | "prettier": "^3.2.5", 39 | "prettier-plugin-tailwindcss": "^0.5.12", 40 | "tailwindcss": "^3.4.1", 41 | "typescript": "^5.2.2", 42 | "vite": "^5.1.6", 43 | "vite-tsconfig-paths": "^4.3.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import reactLogo from '@assets/react.svg'; 2 | import viteLogo from '@assets/vite.svg'; 3 | import tsLogo from '@assets/ts.svg'; 4 | import eslintLogo from '@assets/eslint.svg'; 5 | import prettierLogo from '@assets/prettier.svg'; 6 | import axiosLogo from '@assets/axios.svg'; 7 | import tenacityDev from '@assets/tenacity-dev.png'; 8 | 9 | function App() { 10 | return ( 11 |
12 |
13 |
14 | react logo 15 | vite logo 16 | typescript logo 17 | eslint logo logo 18 | prettier logo 19 | axios logo 20 |
21 |

22 | Vite + React + Typescript + Relative Paths + Tanstack Query + Tailwind & Utils + Eslint + Prettier 23 |

24 | 25 |
26 |

27 | This is a starter template that I use for my personal and professional projects. 28 |

29 |

What this starter includes:

30 | 31 |
    32 |
  • Tanstack Query ✅
    • 33 |
  • Axios for networking ✅
    • 34 |
  • Eslint with airbnb config ✅
    • 35 |
  • Code conventions with and tailwind class sorting with prettier ✅
    • 36 |
  • Relative paths ready ✅
    • 37 |
  • classNames and tailwind-merge libraries installed with the `cn` function added ✅
    • 38 |
39 |
40 | 41 |
42 |

43 | Check out{' '} 44 | 50 | my Youtube channel 51 | {' '} 52 | where you can learn how to use these tools. 53 |

54 | Tenacity Dev logo 55 |
56 |
57 |
58 | ); 59 | } 60 | 61 | export default App; 62 | -------------------------------------------------------------------------------- /src/assets/axios.svg: -------------------------------------------------------------------------------- 1 | 2 | 81 | -------------------------------------------------------------------------------- /src/assets/eslint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/prettier.svg: -------------------------------------------------------------------------------- 1 | prettier-icon-dark -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/tenacity-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tenacity-Dev/vite-react-ts-tailwind-tanstack-query-eslint-prettier/a41f2885662b3e213e80d4814222120976244dc9/src/assets/tenacity-dev.png -------------------------------------------------------------------------------- /src/assets/ts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/vite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/global.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import './global.css'; 5 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; 6 | 7 | const queryClient = new QueryClient(); 8 | 9 | ReactDOM.createRoot(document.getElementById('root')!).render( 10 | 11 | 12 | 13 | 14 | , 15 | ); 16 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tailwindUtils'; 2 | -------------------------------------------------------------------------------- /src/utils/tailwindUtils.ts: -------------------------------------------------------------------------------- 1 | import { ClassValue, clsx } from 'clsx'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "baseUrl": "./src", 23 | "paths": { 24 | "@assets/*": ["assets/*"], 25 | "@components/*": ["components/*"], 26 | "@constants/*": ["constants/*"], 27 | "@utils/*": ["utils/*"], 28 | "@interfaces/*": ["interfaces/*"], 29 | "@hooks/*": ["hooks/*"], 30 | "@services/*": ["services/*"], 31 | } 32 | }, 33 | "include": ["src", "tailwind.config.js"], 34 | "references": [{ "path": "./tsconfig.node.json" }] 35 | } 36 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | import tsconfigPaths from 'vite-tsconfig-paths' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [react(), tsconfigPaths()], 8 | }) 9 | --------------------------------------------------------------------------------