Setup React Typescript with Vite & ESLint

🥇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

🥇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: code formatter main
• 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 eslint.config.js file
Add this value to the ignores array, the purpose is that I do not want ESLint to check the vite.config.ts file

'vite.config.ts'

You import this at the beginning of the eslint.config.js file

import eslintPluginPrettier from 'eslint-plugin-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 mail 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

Mục đích là Prettier bỏ qua các file không cần thiết

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. Note this is for help only.

Add this to compilerOptions in the tsconfig.json file

"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

nstall 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 vite.config.ts file

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