Mulai menggunakan ekstensi Looker untuk VS Code

Ekstensi Looker by Google Cloud untuk Visual Studio Code (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:

• IDE lokal yang berbasis VS Code. IDE harus berisi agen AI bawaan (misalnya, Cursor), atau, jika IDE tidak berisi agen AI bawaan, IDE harus terintegrasi dengan alat agentik mandiri (seperti Gemini CLI atau Claude Code). Lihat dokumentasi IDE lokal Anda untuk mengetahui cara menghubungkan IDE ke agen.
• Ekstensi Looker untuk VS Code.
• 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:

• Server MCP yang dikelola Looker (opsional, tetapi direkomendasikan): Jika Anda berencana menggunakan pengembangan yang dibantu AI, hubungkan IDE dan agen AI Anda ke server MCP yang dikelola Looker. Petunjuk untuk menyiapkan server MCP 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.
• Konfigurasi project: Anda harus memiliki project di Looker (dikonfigurasi sebagai repositori kosong atau dikonfigurasi untuk Git).
• Penginstalan Git (opsional): Jika Anda berencana meng-clone repositori LookML, Anda harus menginstal Git di komputer lokal.
• 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
   Antigravity IDE (tersedia di Looker 26.12 atau yang lebih baru)	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
   Kiro (Dukungan OAuth untuk Kiro tersedia di Looker 26.16 atau yang lebih baru)	kiro://google.vscode-looker-official/oauth_callback
   Looker	looker://google.vscode-looker-official/oauth_callback
   VS Code	vscode://google.vscode-looker-official/oauth_callback
   Windsurf	windsurf://google.vscode-looker-official/oauth_callback

   Catatan: Looker memvalidasi skema URI kustom terhadap daftar yang diizinkan dari IDE dan alat yang didukung. Jika Anda mencoba mendaftarkan URI pengalihan untuk IDE yang skemanya tidak ada dalam daftar yang diizinkan Looker, Looker akan menampilkan error selama pendaftaran.

4. Pastikan kolom Enabled disetel ke true.

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

Setelah aplikasi didaftarkan, API Explorer akan menampilkan respons dengan ringkasan pendaftaran. Pastikan URI pengalihan cocok dengan yang Anda masukkan dalam parameter permintaan. Anda dapat menggunakan endpoint Get OAuth Client App dengan nilai client_guid untuk meninjau detail pendaftaran Anda.

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

Menginstal ekstensi

Ekstensi ini tersedia di dua marketplace ekstensi utama:

• Visual Studio Marketplace (untuk VS Code standar)
• Open VSX Registry (untuk Cursor, Antigravity IDE, dan VSCodium)

Selesaikan langkah-langkah berikut untuk menginstal ekstensi:

1. Buka IDE Anda, seperti VS Code atau Cursor.
2. Klik ikon Ekstensi di Panel Aktivitas.
3. Temukan Looker by Google Cloud, lalu klik Instal.
4. Setelah ekstensi diinstal, ikon Looker akan muncul di Activity Bar.

Mengonfigurasi ekstensi

Catatan: Sebaiknya konfigurasi dan kelola setelan Anda menggunakan panduan orientasi.

Untuk mengonfigurasi ekstensi dengan detail instance Looker Anda, jalankan panduan penyiapan interaktif:

1. Dengan ruang kerja terbuka, buka Palet Perintah (Command-Shift-P di macOS atau Ctrl+Shift+P di Windows/Linux).
2. Jalankan perintah Looker: Show Onboarding Walkthrough untuk membuka panduan orientasi.
3. Ikuti petunjuk dalam panduan untuk memasukkan URL instance Looker, project ID, dan detail autentikasi Anda. Jika Anda menggunakan repositori kosong, Anda juga akan diminta untuk mengisi ruang kerja dengan file LookML project selama proses ini.

Melakukan autentikasi dengan OAuth (Direkomendasikan)

OAuth 2.1 adalah alur autentikasi yang direkomendasikan. Saat diminta selama panduan orientasi, pilih OAuth dan berikan nilai konfigurasi berikut:

• URL Instance Looker: URL instance Looker Anda.
• Client ID OAuth: Client ID OAuth (client_guid) yang Anda terima dari administrator Looker.
• Project ID: Nama project LookML yang ingin Anda edit. Untuk menemukannya, di 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. Saat diminta selama panduan orientasi, pilih kredensial API dan berikan nilai konfigurasi berikut:

• URL Instance Looker: URL instance Looker Anda.
• Client ID dan Client Secret: Client ID dan rahasia klien untuk kredensial API yang Anda gunakan untuk mengautentikasi. Untuk menemukan kredensial ini, di dalam instance Looker Anda, buka halaman Akun; lalu, di bagian Kunci API, klik tombol Kelola untuk melihat ID dan secret klien Anda.
• 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.

Catatan: Anda tidak dapat memasukkan looker.clientSecret secara manual dalam file settings.json ruang kerja. Gunakan panduan aktivasi untuk mengonfigurasi kredensial API.

Setelan

Catatan: Sebaiknya kelola setelan ini menggunakan panduan aktivasi.

Meskipun sebaiknya menggunakan panduan orientasi, Anda juga dapat mengonfigurasi setelan ekstensi di file settings.json VS Code. File ini berada di folder .vscode ruang kerja Anda (.vscode/settings.json) atau di file setelan pengguna global Anda (settings.json). Anda juga dapat mengonfigurasinya dengan menggunakan editor Setelan VS Code visual (Preferences: Open Settings (UI)).

Tips: Ubah setelan tingkat ruang kerja, bukan nilai global, untuk mengisolasi detail project dan instance Looker ke direktori project LookML terkait.

Semua properti looker.<setting> harus ditentukan dalam file settings.json VS Code, termasuk setelan MCP ekstensi looker.mcpServerUrl. Menentukan setelan ini dalam file konfigurasi MCP agen AI (seperti .agents/mcp_config.json) atau file setelan lainnya tidak akan berfungsi dengan ekstensi.

Anda dapat mengonfigurasi setelan ekstensi berikut di settings.json:

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. Tidak digunakan lagi. Gunakan panduan aktivasi untuk mengonfigurasi kredensial API.	-
looker.projectId	ID project LookML.	-
looker.mcpServerUrl	URL server MCP target yang meneruskan permintaan proxy MCP lokal ekstensi. Hanya disetel jika berbeda dari looker.instanceURL/mcp (misalnya, http://localhost:5000/mcp).	looker.instanceURL/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

Untuk mengizinkan agen AI Anda berinteraksi dengan Looker melalui ekstensi, Anda harus mengonfigurasi agen Anda agar terhubung ke proxy MCP lokal ekstensi di http://127.0.0.1:5050/mcp.

Agen AI Anda mereferensikan file konfigurasi MCP-nya sendiri (seperti .agents/mcp_config.json di VS Code, .mcp.json di Claude Code, atau .cursor/mcp.json di Cursor). Mengarahkan konfigurasi ini ke proxy lokal memungkinkan ekstensi mengambil permintaan MCP agen Anda dan meneruskannya dengan header autentikasi yang sesuai.

Server MCP yang dikelola Looker (default dan direkomendasikan)

Ekstensi menjalankan proxy terbalik lokal (default: http://127.0.0.1:5050/mcp) yang terhubung ke server MCP terkelola bawaan Looker (LOOKER_INSTANCE_URL/mcp). Proxy secara otomatis menyuntikkan token pembawa OAuth dan menyimpan permintaan alat agen AI hingga sinkronisasi file lokal yang tertunda selesai, sehingga memastikan bahwa alat validasi tidak pernah mengevaluasi kode usang di server.

Server MCP kustom atau yang dihosting sendiri (opsional)

Jika organisasi Anda menghosting server MCP kustom (seperti MCP Toolbox for Databases mandiri):

1. Di setelan VS Code, tetapkan looker.mcpServerUrl ke URL server kustom Anda (misalnya, http://localhost:5000/mcp).
2. Konfigurasi klien MCP IDE Anda untuk mengarah ke proxy ekstensi di http://127.0.0.1:5050/mcp.

Visual Studio Code (Copilot)

1. Buka VS Code dan buat direktori .agents di root project Anda, jika belum ada.
2. Buat file .agents/mcp_config.json, jika belum ada, lalu buka.
3. Tambahkan konfigurasi berikut dan simpan file:

      {
        "mcpServers": {
          "Looker": {
            "serverUrl": "http://127.0.0.1:5050/mcp",
            "disabledTools": [
              "query_url",
              "get_looks",
              "run_look",
              "make_look",
              "get_dashboards",
              "run_dashboard",
              "make_dashboard",
              "add_dashboard_element",
              "add_dashboard_filter",
              "generate_embed_url",
              "health_pulse",
              "health_analyze",
              "health_vacuum",
              "get_project_files",
              "get_project_file",
              "create_project_file",
              "update_project_file",
              "delete_project_file",
              "get_project_directories",
              "create_project_directory",
              "delete_project_directory",
              "project_git_branch"
            ]
          }
        }
      }
  

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/mcp"
          }
        }
      }
  

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/mcp"
          }
        }
      }
  

