TheLazy.Dev
Portfolio GitHub

Blog

javascript |react |vite |typescript

Setup React Typescript with Vite & ESLint

phongphanq089

phong phan

Posted on April 26, 2024

Setup React Typescript with Vite & ESLint

Setup React Typescript with Vite & ESLint

Image description
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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

with yarn

yarn create vite
Enter fullscreen mode Exit fullscreen mode

with PNPM

pnpm create vite
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Next is to choose Framework

✔ Select a framework: › React
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Next is the folder just created by Vite

cd react-app
Enter fullscreen mode Exit fullscreen mode

Install packages

npm i
Enter fullscreen mode Exit fullscreen mode

🥇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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

Add the following code to the extends array

'eslint-config-prettier', 'prettier'
Enter fullscreen mode Exit fullscreen mode

Add the following code to the plugins array

'prettier'
Enter fullscreen mode Exit fullscreen mode

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
      }
    ]
Enter fullscreen mode Exit fullscreen mode

🥇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
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

🥇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
Enter fullscreen mode Exit fullscreen mode

🥇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/*"]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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')
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

🥇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)\""
}
Enter fullscreen mode Exit fullscreen mode

🥇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!
💖 💪 🙅 🚩
phongphanq089
phong phan

Posted on April 26, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Setup React Typescript with Vite & ESLint
javascript Setup React Typescript with Vite & ESLint

April 26, 2024