เลิกใช้ ../../../ ในการ Import Components ได้แล้วมันไม่เท่!!!

โดยทั่วไปเราจะเห็นนักพัฒนา  Reactjs ทั้งหลายเวลาจะทำการ import components ที่ต้องการมาใช้ก็จะเรียกแบบนี้

import Button from "../../../components/Buttons/Button"

ซึ่งยิ่งอยู่ใน path ที่ลึกเข้าไปอีกก็จะต้องมา ../../../../../foo/bar หลาย ../ เยอะจัด มันจะดีกว่าไหมถ้าเราสามารถจะเรียก components ที่ต้องการได้เลย แบบนี้

import Button from "@/components/Buttons/Button"

โดยให้ @ เนี้ยมันแทนด้วย root project ของเราไปเลย เวลาเราอ่านก็จะง่ายขึ้น

วิธีการทำก็คือสร้างไฟล์ jsconfig.json ขึ้นมาใน root project แล้วกำหนดค่าประมาณนี้

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"],
      "@/utils/*": ["utils/*"]
    }
  },
}

ในค่าของ paths เรากำหนด @/foo/* ได้เลยว่าจะใช้กับ folder อะไรของเราบ้าง

เพียงแค่นี้เราก็จะ import components ต่างๆ ได้ง่ายแล้ว เท่ปะละ...