A minimal React starter kit with ESLint, Prettier, auto-sorting of imports, Tailwind CSS. Clone, install, and start building instantly without worrying about package configurations or setups. ๐
-
Clone the repository:
git clone https://github.com/07SUJITH/react-starter-kit.git
-
Navigate into the project directory:
cd react-starter-kit
-
Install dependencies:
npm install
To update all dependencies in a single step before starting to build, run:
npx npm-check-updates -u
npm install
โโโ .eslintrc.cjs
โโโ .git
โโโ index.html
โโโ LICENSE
โโโ node_modules
โโโ package.json
โโโ package-lock.json
โโโ postcss.config.js
โโโ .prettierignore
โโโ .prettierrc.json
โโโ public
โโโ README.md
โโโ src
โโโ tailwind.config.js
โโโ vite.config.js
โโโ .vscode
- React:
^18.3.1
- React-DOM:
^18.3.1
- React Icons:
^5.2.1
- React Router:
^6.24.0
- Framer Motion:
^11.2.12
- @types/react:
^18.3.3
- @types/react-dom:
^18.3.0
- @vitejs/plugin-react:
^4.3.1
- autoprefixer:
^10.4.19
- eslint:
^8.57.0
- eslint-plugin-react:
^7.34.2
- eslint-plugin-react-hooks:
^4.6.2
- eslint-plugin-react-refresh:
^0.4.7
- eslint-plugin-simple-import-sort:
^12.1.0
- postcss:
^8.4.38
- prettier:
3.3.2
- tailwindcss:
^3.4.4
- vite:
^5.3.1
-
Create a
.prettierrc.json
file and add some Prettier rules:{ "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true }
-
Create a
.prettierignore
file and add the following:node_modules # Ignore artifacts: build coverage
-
Execute Prettier with auto-fix in a file:
npx prettier --write <targetFile>
-
Create a
.vscode
folder in the root of the project. -
Create a
settings.json
file inside the.vscode
folder and insert the following code:{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }
-
Install the Prettier VSCode extension (so you can run it using some shortcuts, etc).
Now, every file saved will be formatted with the Prettier formatting rules. ๐
ESLint with auto import sort is added and configured in the .eslintrc.cjs
file.
-
Run ESLint with Fix:
npx eslint . --fix
-
To run it automatically on save, follow these steps:
- Open
settings.json
in the VSCode configuration settings. - Add the following line:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
- Open
Here are the npm scripts available in this project:
- Start Development Server:
npm run dev
- Build for Production:
npm run build
- Preview Production Build:
npm run preview
- Lint:
npm run lint
Happy coding! ๐