🔥Giảm 30% khóa học ReactJs Super (Hiện đang ở vị trí Top 1 Google Việt Nam 🇻🇳)

Setup React Typescript với Vite & ESLint

🎉 Anh em mà muốn rút ngắn 2 năm học và làm React.Js để có mức lương 25 - 30 triệu/tháng thì mình recommend khóa 🏆 React.Js Super của mình

Hiện tại đang được xếp hạng Top 1 Google Việt Nam với từ khóa "Khóa ReactJs" hoặc "Khóa học ReactJs"

Tìm khắp 🇻🇳 và cả 🌍 ngoài kia không có khóa nào chất lượng được như thế này đâu😉

Lần trước mình có hướng dẫn mọi người về cách setup một dự án React từ A-Z bằng Webpack & Typescript & Babel & ESLint & Prettier rồi. Hôm nay mình sẽ hướng dẫn mọi người làm với Vite nhé.

Vite dạo gần đây đang là xu hướng, vì cách setup đơn giản và tốc độ thực thi nhanh hơn nhiều so với Webpack.


🥇Cấu trúc thư mục ReactJs Vite

Dưới đây là cấu trúc thư mục hoàn chỉnh của dự án ReactJs Typescript Vite ESLint Prettier

txt
📦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
  • Thư mục dist: Thư mục chứa các file build
  • Thư mục public: Chứa file index.html và các file liên quan như favicon.ico, robots.txt,...
  • Thư mục src: Chứa mã nguồn chính của chúng ta
  • Thư mục src/assets: Chứa media, css (file App.cssindex.css ở trên mình để nguyên xi khi mới tạo, anh em có thể đưa vào assets/styles cho gọn nhé), fonts
  • Còn lại những file config sẽ được mình giới thiệu ở những phần dưới

🥇Bước 1 - Khởi tạo dự án Vite

Vite yêu cầu Node version 14.18+, 16+ để có thể hoạt động ổn định. Tuy nhiên một số template yêu cầu version cao hơn, vậy nên nếu nó warning thì anh em update nodejs lên version cao hơn nhé.

Các bạn có thể dùng npm hoặc yarn hoặc pnpm đều được, ở đây mình dùng npm cho đơn giản.

Với npm

bash
npm create vite@latest

Với Yarn

bash
yarn create vite

Với PNPM

bash
pnpm create vite

Sau khi chạy thì nó sẽ yêu cầu nhập tên dự án

bash
Need to install the following packages:
create-vite@4.1.0
Ok to proceed? (y) y
✔ Project name: … react-app

Tiếp theo là chọn Framework

bash
✔ Select a framework: › React

Chọn template, ở đây mình chọn TypeScript + SWC, SWC sẽ thay thế Babel cho việc biên dịch code Typescript/Javascript. SWC có tốc độ nhanh hơn 20 lần khi so với Babel

bash
✔ Select a variant: › TypeScript + SWC

Tiếp theo là thư mục vừa được Vite tạo

bash
cd react-app

Cài đặt các package

bash
npm i

🥇Bước 2 - Cài các package ESLint và Prettier

Chạy câu lệnh sau

bash
npm i eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-prettier eslint-plugin-react-hooks eslint-import-resolver-typescript -D

Đây là những thứ chúng ta cài

  • eslint: linter (bộ kiểm tra lỗi) chính

  • prettier: code formatter chính

  • @typescript-eslint/eslint-plugin: ESLint plugin cung cấp các rule cho Typescript

  • @typescript-eslint/parser: Parser cho phép ESLint kiểm tra lỗi Typescript.

  • eslint-config-prettier: Bộ config ESLint để vô hiệu hóa các rule của ESLint mà xung đột với Prettier.

  • eslint-plugin-import: Để ESLint hiểu về cú pháp import... trong source code.

  • eslint-plugin-jsx-a11y: Kiểm tra các vấn đề liên quan đến accessiblity (Tính thân thiện website, ví dụ cho thiết bị máy đọc sách).

  • eslint-plugin-react: Các rule ESLint cho React

  • eslint-plugin-prettier: Dùng thêm 1 số rule Prettier cho ESLint

  • eslint-plugin-react-hooks: ESLint cho React hook

  • eslint-import-resolver-typescript: Dùng để ESLint hiểu mấy cái cấu hình alias typescript của chúng ta


🥇Bước 3 - Config ESlint để chuẩn hóa code

Tạo file .eslintrc.cjs tại thư mục root với nội dung như dưới đây

