Mulai menggunakan ekstensi Looker untuk VS Code

The Ekstensi Looker untuk VS Code memungkinkan Anda mengembangkan LookML langsung dalam lingkungan desktop lokal. Ekstensi ini menyediakan penyorotan sintaksis yang lengkap, sinkronisasi file dua arah dengan instance Looker, dan integrasi dengan agen coding AI untuk "coding vibe".

Ekstensi ini dibuat menggunakan framework Visual Studio Code (VS Code), dan mendukung lingkungan pengembangan terintegrasi (IDE) yang didasarkan pada VS Code IDE, seperti IDE dan alat coding berikut:

  • Claude Code
  • Codex
  • Kursor
  • Kiro
  • VS Code
  • Windsurf
  • Zed

IDE yang bukan fork VS Code, seperti IntelliJ dan Eclipse, tidak didukung oleh ekstensi Looker untuk VS Code.

Panduan ini membahas cara menyiapkan dan mengautentikasi ekstensi.

Alur kerja yang mendukung AI

Ekstensi Looker untuk VS Code adalah bagian dari alur kerja pengembangan agentik yang mendukung AI untuk mengedit dan membuat file LookML. Untuk mengaktifkan alur kerja ini, konfigurasikan alat berikut:

  • Ekstensi Looker untuk VS Code.
  • IDE lokal yang didasarkan pada VS Code. IDE harus berisi agen AI bawaan (misalnya, Kursor), atau, jika IDE tidak berisi agen AI bawaan (seperti VS Code dasar), IDE harus diintegrasikan dengan alat agentik mandiri (seperti Gemini CLI atau Claude Code). Lihat dokumentasi IDE lokal Anda untuk mengetahui cara menghubungkan IDE ke agen.
  • **Server MCP** , seperti server MCP yang dikelola Looker.

Untuk mempelajari alur kerja yang mendukung AI lebih lanjut, lihat halaman dokumentasi Pengembangan yang dibantu AI (coding vibe) dengan Looker.

Sebelum memulai

Sebelum menginstal ekstensi, Anda harus memenuhi persyaratan berikut:

  • Menghubungkan ke alat AI: Jika Anda berencana menggunakan pengembangan yang dibantu AI, hubungkan IDE dan agen AI Anda ke server MCP yang dikelola Looker. Penyiapan dan contoh konfigurasi muncul di halaman dokumentasi server MCP yang dikelola Looker. Lihat dokumentasi alat Anda untuk mengetahui detail tambahan.
  • Izin Looker: Anda harus memiliki izin Looker develop untuk model apa pun yang ingin Anda edit.
  • Instance Looker: Instance Anda harus menjalankan Looker 26.6 atau yang lebih baru.
  • Penginstalan Git: Anda harus menginstal Git di komputer lokal untuk meng-clone dan mengelola repositori LookML.
  • Konfigurasi project: Project LookML Anda harus dikonfigurasi untuk Git.
  • Client ID OAuth: Jika Anda menggunakan autentikasi OAuth (direkomendasikan), Anda harus mendapatkan Client ID OAuth dari admin Looker.

Penyiapan admin

Jika organisasi Anda menggunakan OAuth untuk autentikasi, admin Looker harus mendaftarkan ekstensi Looker untuk VS Code sebagai klien OAuth di UI Admin Looker.

Gunakan Looker API Explorer untuk menyiapkan integrasi OAuth. Anda dapat mengakses API Explorer menggunakan salah satu metode berikut:

API Explorer terinstal

Jika instance Looker Anda sudah menginstal API Explorer, Anda dapat mengaksesnya dengan format URL ini:

LOOKER_INSTANCE_URL/extensions/marketplace_extension_api_explorer::api-explorer/

API Explorer tidak terinstal

Jika instance Looker Anda tidak memiliki API Explorer, Anda dapat menginstalnya dari Looker Marketplace. Lihat halaman Menggunakan API Explorer untuk mengetahui informasi tentang cara menginstal API Explorer.

