Hạn chế sử dụng ../../../ khi import file trong react

Hạn chế sử dụng ../../../ khi import file trong react

[translate]No More ../../../ Import in React

Nghiêm Tiến Tuân's photo
Nghiêm Tiến Tuân
·

2 min read

Awesome

Bạn đã bao giờ sử dụng ../../../ khi import một file bất kỳ chưa trong dự án react chưa. Nó cũng khá tiện cho các IDE có thể di chuyển đến các file liên quan. Tuy nhiên khi nhìn thì nó sẽ kiểu dạng như sau:

import '../../../abc'
import '../defg'
import '../../../../../klm'

Hơi mất thẩm mĩ nhỉ. Chưa kể nếu IDE không hỗ trợ thì đọc mỏi mắt. Do vậy hôm nay mình chọn reup lại bài với nội dung này. Nếu có bất kì sai xót nào mong các bạn comment phía dưới. Cho một thế giới awesome hơn.

Nội dung

Các bước để cấu hình absolute Import trong Create React App mà không cần gói thứ ba nào. Bạn có đang sử dụng ../../../components để import file không? Bạn nên chuyển sang absolute Import.

Lợi ích của Absolute Import

  1. Bạn có thể chuyển nhanh sang code của file cần thiết
  2. Bạn có thể xác định dễ dàng nơi đặt các file cần thiết khi sử dụng import path.
  3. Code gọn gàng
  4. Viết đơn giản

Cách cấu hình Absolute Import

Để hỗ trợ Absolute Import, bạn cần tạo một file jsconfig.json tại thư mục gốc của dự án, với nội dụng sau:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Và bây giờ bạn có thể sử dụng đường dẫn absolute import trong dự án: Ví dụ: Lúc trước:

import React from 'react';
import Button from '../../components/Button';
import { red } from '../../utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;

Lúc sau khi sử dụng:

import React from 'react';
import Button from 'components/Button';
import { red } from 'utils/constants/colors';

function DangerButton(){
  return <Button color={red} />;
}

export default DangerButton;

Bạn có thấy gọn hơn và dễ hiểu hơn không.

Cấu hình trong JET Brains IDEs

Với các IDE JET Brains IDEs như Webstorm, PHP Storm, RubyMine, ... Chúng ta cần thêm một vài cấu hình bên dưới đây: Chuột phải vào thư mục src chọn Mark Directory as chọn Resource Root.

m8jz2ny1wh1jyz82zlad.jpeg

Tiếp theo, Preferences -> Editor -> Code Style -> JavaScript -> Imports, chọn Use paths relative to the project, resource or source roots và Apply.

a...png

VS Code

Với VS Code thì không cần phải cấu hình gì thêm, nó sẽ tự nhận biết file jsconfig.json.

Các nguồn

VS Code jsconfig.json JET Brains CodeStyle

Kết luận

Absolute Import làm cho thành phần dễ đọc và đơn giản hơn. Tôi hy vọng bạn đã tìm thấy điều này hữu ích. Cảm ơn bạn đã đọc.

Nguồn: dev.to/nilanth/no-more-import-in-react-2mbo

Reactmodulesfiles