js
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
module.exports = {
extends: [
// Chúng ta sẽ dùng các rule mặc định từ các plugin mà chúng ta đã cài.
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:import/recommended',
'plugin:import/typescript',
'plugin:jsx-a11y/recommended',
'plugin:@typescript-eslint/recommended',
// Disable các rule mà eslint xung đột với prettier.
// Để cái này ở dưới để nó override các rule phía trên!.
'eslint-config-prettier',
'prettier'
],
plugins: ['prettier'],
settings: {
react: {
// Nói eslint-plugin-react tự động biết version của React.
version: 'detect'
},
// Nói ESLint cách xử lý các import
'import/resolver': {
node: {
paths: [path.resolve(__dirname, '')],
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
typescript: {
project: path.resolve(__dirname, './tsconfig.json')
}
}
},
env: {
node: true
},
rules: {
// Tắt rule yêu cầu import React trong file jsx
'react/react-in-jsx-scope': 'off',
// Cảnh báo khi thẻ <a target='_blank'> mà không có rel="noreferrer"
'react/jsx-no-target-blank': 'warn',
// Tăng cường một số rule prettier (copy từ file .prettierrc qua)
'prettier/prettier': [
'warn',
{
arrowParens: 'always',
semi: false,
trailingComma: 'none',
tabWidth: 2,
endOfLine: 'auto',
useTabs: false,
singleQuote: true,
printWidth: 120,
jsxSingleQuote: true
}
]
}
}

Tạo file .eslintignore để giúp eslint bỏ qua những file không cần thiết

text
node_modules/
dist/

🥇Bước 4 - Config Prettier để format code

Tạo file .prettierrc trong thư trong thư mục root với nội dung dưới đây

json
{
"arrowParens": "always",
"semi": false,
"trailingComma": "none",
"tabWidth": 2,
"endOfLine": "auto",
"useTabs": false,
"singleQuote": true,
"printWidth": 120,
"jsxSingleQuote": true
}

Mục đích là cấu hình prettier. Anh em nên cài Extension Prettier - Code formatter cho VS Code để nó hiểu nhé.

Tiếp theo Tạo file .prettierignore ở thư mục root

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

ignore
node_modules/
dist/

🥇Bước 5 - Config editor để chuẩn hóa cấu hình editor

Tạo file .editorconfig ở thư mục root

Mục đích là cấu hình các config đồng bộ các editor với nhau nếu dự án có nhiều người tham gia.

Để VS Code hiểu được file này thì anh em cài Extension là EditorConfig for VS Code nhé

editorconfig
[*]
indent_size = 2
indent_style = space

🥇Bước 6 - Cấu hính alias cho tsconfig.json

Việc thêm alias vào file tsconfig.json sẽ giúp VS Code hiểu mà tự động import giúp chúng ta. Lưu ý cái này chỉ giúp

Thêm đoạn này vào compilerOptions trong file tsconfig.json

Ý nghĩa của đoạn này là ta có thể import Login from '~/pages/Login' thay vì import Login from '../../pages/Login'. Ngắn gọn và dễ nhìn hơn nhiều!

json
"baseUrl": ".",
"paths": {
"~/*": ["src/*"]
}

Cuối cùng ta có thành quả như thế này

json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"~/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

🥇Bước 7 - Cấu hình alias cho vite vite.config.ts

Cài package @types/node để sử dụng node js trong file ts không bị lỗi

bash
npm i @types/node -D

Cấu hình alias và enable source map ở file vite.config.ts

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')
}
}
})

🥇Bước 8 - Cập nhật script cho package.json

Mở file package.json lên, thêm đoạn script dưới vào

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

🥇Câu lệnh để chạy dự án

Đến đây là xong rồi đó, để chạy trong môi trường dev thì chúng ta sẽ chạy bằng câu lệnh npm run dev.

Nếu muốn build thì npm run build

Ngoài ra còn có một số câu lệnh như

  • Preview kết quả build bằng câu lệnh npm run preview
  • Kiểm tra dự án có bị lỗi gì liên quan ESLint không: npm run lint
  • Tự động fix các lỗi liên quan ESLint (không phải cái gì cũng fix được, nhưng fix cũng nhiều): npm run lint:fix
  • Kiểm tra dự án có bị lỗi gì liên quan Prettier không: npm run prettier
  • Tự động fix các lỗi liên quan Prettier: npm run prettier:fix

Chúc các bạn thành công nhen!


Khóa học ReactJs giúp bạn chinh phục mức lương 25 - 30 triệu/tháng

Phew! Cuối cùng bạn cũng đã đọc xong. Bài viết này có hơi dài một tí vì mình muốn nó đầy đủ nhất có thể 😅

Chúng ta đều hiểu rằng Javascript và React không hề dễ, chúng có quá nhiều concept cần phải học. Mình cũng cảm thấy nó khó! Nay lại có thể Typescript nữa 🥲, thật sự khó nuốt.

Nhưng đừng lo: Bạn có thể nắm vững các kiến thức trên chỉ trong một khóa học ReactJs Super - Shopee Clone Typescript

Mình đã bắt đầu code React vào năm 2019, và nó đã trở thành thư viện ưa thích của mình để xây dựng UI và web app. Mình cũng đã làm việc với nhiều framework khác như Angular, Vue nhưng thực sự chỉ có React là đem lại cho mình cảm xúc và sự hiệu quả. 💓

Nếu bạn đang gặp khó khăn với React, mình ở đây để giúp bạn!

Mình đã dành hơn 6 tháng để phát triển khóa học ReactJs Super - Shopee Clone Typescript. Trong khóa này bạn sẽ được học mọi thứ về thư viện ReactJs, các kiến thức từ cơ bản cho đến nâng cao nhất, mục đích của mình là giúp bạn chinh phục mức lương 25 - 30 triêu/tháng

Nếu bạn cảm thấy bài viết này của mình hữu ích, mình nghĩ bạn sẽ thích hợp với phong cách dạy của mình. Không như bài viết này, khóa học là sự kết hợp giữa các bài viết, video, quizz, bài tập nhỏ và dự án lớn có thể xin việc được ngay. Học xong mình đảm bảo bạn sẽ lên tay ngay. 💪🏻

Avatar Dư Thanh Được
Dư Thanh Được
Một developer thích nghiên cứu và chia sẻ kiến thức về lập trình, blockchain, marketing. Chuyên code và dạy lập trình website