Absolute import & path aliases untuk path yang lebih oke

Absolute Import

Absolute Import pada Create React App v3 menawarkan beberapa manfaat, membuat organisasi dan pemeliharaan kode menjadi lebih efisien:

Manfaat

1. Sederhana pada Path Import:
   • Tidak perlu lagi menggunakan ../../../ dalam pernyataan import, menghasilkan kode yang lebih bersih dan mudah dibaca.
2. Portabilitas Kode:
   • Salin/duplikat kode dari satu komponen ke komponen lain tanpa memodifikasi path import.
3. Pemetaan File yang Ditingkatkan:
   • Mudah menemukan file atau komponen yang diimpor karena posisi absolut.
4. Kode yang Lebih Bersih:
   • Berkontribusi pada basis kode yang lebih bersih dan terorganisir.
5. Peningkatan Penulisan Kode:
   • Memudahkan penulisan kode yang lebih mudah dan efisien.

Memulai

Untuk mengaktifkan absolute imports dalam proyek Create React App, ikuti langkah-langkah berikut:

Untuk Proyek JavaScript (JS):

1. Buat file jsconfig.json di root proyek.
2. Konfigurasi file dengan konten berikut:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Untuk Proyek TypeScript (TS):

1. Jika belum ada, temukan dan modifikasi file tsconfig.json.
2. Tambahkan atau perbarui pengaturan baseUrl di dalam compilerOptions:

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

Mengubah Relative ke Absolute Imports

Setelah dikonfigurasi, perbarui pernyataan import dengan menghapus ../../../:

Sebelum:

import MyComponent from '../../../components/MyComponent';

Setelah:

import MyComponent from 'components/MyComponent';

Konfigurasi Editor Kode

WebStorm:

1. Klik kanan pada folder src, tandai sebagai Resource Root.
2. Buka Preferences -> Editor -> Code Style -> JavaScript -> Imports, dan centang "Use paths relative to the project, resource, or source roots."

VS Code:

Tidak ada konfigurasi manual yang diperlukan; ini secara otomatis membaca pengaturan dari jsconfig.json atau tsconfig.json.

Konfigurasi ESLint

Pastikan ESLint mengenali path absolut:

// Konfigurasi ESLint
{
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}

Apakah Ini Layak?

Meskipun ada situasi di mana import relatif membuat sense, manfaat dari absolute imports, seperti peningkatan kejelasan dan kebersihan, seringkali lebih besar daripada kerugiannya. Pertimbangkan kebutuhan proyek sebelum membuat keputusan.

Kesimpulan

Absolute imports meningkatkan organisasi dan pemeliharaan kode dalam proyek React. Konfigurasikan proyek dan editor kode Anda sesuai untuk sepenuhnya memanfaatkan keuntungannya.

🌐 Sumber

1. Create React App - Importing a Component
2. Configuring the Style of Imports in JavaScript and TypeScript
3. Auto import in Visual Studio Code only offering absolute path with Lerna subpackage
4. Making Life Easier with Absolute Imports - React in JavaScript and TypeScript
5. React with JetBrains WebStorm auto import with absolute path instead of relative
6. Using absolute imports with VSCode and create-react-app