Instance pribadi PSA

Jika Anda menggunakan instance koneksi pribadi Looker (Google Cloud core) yang menggunakan akses layanan pribadi, Looker Marketplace dan API Explorer tidak didukung. Untuk mendaftarkan agen AI, Anda harus memanggil endpoint API oauth_client_apps secara langsung. Jika menggunakan metode ini, Anda dapat melewati langkah-langkah prosedur API Explorer ini yang tersisa.

Berikut adalah contoh perintah curl yang dapat Anda gunakan dengan endpoint oauth_client_apps untuk mendaftarkan agen.

curl -X POST "https://LOOKER_INSTANCE_URL/api/4.0/oauth_client_apps/CLIENT_GUID" \
-H "Authorization: token ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "redirect_uri": "REDIRECT_URI",
  "display_name": "CLIENT_NAME",
  "description": "OAuth client to access MCP server using CLIENT_NAME",
  "enabled": true
}'

Untuk mendaftarkan ekstensi, selesaikan langkah-langkah berikut:

  1. Ikuti petunjuk dalam dokumentasi Mendaftarkan aplikasi klien OAuth untuk mendaftarkan ekstensi.

  2. Untuk kolom client_guid, selesaikan langkah-langkah berikut:

    • Gunakan ID unik global.
    • Siap untuk mendistribusikan ID ke developer LookML mana pun yang ingin menggunakan ekstensi.

  3. Untuk redirect_uri, masukkan URL callback untuk IDE Anda. Bergantung pada IDE atau alat coding Anda, gunakan salah satu URL callback berikut:

    IDE atau alat URL callback
    VS Code 
    vscode://google.vscode-looker-official/oauth_callback
    Antigravity 
    antigravity://google.vscode-looker-official/oauth_callback
    Code-OSS 
    code-oss://google.vscode-looker-official/oauth_callback
    Kursor 
    cursor://google.vscode-looker-official/oauth_callback
    HTTPS 
    https://google.vscode-looker-official/oauth_callback
    Looker 
    looker://google.vscode-looker-official/oauth_callback
    Windsurf 
    windsurf://google.vscode-looker-official/oauth_callback

  4. Lengkapi display_name dan description seperti yang dijelaskan dalam dokumentasi Mendaftarkan aplikasi klien OAuth.

Setelah aplikasi terdaftar, API Explorer akan menampilkan respons dengan ringkasan pendaftaran. Anda dapat menggunakan endpoint Get OAuth Client App dengan client_guid untuk meninjau detail pendaftaran.

Berikan client_guid yang dihasilkan kepada developer Anda; mereka akan menggunakannya saat mengonfigurasi ekstensi.

Menginstal ekstensi

Selesaikan langkah-langkah berikut untuk menginstal ekstensi:

  1. Instal ekstensi Looker untuk VS Code dari Visual Studio Marketplace.
  2. Buka IDE Anda, seperti VS Code atau Kursor.
  3. Klik ikon Extensions di Activity Bar.
  4. Temukan Looker extension for VS Code , lalu klik Install.
  5. Setelah ekstensi diinstal, ikon Looker akan muncul di Activity Bar.

Mengonfigurasi ekstensi

Anda dapat mengonfigurasi ekstensi dengan detail instance Looker di file settings.json ruang kerja, editor Setelan VS Code visual (Preferences: Open Workspace Settings), atau UI orientasi interaktif ekstensi Looker.

Langkah-langkah berikut menunjukkan cara mengedit file settings.json sebagai contoh. Jika Anda menggunakan editor Setelan VS Code atau UI ekstensi Looker, Anda akan mendapatkan hasil yang sama.

  1. Dengan ruang kerja terbuka, buka Command Palette (Command-Shift-P di Mac atau Ctrl+Shift+P di Windows/Linux).
  2. Cari dan pilih Preferences: Open Workspace Settings (JSON).
  3. Tambahkan variabel konfigurasi ke setelan Anda. Variabel konfigurasi akan bervariasi bergantung pada apakah metode autentikasi Anda adalah OAuth atau kredensial API, seperti yang dijelaskan di bagian berikut.

