Mở đầu

Việc xây dựng một base project chuẩn cho ReactJS + TypeScript ngay từ đầu sẽ giúp tiết kiệm thời gian, đồng bộ code, và dễ dàng mở rộng dự án về sau. Đặc biệt trong môi trường làm việc nhóm, một cấu trúc rõ ràng và các công cụ hỗ trợ phù hợp sẽ giúp tăng năng suất và chất lượng code.

Trong bài viết này, mình sẽ hướng dẫn cách tạo một base project hiệu quả, tích hợp các công cụ như ESLint, Prettier, Husky... để sẵn sàng cho mọi dự án thực tế.

Nội dung

Khởi tạo dự án

Để khởi tạo dự án mình sử dụng Vite vì hiệu suất tốt hơn. Bạn có thể tùy chọn công cụ quản lý thư viện phù hợp. Mình khuyến khích sử dụng pnpm.

NPM:

$ npm create vite@latest my-vue-app -- --template react-ts

YARN:

$ yarn create vite my-vue-app --template react-ts

PNPM:

$ pnpm create vite my-vue-app --template react-ts

Cấu trúc thư mục

Sau khi đã khởi tạo dự án, việc tiếp theo bạn cần làm là tiến hành tạo cấu trúc thư mục.

Nội dung và ý nghĩa của từng thư mục như sau:

|-- src/ |-- apis/ # Dùng để khởi tạo các api function |-- assets/ # Chứa các file tài nguyên (images, fonts, icons, etc.) |-- components/ # Chứa các components |-- constants/ # Chứa các file constant |-- types/ # Dùng để chứa các file định nghĩa type |-- hooks/ # Chứa hook custom |-- layouts/ # Chứa các layout component |-- pages/ # Chứa các trang của dự án |-- lib/ # Chứa các file config của thư viện bên ngoài |-- providers/ # Chứa các providers (theme, store, etc.) |-- schemas/ # Chứa các schemas validate ( zod, yup, ...) |-- stores/ # Quản lý state (Redux, MobX, etc.) |-- styles/ # Quản lý các css global hoặc thư viện scss |-- utils/ # Chứa các hàm dùng chung của dự án |-- App.tsx # Định nghĩa root file |-- routes.tsx # Định nghĩa router

Thiết lập & cấu hình công cụ hổ trợ

Prettier

Tiếp theo bạn cần cấu hình prettier - code formatter.

Install:
pnpm add --save-dev --save-exact prettier

Tạo file .prettierrc tại root folder, và thêm đoạn code sau:

{ "semi": true, "singleQuote": true, "tabWidth": 2, "useTabs": false, "printWidth": 80
}

Tạo file .prettierignore tại root folder, và thêm đoạn code sau:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies
/node_modules
/.pnp
.pnp.js # testing
/coverage # next.js
.next
/.next/
/out/ # production
/build # misc
.DS_Store
*.pem # debug
npm-debug.log*
yarn-debug.log*
yarn-error.log* # local env files
.env.local
.env.development.local
.env.test.local
.env.production.local # vercel
.vercel # changelog
CHANGELOG.md

ESLint

Tiếp theo bạn cần cấu hình Eslint - công cụ dùng để code formatter ( javascript ) cùng với báo cáo và hiển thị các lỗi về javascript.

Cài đặt các thư viện cần thiết:

 pnpm add --save-dev @typescript-eslint/eslint-plugin pnpm add --save-dev @typescript-eslint/parser pnpm add --save-dev eslint-plugin-import pnpm add --save-dev eslint-plugin-react

Nếu như ở bước khởi tạo Vite đã cấu hình sẵn Eslint thì bạn chỉ cần đổi tên và chỉnh sửa nội dung lại file .eslintrc.cjs và thêm đoạn code như sau:

