DEV Community

Ayush
Ayush

Posted on • Edited on

Effortlessly Setting up Your React Project with Vite, Husky, TypeScript, and ESLint: A Comprehensive Guide

#vite #typescript #husky #react

**Just a small request, I have a npm package

wiz-ui - npm

Welcome to the React Easy Packager Component Library! This library provides a collection of reusable and customizable React components to help you build beautiful and efficient user interfaces for your web applications.. Latest version: 0.0.16, last published: 5 months ago. Start using wiz-ui in your project by running `npm i wiz-ui`. There are no other projects in the npm registry using wiz-ui.

favicon npmjs.com
you guys can try it, it will help create awesome recursive components.

Thank you**

What we will learn

This blog post provides a step-by-step guide to set up a React project using Vite, Husky, TypeScript, and ESLint.

It explains the benefits of each tool and their role in ensuring a smooth and efficient development process.

The post includes code snippets and screenshots to illustrate each step of the setup process, making it easy for readers to follow along.

To get The full code go to https://github.com/pappijx/Vite-react-eslint-prettier-husky-setup

Prerequisites

Make sure you have Node.js installed on your machine. You can download it from the official website (https://nodejs.org/).

Setup Guide

1. Generate Vite + Typescript App

-> After this you will be asked to enter your project name

terminal> npm create vite@latest
? Project name: » test-project
Enter fullscreen mode Exit fullscreen mode

-> Next you need to select the framework of your choice
-> Select react here

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others
Enter fullscreen mode Exit fullscreen mode

-> Next you need to add typescript to you project

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    JavaScript + SWC
    TypeScript + SWC
Enter fullscreen mode Exit fullscreen mode

-> After this you will see the final config as

terminal> npm create vite@latest
√ Project name: ... test-project
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in D:\Work\Blogs\test-project...

Done. Now run:

  cd test-project
  npm install
  npm run dev
Enter fullscreen mode Exit fullscreen mode

-> To run the app we need to install dependencies, so just do

terminal> npm i
Enter fullscreen mode Exit fullscreen mode

-> After this you project directory and package.json looks like this

Image description

2. Setup eslint (with new vite you dont need this just setup your tsconfig right)

-> First we need to install eslint as dev dependency

terminal> npm i -D eslint
Enter fullscreen mode Exit fullscreen mode

-> Now we need to add a basic config file for eslint, for that

terminal> npx eslint --init

// this generates 

You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)
Enter fullscreen mode Exit fullscreen mode

-> Just say y (yes) here and proceed. After this we need to select the way we want to use eslint

? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
Enter fullscreen mode Exit fullscreen mode

-> I will select the second option for now, and we will use airbnb style guide for eslint afterwards.

-> After this choose module type for your project, I will choose Javascript modules

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
Enter fullscreen mode Exit fullscreen mode

-> Next choose framework as react

? Which framework does your project use? ...
> React
  Vue.js
  None of these
Enter fullscreen mode Exit fullscreen mode

-> Next let the wizard know that we are using typescript

? Does your project use TypeScript? » No / Yes
// select yes and hit enter
Enter fullscreen mode Exit fullscreen mode

-> Next select the platform where the will run, select browser and hit enter

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
  Node
Enter fullscreen mode Exit fullscreen mode

-> Now select the .eslintrc file extension, I will go with javascript format.

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
Enter fullscreen mode Exit fullscreen mode

-> Now the wizard will ask you for permission to install some dependencies, hit enter and proceed

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes
Enter fullscreen mode Exit fullscreen mode

-> And last question is, which package manager are you using? I am using npm, you can choose your package manager.

? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm
Enter fullscreen mode Exit fullscreen mode

-> Hitting enter initiates deps installation. And your root directory will have .eslintrc.cjs file with some basic settings.

-> Now your package.json and .eslintrc files will look something like below

Image description

*There is an error in the *

-> Now we need to setup a eslint style guide in our project, I am using airbnb() as the base style.
This helps a developer to write proper and clean code.

So we run below command to get all the dependencies required by eslint airbnb style guide.

terminal> npx install-peerdeps --dev eslint-config-airbnb
Need to install the following packages:
  install-peerdeps