4. 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/mcp"
          }
        }
      }
  

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/mcp"
          }
        }
      }
  

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!

Mengisi project LookML lokal Anda

Untuk memulai pengembangan, buka project LookML di IDE lokal menggunakan metode yang sesuai untuk konfigurasi repositori Anda:

Repositori Git

Jika project LookML Anda dikonfigurasi untuk Git, ikuti langkah-langkah berikut:

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.

Mode repositori kosong

Jika project LookML Anda dikonfigurasi sebagai repositori kosong, ikuti langkah-langkah berikut:

1. Dengan ruang kerja terbuka, buat dan buka folder lokal kosong untuk project Anda.
2. Buka Palet Perintah (Command-Shift-P di macOS atau Ctrl+Shift+P di Windows/Linux).
3. Jalankan perintah Looker: Show Onboarding Walkthrough untuk membuka panduan orientasi.
4. Pada langkah Select Project, pilih project LookML yang ingin Anda kerjakan, lalu klik Next.
5. Ekstensi ini akan mengenali bahwa folder lokal Anda kosong dan meminta Anda untuk mengisi ruang kerja dengan file project. Klik Isi Ruang Kerja untuk mengisi ruang kerja.
6. Selesaikan panduan orientasi.

Setelah ruang kerja diisi, ekstensi akan otomatis mulai menyinkronkan folder lokal Anda 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

• Mengelola file LookML dan Git dengan ekstensi Looker untuk VS Code
• Server MCP yang dikelola Looker
• Menggunakan MCP Toolbox for Databases
• Pengembangan yang dibantu AI (vibe coding) dengan Looker