OAuth 2.1 adalah alur autentikasi yang direkomendasikan. Tempel setelan ini di file settings.json ruang kerja Anda.

{
  "looker.instanceUrl": "https://YOUR_INSTANCE_URL",
  "looker.oauthClientId": "YOUR_OAUTH_CLIENT_ID",
  "looker.projectId": "YOUR_PROJECT_ID"
}

Ganti kode berikut:

  • https://YOUR_INSTANCE_URL: URL instance Looker Anda.
  • YOUR_OAUTH_CLIENT_ID: ID klien OAuth (client_guid) yang Anda terima dari admin Looker.
  • YOUR_PROJECT_ID: Nama project yang ingin Anda edit. Untuk menemukannya, di dalam instance Looker, buka halaman LookML Projects. Project ID ada di kolom Project.

Mengautentikasi dengan kredensial API

Jika Anda lebih suka menggunakan kunci API Looker, ikuti dokumentasi untuk membuat kredensial API. Anda juga harus memberikan project ID.

{
  "looker.instanceUrl": "https://YOUR_INSTANCE_URL",
  "looker.clientId": "YOUR_CLIENT_ID",
  "looker.clientSecret": "YOUR_CLIENT_SECRET",
  "looker.projectId": "YOUR_PROJECT_ID"
}

Ganti kode berikut:

  • https://YOUR_INSTANCE_URL: URL instance Looker Anda.
  • YOUR_CLIENT_ID dan YOUR_CLIENT_SECRET: Client ID dan rahasia klien untuk kredensial API yang Anda gunakan untuk mengautentikasi. Untuk menemukan kredensial ini, di dalam instance Looker, buka halaman Account; lalu, di bagian API Keys, klik tombol Manage. Tindakan ini akan membuka halaman API Keys tempat Anda dapat melihat client ID dan rahasia.
  • YOUR_PROJECT_ID: Nama project yang ingin Anda edit. Untuk menemukan nama project, di dalam instance Looker, buka halaman LookML Projects. Project ID ada di kolom Project.

Setelan

Anda dapat mengonfigurasi setelan MCP berikut di ruang kerja IDE.