Ok to proceed? (y) y
Enter fullscreen mode Exit fullscreen mode

-> Insert y and hit enter. Now your devDependencies looks like below.

"devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-react": "^3.1.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
Enter fullscreen mode Exit fullscreen mode

-> Just add "airbnb", "airbnb/hooks" in your .eslintrc files extends key. Now your .eslintrc files looks like below

Image description

-> we need to add typescript support for eslint-airbnb

terminal> npm install eslint-config-airbnb-typescript
Enter fullscreen mode Exit fullscreen mode

-> After this add 'airbnb-typescript' to your .eslintrc extends array.

-> After this we need to add project: './tsconfig.json' to out .eslintrc parserOptions.

-> You have a different error at top line in .eslintrc file as shown below.

Image description

-> This is because our .eslintrc file is not looked up by tsconfig file. So we need to add this in tsconfig.json, like below

Image description

-> After this open any tsx file, you will see blood all over the screen. This is because we are following airbnb guide for javascript.

Let open app.tsx file and remove all not so important code. So now the file looks like below with an error.

Image description

The error says

'React' must be in scope when using JSXeslint
Enter fullscreen mode Exit fullscreen mode

This error occurs because airbnb style guide forces us to import React from 'react' as in old react this was a requirement, but in new versions of react we don't need this.

To escape this rule we will add exception in .eslintrc file in rules array.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 0,
  },
};
Enter fullscreen mode Exit fullscreen mode

Thats it for eslintrc file.

3. Add Prettier

-> We need prettier to format our code properly so that it it more readable and so everyone use similar code formatting

-> So now just install all prettier dependencies

terminal> npm i -D prettier eslint-config-prettier eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

-> Now create .prettierrc.cjs file in root directory

module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
};
Enter fullscreen mode Exit fullscreen mode

Thats all for prettier!!!

4. Add husky to project
-> Now, this is the easiest thing to do but the most important. Using husky you make your team follow the guidelines specified by you and that makes code cleaner and helps make good coding implementations.

a. Install Husky
Run the following command to install Husky as a development dependency:

npm install husky --save-dev
Enter fullscreen mode Exit fullscreen mode

b. Enable Git Hooks
After installing Husky, enable Git hooks for your project:

This will create a .husky directory in your project root to store your hooks.

c. Add Husky to package.json
If you want Husky to automatically set up hooks after npm install, add this script to your package.json:

{
  "scripts": {
    "prepare": "husky install"
  }
}
Enter fullscreen mode Exit fullscreen mode

d. Create a Hook
You can create a hook using the following command. For example, to set up a pre-commit hook:

npx husky add .husky/pre-commit "npm test"
Enter fullscreen mode Exit fullscreen mode

Keep in mind to add eslint after prettier else it both will conflict and husky generates error

Thats it, You now have a well structured project with prettier, eslint, husky and vite.

Top comments (5)

Collapse
 
tamsay profile image
tamsay •

Awesome. Thanks for this. Straight to the point and easy to follow.

Collapse
 
jamalahmad123 profile image
Jamal Ahmad •

I run this command "npm init @eslint/config@latest" and after selecting option and done with process my eslintrc.cjs file gone. now it has eslint.config.js now what should i do

Collapse
 
pappijx profile image
Ayush • • Edited

@jamalahmad123 you can always create config files for any dev mode dependency, these will only help you with linting.

with new vite you get a default eslint too, you can use that one as well.

Also, this I will update in the article too.

Thanks for reading

Collapse
 
sparshmalhotra profile image
Sparsh Malhotra •

Very helpful! Thanks for the guide.

Collapse
 
pappijx profile image
Ayush •

Thank you @sparshmalhotra means a lot.

Read next

joaoalissonsilva profile image

Advanced State Management in React

João Alisson -

wallacefreitas profile image

Techniques to Save Costs Using AWS Lambda Functions with CDK

Wallace Freitas -

timmy471 profile image

Fixing TypeScript Errors in React Forms

Ayantunji Timilehin -

yugjadvani profile image

How to Write Better TypeScript Code: Best Practices for Clean, Effective, and Scalable Code

Yug Jadvani -