module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', ], ignorePatterns: ['dist', '.eslintrc.cjs'], parser: '@typescript-eslint/parser', plugins: ['react', 'react-refresh', 'import'], rules: { 'react/self-closing-comp': 'error', 'no-console': ['warn', { allow: ['warn', 'error'] }], 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': [ 'warn', { argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_', varsIgnorePattern: '^_', }, ], 'import/order': [ 'error', { groups: [ 'builtin', 'external', 'internal', ['parent', 'sibling'], 'index', ], pathGroups: [ { pattern: '@/**', group: 'internal', }, ], 'newlines-between': 'always', }, ], },
};

VSCode

Tiếp theo, bạn cần cấu hình lại VSCode một chút.

Tạo file .vscode/settings.json tại thư mục root ngang cấp với /src, và thêm đoạn code setting sau:

{ "editor.defaultFormatter": "esbenp.prettier-vscode", // Cài đặt formatter là prettier "editor.formatOnSave": true, // Cài đặt khi lưu code ( Ctrl + S ) sẽ tự động thực thi prettier "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" // Cài đặt khi lưu code ( Ctrl + S ) sẽ tự động thực thi eslint }
}

Husky & Lint-staged

Tiếp theo bạn cần cấu hình Husky - công cụ tự động thực hiện lệnh nào đó trước khi thực hiện git commit. Chỉ khi lệnh đó thực thi thành công thì git commit mới được chạy. Điều này giúp cho các thành viên trong dự án đều phải tuân thủ các convention code mà dự án đã đề ra trước khi push commit code.

Mở terminal tại folder root dự án và chạy lệnh sau:

// Cài đặt husky:
pnpm add --save-dev husky
pnpm exec husky init // Cài đặt lint-staged:
pnpm add --save-dev lint-staged

Tiếp theo, mở file /.husky/pre-commit thay thế đoạn code sau:

pnpm lint-staged

Sau đó mở package.json thêm đoạn code này vào. Lint-staged sẽ thực thi các script cho những file đang chỉnh sửa thay vì chạy trên toàn bộ dự án.

"lint-staged": { "*.{ts,tsx}": [ "pnpm lint:fix", "pnpm format", "git add ." ] }

Như đoạn code trên, khi bạn chạy script pnpm lint-staged thì các lệnh pnpm lint:fix pnpm format git add . sẽ được thực thi lần lượt trên các file có đuôi ts,tsx mà bạn đang chỉnh sửa.

Cấu hình script

Tiếp theo, bạn cần thêm các script để chạy các tool prettier, eslint, husky,lint-staged đã cấu hình trước đó.

Thêm đoạn code sau vào scripts của file package.json

 "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", // Dùng để kiểm tra các lỗi về eslint hiện có trên toàn bộ file dự án có đuôi là ts,tsx "lint:fix": "pnpm lint --fix", // Dùng để kiểm tra và fix những lỗi về eslint mà tool có thể tự động fix được "format": "prettier --write \"src/**/*.{ts,tsx}\"", // Dùng để kiểm tra và fix những lỗi về format code

Cấu hình Vite

Mình cần cấu hình lại Vite 1 chút để có thể sử dụng được alias path và svg file.

Tại file vite.config.ts bạn thay thế bằng đoạn code sau:

Lưu ý: Các thư viện nào chưa có bạn install về nhé~!

import path from 'path'; import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
import checker from 'vite-plugin-checker'; export default defineConfig({
plugins: [ react(), svgr(), checker({ typescript: true, eslint: { lintCommand: 'eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0', }, }),
],
resolve: { alias: { '@': path.resolve(__dirname, './src/'), },
},
});

Tiếp theo, tại file src/vite-env.d.ts bạn thêm dòng code sau:

/// <reference types="vite-plugin-svgr/client" />

Cài đặt thư viện

Bước cuối cùng bạn cần cài đặt và cấu hình cho các thư viện cần thiết cho dự án, dưới đây là một số thư viện mà bạn nên cài:

• axios
• date-fns
• lodash
• react-hook-form
• zod
• react-router-dom

Ngoài ra, tùy thuộc vào từng dự án mà bạn sẽ chọn các thư viện về CSS ( tailwindcss, MUI, Antd,...), quản lý state ( redux, zustand,...) và i18n khác nhau.

Tổng kết

Việc xây dựng một base project chuẩn chỉnh không chỉ giúp bạn tiết kiệm thời gian trong giai đoạn khởi tạo mà còn đặt nền móng vững chắc cho sự phát triển lâu dài của dự án. Với những cấu hình và công cụ đã đề cập như ESLint, Prettier, Husky... bạn sẽ dễ dàng duy trì chất lượng code, giảm thiểu lỗi vặt, và tăng hiệu suất cho team.

Nếu bạn cần source code đầy đủ của project base reactjs + typescript chuẩn thì hãy để lại bình luận ở dưới.!!!!