React + pnpm (alternative to npm) + Vite.JS (Rollup) + SWC (Hot Reload) + ESLint + Prettier +
This setup includes lots of best practices and standard throughout the structure. However, All the setup steps will be included here for reference.
This boilerplate is for people to reduce the time to setup from scratch, just use this as template to create an awesome new tool to setup react project. However, You can remove anything that, you don't require.
As, eslint comes with vite cli, so we need to setup prettier to format code and have a standard setup. Make sure, eslint & prettier config doesn't override each other.
pnpm add --save-dev --save-exact prettier
pnpm add --save-dev eslint-config-prettier
Install the above packages, then create .prettierrc.json
file in the project root. As of now, for me basic setup inclues this, in the JSON. However, you can change this, as you like. Refer, Prettier Docs.
Make sure to include,
prettier
to your eslint config, onextends
section. And it should be the last one on that list.
{
"singleQuote": true,
"tabWidth": 2,
"arrowParens": "avoid",
"printWidth": 120,
"trailingComma": "es5",
"semi": true,
"useTabs": true
}
Now, you can create
.prettierignore
file in the root, to mention, which folders or files can be ignored during formatting.
this is an optional setting which I prefer. You can remove this, if you don't like to get errors when using console.log
statements. But this actually help before commiting the code, sometimes developers do forget to remove console.log
which leads to heavier bundle size.
{
rules: {
'no-console': ['error', { allow: ['warn', 'error'] }],
},
}
This will require, if you're in a team environment, which is will force developer to write conventional commits.
You can remove husky, conventional commits, commitizen, if you're setting up only for personl projects.
pnpm dlx husky-init && pnpm install
It will:
- Add
prepare
script to package.json - Create a sample pre-commit hook that you can edit (by default, npm test will run when you commit)
- You can change, from default to set you linting rules and lint fix commands. (we're making it, npx lint-staged, instead of pnpm test).
pnpm add --save-dev lint-staged
lint staged will help you to run eslint or any formatting only on staged files, not full repo. this is actually a very good, pre-commit hooks to be run.
Also add this to package.json:
{
"lint-staged": {
"*.(js|ts|tsx|jsx)": "prettier --write --ignore-unknown"
}
}
To add another hook use husky add. For example:
pnpm husky add .husky/commit-msg 'echo "something"'
After running this, it will create an file / hooks in .husky
folder. There, we'll add conventional commits bash script.
#!/usr/bin/env sh
if ! head -1 "$1" | grep -qE "^(feat|fix|chore|docs|test|style|refactor|perf|build|ci|revert)(\(.+?\))?: .{1,}$"; then
echo "Aborting commit. Your commit message is invalid." >&2
exit 1
fi
if ! head -1 "$1" | grep -qE "^.{1,88}$"; then
echo "Aborting commit. Your commit message is too long." >&2
exit 1
fi
this will make sure you're following the conventional pattern. Now, we just need to setup another thing, called commitizen
, for helping developers to write conventional commits using CLI.
pnpm add -g commitizen
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact
After this almost you're ready to have proper commit setup. just add new script to package.json:
{
"scripts": {
"cz": "git cz",
"acp": "git add . && git cz && git push" //optional
}
}
Thats it. Done โ .
If you really want to Uninstall husky and other hooks
pnpm remove husky && git config --unset core.hooksPath
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list