Kenapa Kamu Harus Bikin Ekstensi VS Code Sendiri?

Visual Studio Code sudah jadi editor favorit banyak developer Indonesia. Tapi pernah nggak kamu merasa ada fitur kecil yang kurang? Mungkin shortcut untuk generate boilerplate, atau snippet khusus untuk framework yang kamu pakai. Daripada menunggu update dari pihak ketiga, kenapa nggak buat sendiri?

Membuat ekstensi VS Code nggak sesulit yang dibayangkan. Kamu cukup menguasai JavaScript/TypeScript dan punya ide yang jelas. Di artikel ini, kita akan bikin ekstensi sederhana yang otomatis menyisipkan timestamp saat kamu menekan shortcut tertentu. Cocok untuk yang suka logging atau catatan kode.

Persiapan: Apa yang Kamu Butuhkan?

• Node.js (versi terbaru LTS)
• VS Code (tentu saja)
• Yeoman dan VS Code Extension Generator: Alat scaffolding untuk memulai proyek.
• Pengetahuan dasar TypeScript: Ekstensi biasanya ditulis dalam TypeScript, tapi JavaScript juga bisa.

Install Yeoman dan generator:

npm install -g yo generator-code

Langkah 1: Membuat Proyek Ekstensi Baru

Jalankan perintah berikut di terminal:

yo code

Kamu akan disuguhi beberapa pilihan. Pilih New Extension (TypeScript). Isi detail seperti nama ekstensi, identifier, deskripsi, dan lainnya. Untuk contoh ini, kita beri nama timestamp-inserter.

Setelah selesai, buka folder yang dihasilkan dengan VS Code. Kamu akan melihat struktur seperti ini:

timestamp-inserter/
├── .vscode/
├── src/
│   └── extension.ts
├── package.json
├── tsconfig.json
└── ...

Langkah 2: Mengenal Struktur Dasar Ekstensi

File utama adalah src/extension.ts. Di sinilah logika ekstensi ditempatkan. Secara default, sudah ada skeleton yang mengaktifkan perintah helloworld. Kita akan modifikasi sesuai kebutuhan.

Di dalam package.json, ada bagian contributes yang mendefinisikan perintah, shortcut, menu, dll. Misalnya:

{
  "contributes": {
    "commands": [
      {
        "command": "timestamp-inserter.insertTimestamp",
        "title": "Insert Timestamp"
      }
    ],
    "keybindings": [
      {
        "command": "timestamp-inserter.insertTimestamp",
        "key": "ctrl+alt+t",
        "mac": "cmd+alt+t"
      }
    ]
  }
}

Artinya kita mendaftarkan perintah Insert Timestamp dengan shortcut Ctrl+Alt+T (Windows/Linux) atau Cmd+Alt+T (Mac).

Langkah 3: Menulis Kode Extension

Sekarang, edit src/extension.ts agar perintah tersebut menyisipkan timestamp ke dalam dokumen aktif.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('timestamp-inserter.insertTimestamp', () => {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
      vscode.window.showErrorMessage('Tidak ada editor yang aktif');
      return;
    }

    const timestamp = new Date().toISOString();
    editor.edit((editBuilder) => {
      editBuilder.insert(editor.selection.active, timestamp);
    });
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

Kode ini mengambil posisi kursor saat ini dan menyisipkan string timestamp ISO.

Langkah 4: Menguji Ekstensi Secara Lokal

Untuk menguji, tekan F5 di VS Code. Ini akan membuka jendela baru yang menjalankan Extension Development Host. Di jendela itu, buka file apa pun dan tekan Ctrl+Alt+T. Timestamp akan muncul di posisi kursor.

Jika ingin menambahkan format timestamp lain, kamu bisa menggunakan library seperti moment atau date-fns. Tapi untuk contoh ini, kita cukupkan dengan toISOString().

Langkah 5: Menambahkan Fitur Tambahan

Agar lebih berguna, kita bisa menambahkan opsi untuk memilih format timestamp. Gunakan vscode.window.showQuickPick untuk menampilkan pilihan:

const formats = [
  { label: 'ISO 8601', value: () => new Date().toISOString() },
  { label: 'Local String', value: () => new Date().toLocaleString() },
  { label: 'Unix Timestamp', value: () => Math.floor(Date.now() / 1000).toString() },
];

const selected = await vscode.window.showQuickPick(formats, { placeHolder: 'Pilih format timestamp' });
if (selected) {
  editor.edit((editBuilder) => {
    editBuilder.insert(editor.selection.active, selected.value());
  });
}

Jangan lupa ubah fungsi registerCommand menjadi async.

Langkah 6: Mempublikasikan Ekstensi

Jika ekstensi sudah siap, kamu bisa mempublikasikannya ke VS Code Marketplace. Pertama, install vsce:

npm install -g vsce

Kemudian buat akun Publisher di Visual Studio Marketplace dan dapatkan Personal Access Token. Setelah itu:

vsce package
vsce publish

Ekstensi kamu akan tersedia untuk diinstall oleh siapa pun.

Tips untuk Developer Indonesia

• Gunakan Bahasa Indonesia di deskripsi ekstensi jika targetnya developer lokal. Ini bisa meningkatkan discoverability.
• Manfaatkan snippet untuk framework populer seperti Laravel, React, atau Vue. Banyak developer Indonesia yang menggunakannya.
• Perhatikan performa, terutama jika ekstensi melakukan kalkulasi berat. Kamu bisa belajar optimasi dengan Web Workers untuk meningkatkan responsivitas.
• Integrasikan dengan layanan eksternal seperti REST API. Artikel tentang membuat REST API ringan dengan Hono dan Prisma bisa jadi referensi jika ekstensimu butuh backend.

Kesimpulan

Membuat ekstensi VS Code adalah cara keren untuk berkontribusi ke ekosistem dan memecahkan masalah pribadi. Mulai dari yang sederhana seperti inserter timestamp, lalu kembangkan ke fitur yang lebih kompleks seperti integrasi API atau theming. Jangan ragu untuk bereksperimen!

Sudah siap bikin ekstensi sendiri? Coba sekarang dan bagikan ke teman-teman developer Indonesia. Siapa tahu jadi populer!