jsonfig/tsconfig compilerOptions - Rút ngắn import paths cho dự án React

Trong bài viết này chúng ta sẽ cùng tìm hiểu cách rút gọn path (đường dẫn) bằng cách sử dụng jsconfig.json với JavaScript hoặc tsconfig.json nếu project của bạn sử dụng TypeScript nhé!

Trong quá trình sử dụng React, các bạn import một file từ một folder, có thể chúng ta sẽ thấy quen thuộc với hình ảnh rất nhiều "../../../" như dưới đây 😯.

// src/utils/functions
import { randomNumber } from '../../../utils/functions.js';

Cách import này nhìn khá dài và cũng mất chút ít thời gian, nên trong bài viết này chúng ta cùng tìm hiểu một cách import nhìn OK hơn nhé ^^.

Với React, chúng ta sử dụng jsconfig.json và thêm nội dung này vào, nếu dùng TypeScript thì các bạn sử dụng tsconfig.json nhé. Thông thường file này nằm ở thư mục gốc của project nếu chưa có thì các bạn tạo mới nhé.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  // ...
}

Vì folder utils nằm trong folder src và baseUrl là src nên bạn có thể import như sau:

// src/utils/functions
import { randomNumber } from 'utils/functions.js';
// src/components/Profile/Profile.js
import Profile from 'components/Profile/Profile.js'

Với cách này, có thể thấy là việc import khá dễ dàng và dễ nhìn hơn đúng không 😁.