Setup React Typescript with Vite & ESLint
Tags: javascript, react, vite, typescript
Published: 2024-04-26 01:41:23

## Setup React Typescript with Vite & ESLint
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d54myazcikrr2qvwdwwj.png)
[Vite](https://vitejs.dev/) is trending recently, because of its simple setup and much faster execution speed than Webpack.

## 🥇ReactJs Vite folder structure
Below is the complete directory structure of the ReactJs Typescript Vite ESLint Prettier project
```
📦react-app
 ┣ 📂dist
 ┣ 📂public
 ┃ ┗ 📜vite.svg
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜react.svg
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜index.css
 ┃ ┣ 📜main.tsx
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.editorconfig
 ┣ 📜.eslintignore
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜index.html
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts
```

- dist folder: Folder containing build files.
- Public folder: Contains index.html file and related files such as favicon.ico, robots.txt,...
- src folder: Contains our main source code.
- Folder src/assets: Contains media, css (the App.css and index.css files above I left intact when first created, you can put them in assets/styles for simplicity), fonts.
- The remaining config files will be introduced in the sections below.

## 🥇Step 1 - Create Vite project

> Vite requires Node version 14.18+, 16+ to operate stably. However, some templates require a higher version, so if it warns, please update nodejs to a higher version.
You can use npm or yarn or pnpm, here I use npm for simplicity.

with npm
```
npm create vite@latest
```
with yarn
```
yarn create vite
```
with PNPM
```
pnpm create vite
```
After running, it will ask to enter a project name****

```
Need to install the following packages:
  create-vite@4.1.0
Ok to proceed? (y) y
✔ Project name: … react-app
```
Next is to choose Framework
```
✔ Select a framework: › React
```
Select template, here I choose **TypeScript + SWC**, SWC will replace Babel for compiling Typescript/Javascript code. **SWC** is 20 times faster than **Babel**
```
✔ Select a variant: › TypeScript + SWC
```
Next is the folder just created by Vite
```
cd react-app
```
Install packages
```
npm i
```
🥇Step 2 - Install related packages ESLint and Prettier

After completing step 1, by default Vite has already helped us with basic configuration for ESLint and TypeScript, but to make coding easier, we will install some more packages.

```
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
```
These are the things we install

- **prettier**: main formatter code
-** eslint-config-prettier**: ESLint config set to disable ESLint rules that conflict with Prettier.
- **eslint-plugin-prettier**: Use some additional Prettier rules for ESLint.

🥇Step 3 - Config ESlint to standardize the code
Open the **.eslintrc.cjs** file
Add this value to the** ignorePatterns **array, the purpose is that I do not want **ESLint** to check the **vite.config.ts** file

```
'vite.config.ts'
```
Add the following code to the **extends** array

```
'eslint-config-prettier', 'prettier'
```
Add the following code to the **plugins** array

```
'prettier'
```
Add the following code to the** rules **object to add Prettier rules

```
'prettier/prettier': [
      'warn',
      {
        arrowParens: 'always',
        semi: false,
        trailingComma: 'none',
        tabWidth: 2,
        endOfLine: 'auto',
        useTabs: false,
        singleQuote: true,
        printWidth: 120,
        jsxSingleQuote: true
      }
    ]
```
🥇Step 4 - Config Prettier to format the code

Create a .prettierrc file in the folder in the root directory with the content below

```
{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}
```
The purpose is prettier configuration. You should install Extension **Prettier - Code formatter** for VS Code so it can understand. Next Create a **.prettierignore **file in the root directory. The purpose is that Prettier ignores unnecessary files.
```
node_modules/
dist/
```

🥇Step 5 - Config editor to standardize editor configuration

Create an .editorconfig file in the root directory.The purpose is to configure configs to synchronize editors with each other if the project has many participants.For VS Code to understand this file, install the Extension EditorConfig for VS Code.

```
[*]
indent_size = 2
indent_style = space
```
🥇Step 6 - Configure alias for tsconfig.json

Adding an alias to the **tsconfig.json **file will help VS Code understand and automatically import for us.
Add this line to **compilerOptions** in file **tsconfig.json**

```
"baseUrl": ".",
"paths": {
  "~/*": ["src/*"]
}
```
The meaning of this paragraph is that we can import Login from '~/pages/Login' instead of import Login from '../../pages/Login'. Much shorter and easier to see!

🥇Step 7 - Configure alias for vite vite.config.ts

Install the** @types/node** package to use node js in the ts file without errors.

```
npm i @types/node -D
```

Configure alias and enable source map in file **vite.config.ts**

```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  css: {
    devSourcemap: true
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src')
    }
  }
})
```
🥇Step 8 - Update script for package.json

Open the **package.json** file, add the **script **below

```
"scripts": {
    //...
    "lint:fix": "eslint --fix src --ext ts,tsx",
    "prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.css|*.scss)\"",
    "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.css|*.scss)\""
}
```

🥇Command to run the project


That's it, to run in the dev environment, we will run it with the **npm run dev** command.

If you want to build, **npm run build**

- There are also some commands like.
- Preview the build results with the npm run preview command
- Check if the project has any errors related to ESLint: npm run lint.
- Automatically fix ESLint related errors (not everything can be fixed, but many can be fixed): npm run lint:fix
- Check if the project has any errors related to Prettier: npm run prettier.
- Automatically fix Prettier related errors: npm run prettier:fix.
Wishing you success!