Absolute import & path aliases untuk path yang lebih oke
Published: 2024-01-23 06:09:42

## 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:

```json
{
  "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`:

```json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}
```

## Mengubah Relative ke Absolute Imports
Setelah dikonfigurasi, perbarui pernyataan import dengan menghapus `../../../`:

Sebelum:
```javascript
import MyComponent from '../../../components/MyComponent';
```

Setelah:
```javascript
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:

```json
// 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](https://create-react-app.dev/docs/importing-a-component/#:~:text=Absolute%20Imports%E2%80%8B&text=This%20can%20be%20done%20by,will%20already%20have%20a%20tsconfig.)
2. [Configuring the Style of Imports in JavaScript and TypeScript](https://blog.jetbrains.com/webstorm/2020/07/configuring-the-style-of-imports-in-javascript-and-typescript/)
3. [Auto import in Visual Studio Code only offering absolute path with Lerna subpackage](https://stackoverflow.com/questions/52432191/auto-import-in-visual-studio-code-only-offering-absolute-path-with-lerna-subpack)
4. [Making Life Easier with Absolute Imports - React in JavaScript and TypeScript](https://medium.com/geekculture/making-life-easier-with-absolute-imports-react-in-javascript-and-typescript-bbdab8a8a3a1)
5. [React with JetBrains WebStorm auto import with absolute path instead of relative](https://stackoverflow.com/questions/46489075/react-with-jetbrains-webstorm-auto-import-with-absolute-path-instead-of-relative)
6. [Using absolute imports with VSCode and create-react-app](https://medium.com/@fpastorelima/using-absolute-imports-with-vscode-and-create-react-app-dec6ba0da7ed)