Setup React Typescript with Vite & ESLint

Setup React Typescript with Vite & ESLint

Vite 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!