Mulai menggunakan ekstensi Looker untuk VS Code

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

Ekstensi ini dibuat menggunakan framework Visual Studio Code (VS Code), dan mendukung lingkungan pengembangan terintegrasi (IDE) yang didasarkan pada IDE VS Code, 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 didukung AI

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

  • Ekstensi Looker untuk VS Code.
  • IDE lokal yang berbasis VS Code. IDE harus berisi agen AI bawaan (misalnya, Cursor), 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 lebih lanjut alur kerja berkemampuan AI, lihat halaman dokumentasi Pengembangan yang dibantu AI (vibe coding) 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 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 Anda.

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 API Explorer Looker 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 diinstal

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 yang tersisa dalam prosedur API Explorer ini.

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 apa pun.
    • Bersiaplah untuk mendistribusikan ID kepada developer LookML 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 panggilan balik berikut:

    IDE atau alat URL callback
    VS Code
    vscode://google.vscode-looker-official/oauth_callback
    Antigravity IDE (tersedia di Looker 26.12+)
    antigravity-ide://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. Selesaikan display_name dan description seperti yang dijelaskan dalam dokumentasi Mendaftarkan aplikasi klien OAuth.

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

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 Cursor.
  3. Klik ikon Ekstensi di Panel Aktivitas.
  4. Temukan ekstensi Looker untuk 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 Palet Perintah (Command-Shift-P di Mac atau Ctrl+Shift+P di Windows/Linux).
  2. Telusuri 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. Tempelkan 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 Anda, buka halaman LookML Projects. Project ID ada di kolom Project.

Melakukan autentikasi dengan kredensial API

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

{
  "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 melakukan autentikasi. Untuk menemukan kredensial ini, di dalam instance Looker Anda, buka halaman Akun; lalu, di bagian Kunci API, klik tombol Kelola. Tindakan ini akan membuka halaman Kunci API tempat Anda dapat melihat client ID dan secret.
  • YOUR_PROJECT_ID: Nama project yang ingin Anda edit. Untuk menemukan nama project, di dalam instance Looker Anda, buka halaman LookML Projects. Project ID ada di kolom Project.

Setelan

Anda dapat mengonfigurasi setelan MCP berikut di ruang kerja IDE Anda.

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 dari 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 ID Klien OAuth Looker. Diperlukan untuk OAuth. -
looker.clientId ID Klien Looker API. Diperlukan untuk autentikasi Kunci API. -
looker.clientSecret Rahasia Klien Looker API. 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 Mengabaikan error sertifikat SSL (misalnya, untuk sertifikat yang ditandatangani sendiri). Peringatan: Sebaiknya jangan aktifkan opsi ini. false
looker.askBeforeOverwritingRemote Selalu tanyakan sebelum mengganti file jarak jauh jika konflik terdeteksi. false

Mengonfigurasi klien MCP

Agar agen AI Anda 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 Anda. 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, lalu buka Setelan > Setelan Kursor > MCP. Status aktif berwarna hijau akan muncul saat server terhubung.

Cline

  1. Buka ekstensi Cline di VS Code, lalu 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"
          }
        }
      }
  

Melakukan autentikasi melalui Looker

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

  1. Buka Palet Perintah.
  2. Jalankan perintah: Looker: Sign In (OAuth).
  3. Konfirmasi perintah untuk membuka browser Anda.
  4. Di browser, izinkan ekstensi mengakses akun Looker Anda.
  5. Setelah memberikan otorisasi, browser akan dialihkan kembali ke IDE Anda. Anda akan melihat notifikasi yang menyatakan Berhasil login ke 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 Palet Perintah dan pilih Git: Clone.
  3. Masukkan URL repositori Git jarak jauh Anda (misalnya, dari GitHub atau GitLab) dan pilih folder lokal.
  4. Buka folder yang di-clone di IDE Anda.

Ekstensi ini otomatis mendeteksi file LookML dan mulai menyinkronkan dengan cabang yang di-checkout di Mode Pengembangan instance Looker Anda.

Pemecahan masalah

Anda dapat melihat log ekstensi di panel Output IDE. Pilih saluran Looker untuk melihat log. Untuk log yang lebih mendetail, buka Palet Perintah, 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 Palet Perintah dapat membantu menyelesaikannya.

Langkah berikutnya