Setelan Deskripsi Default
looker.instanceURL URL dasar instance Looker (misalnya, https://mycompany.looker.com). -
looker.authURL URL yang akan digunakan untuk autentikasi OAuth. Hanya ditetapkan jika berbeda dengan URL instance Anda. looker.instanceURL
looker.sdkURL URL yang akan digunakan untuk permintaan API. Hanya ditetapkan jika berbeda dengan URL instance Anda. looker.instanceURL
looker.oauthClientId Client ID OAuth Looker. Diperlukan untuk OAuth. -
looker.clientId Client ID Looker API. Diperlukan untuk autentikasi Kunci API. -
looker.clientSecret Rahasia Klien API Looker. Diperlukan untuk autentikasi Kunci API. -
looker.projectId Project ID Looker. -
looker.mcpServerUrl URL server MCP eksternal yang akan di-proxy (misalnya, http://localhost:5000/mcp). -
looker.acceptSelfSignedCertificates Abaikan error sertifikat SSL (misalnya, untuk sertifikat yang ditandatangani sendiri). Peringatan: Sebaiknya jangan aktifkan opsi ini. false
looker.askBeforeOverwritingRemote Selalu tanyakan sebelum menimpa file jarak jauh saat konflik terdeteksi. false

Mengonfigurasi klien MCP

Agar agen AI dapat berinteraksi dengan Looker melalui ekstensi, Anda harus mengonfigurasi agen untuk terhubung ke URL proxy MCP ekstensi. Secara default, proxy berjalan secara lokal di http://127.0.0.1:5050.

Jika server MCP Anda berjalan di port selain 5000 atau di komputer jarak jauh, Anda harus memperbarui konfigurasi proxy ekstensi. Untuk melakukannya, perbarui setelan looker.mcpServerUrl di setelan ruang kerja VS Code. Lihat bagian Setelan untuk mengetahui informasi selengkapnya.

Visual Studio Code (Copilot)

  1. Buka VS Code dan buat direktori .vscode di root project Anda, jika belum ada.
  2. Buat file .vscode/mcp.json, jika belum ada, lalu buka.
  3. Tambahkan konfigurasi berikut dan simpan file: 
      {
        "servers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Claude Code

  1. Buat file .mcp.json di root project Anda, jika belum ada.
  2. Tambahkan konfigurasi berikut dan simpan file: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Kursor

  1. Buat direktori .cursor di root project Anda, jika belum ada.
  2. Buat file .cursor/mcp.json, jika belum ada, lalu buka.
  3. Tambahkan konfigurasi berikut dan simpan file: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }
  1. Buka Kursor dan buka Setelan > Setelan Kursor > MCP. Status aktif berwarna hijau akan muncul saat server terhubung.

Cline

  1. Buka ekstensi Cline di VS Code dan klik ikon MCP Servers.
  2. Klik Configure MCP Servers untuk membuka file konfigurasi.
  3. Tambahkan konfigurasi berikut dan simpan file: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Windsurf

  1. Buka Windsurf dan buka asisten Cascade.
  2. Klik ikon MCP, lalu klik Configure untuk membuka file konfigurasi.
  3. Tambahkan konfigurasi berikut dan simpan file: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Mengautentikasi melalui Looker

Jika menggunakan autentikasi OAuth, Anda harus login untuk menautkan IDE lokal ke akun Looker.

  1. Buka Command Palette.
  2. Jalankan perintah: Looker: Sign In (OAuth).
  3. Konfirmasi perintah untuk membuka browser Anda.
  4. Di browser, izinkan ekstensi untuk mengakses akun Looker Anda.
  5. Setelah memberikan otorisasi, browser akan mengalihkan kembali ke IDE Anda. Anda akan melihat notifikasi yang menyatakan Successfully signed in to Looker!

Meng-clone project LookML

Untuk memulai pengembangan, Anda harus meng-clone repositori LookML ke komputer lokal.

  1. Di VS Code, buka jendela baru.
  2. Buka Command Palette dan pilih Git: Clone.
  3. Masukkan URL repositori Git jarak jauh (misalnya, dari GitHub atau GitLab) dan pilih folder lokal.
  4. Buka folder yang di-clone di IDE Anda.

Ekstensi akan otomatis mendeteksi file LookML dan mulai melakukan sinkronisasi dengan cabang yang Anda checkout di Mode Pengembangan instance Looker.

Pemecahan masalah

Anda dapat melihat log ekstensi di panel Output IDE. Pilih saluran Looker untuk melihat log. Untuk log yang lebih mendetail, buka Command Palette, jalankan perintah Developer: Set Log Level, lalu pilih Debug atau Trace.

  • Error autentikasi: Pastikan looker.instanceUrl dan looker.oauthClientId Anda sudah benar. Pastikan URI pengalihan di Looker cocok persis.
  • Masalah sinkronisasi: Periksa log ekstensi untuk mengatasi masalah sinkronisasi. Untuk melihat log, buka panel Output dan pilih Looker dari menu drop-down.
  • Respons Permintaan Buruk selama OAuth: Pastikan instance Looker Anda dapat diakses dari jaringan lokal dan Anda memiliki koneksi internet yang valid.

Jika Anda mengalami masalah dengan ekstensi, menjalankan perintah Developer: Reload Window dari Command Palette dapat membantu menyelesaikannya.

Langkah berikutnya