Erste Schritte mit der Looker-Erweiterung für VS Code

Mit der Looker-Erweiterung für VS Code können Sie LookML direkt in Ihrer lokalen Desktopumgebung entwickeln. Sie bietet umfassende Syntaxhervorhebung, bidirektionale Dateisynchronisierung mit Ihrer Looker-Instanz und Integration mit KI-basierten Coding-Agenten für „Vibe Coding“.

Die Erweiterung wurde mit dem Visual Studio Code-Framework (VS Code) erstellt und unterstützt integrierte Entwicklungsumgebungen (IDEs), die auf der VS Code-IDE basieren, z. B. die folgenden IDEs und Coding-Tools:

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

IDEs, die keine Forks von VS Code sind, z. B. IntelliJ und Eclipse, werden von der Looker-Erweiterung für VS Code nicht unterstützt.

In dieser Anleitung wird beschrieben, wie Sie die Erweiterung einrichten und authentifizieren.

KI-basierter Workflow

Die Looker-Erweiterung für VS Code ist Teil eines KI-basierten agentenbasierten Entwicklungsworkflows zum Bearbeiten und Erstellen von LookML-Dateien. Konfigurieren Sie die folgenden Tools, um diesen Workflow zu aktivieren:

  • Die Looker-Erweiterung für VS Code.
  • Eine lokale IDE , die auf VS Code basiert. Die IDE muss entweder einen integrierten KI-Agenten enthalten (z. B. Cursor) oder, wenn die IDE keinen integrierten KI-Agenten enthält (z. B. VS Code), muss die IDE in ein eigenständiges agentenbasiertes Tool (z. B. Gemini CLI oder Claude Code) eingebunden sein. Informationen zum Verbinden Ihrer IDE mit einem Agenten finden Sie in der Dokumentation Ihrer lokalen IDE.
  • Ein MCP-Server, z. B. der von Looker verwaltete MCP-Server.

Weitere Informationen zum KI-basierten Workflow finden Sie auf der Dokumentationsseite KI-gestützte Entwicklung (Vibe Coding) mit Looker.

Hinweis

Bevor Sie die Erweiterung installieren, müssen Sie die folgenden Anforderungen erfüllen:

Einrichtung durch Administrator

Wenn Ihre Organisation OAuth zur Authentifizierung verwendet, muss ein Looker-Administrator die Looker-Erweiterung für VS Code als OAuth-Client in der Looker-Admin-UI registrieren.

Richten Sie die OAuth-Integration mit dem Looker API Explorer ein. Sie können auf eine der folgenden Arten auf den API Explorer zugreifen:

API Explorer installiert

Wenn der API Explorer bereits in Ihrer Looker-Instanz installiert ist, können Sie mit diesem URL-Format darauf zugreifen:

LOOKER_INSTANCE_URL/extensions/marketplace_extension_api_explorer::api-explorer/

API Explorer nicht installiert

Wenn der API Explorer nicht in Ihrer Looker-Instanz vorhanden ist, können Sie ihn im Looker Marketplace installieren. Informationen zum Installieren des API Explorer finden Sie auf der Seite API Explorer verwenden.

Private PSA-Instanz

Wenn Sie eine private Looker-Instanz (Google Cloud Core) mit privaten Verbindungen verwenden, die Zugriff auf private Dienste nutzt, werden der Looker Marketplace und der API Explorer nicht unterstützt. Um einen KI-Agenten zu registrieren, müssen Sie den oauth_client_apps API-Endpunkt direkt aufrufen. Wenn Sie diese Methode verwenden, können Sie die verbleibenden Schritte dieser API Explorer-Anleitung überspringen.

Im Folgenden sehen Sie ein Beispiel für einen curl-Befehl, den Sie mit dem Endpunkt oauth_client_apps verwenden können, um den Agenten zu registrieren.

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
}'

Führen Sie die folgenden Schritte aus, um die Erweiterung zu registrieren:

  1. Folgen Sie der Anleitung in der Dokumentation OAuth-Clientanwendung registrieren, um die Erweiterung zu registrieren.

  2. Führen Sie für das Feld client_guid die folgenden Schritte aus:

    • Verwenden Sie eine global eindeutige ID.
    • Sie müssen die ID allen LookML-Entwicklern zur Verfügung stellen, die die Erweiterung verwenden möchten.

  3. Geben Sie für redirect_uri die Callback-URL für Ihre IDE ein. Verwenden Sie je nach IDE oder Coding-Tool eine der folgenden Callback-URLs:

    IDE oder Tool Callback-URL
    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
    Cursor 
    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. Füllen Sie display_name und description wie in der Dokumentation OAuth-Clientanwendung registrieren beschrieben aus.

Nachdem die App registriert wurde, gibt der API Explorer eine Antwort mit einer Zusammenfassung der Registrierung zurück. Sie können den Endpunkt OAuth-Client-App abrufen mit der client_guid verwenden, um die Registrierungsdetails zu prüfen.

Geben Sie die generierte client_guid an Ihre Entwickler weiter. Sie verwenden sie bei der Konfiguration der Erweiterung.

Erweiterung installieren

Führen Sie die folgenden Schritte aus, um die Erweiterung zu installieren:

  1. Installieren Sie die Looker-Erweiterung für VS Code aus dem Visual Studio Marketplace.
  2. Öffnen Sie Ihre IDE, z. B. VS Code oder Cursor.
  3. Klicken Sie in der Aktivitätsleiste auf das Symbol Erweiterungen.
  4. Suchen Sie nach der Looker-Erweiterung für VS Code und klicken Sie auf Installieren.
  5. Nachdem die Erweiterung installiert wurde, wird in der Aktivitätsleiste das Symbol Looker angezeigt.

Erweiterung konfigurieren

Sie können die Erweiterung mit den Details Ihrer Looker-Instanz in der Datei settings.json Ihres Arbeitsbereichs, im visuellen VS Code-Einstellungseditor (Einstellungen: Arbeitsbereichseinstellungen öffnen) oder in der interaktiven Onboarding-UI der Looker-Erweiterung konfigurieren.

In den folgenden Schritten wird beispielhaft gezeigt, wie Sie die Datei settings.json bearbeiten. Wenn Sie stattdessen den VS Code-Einstellungseditor oder die UI der Looker-Erweiterung verwenden, erzielen Sie dasselbe Ergebnis.

  1. Öffnen Sie bei geöffnetem Arbeitsbereich die Befehlspalette (Command-Shift-P auf dem Mac oder Strg+Shift+P unter Windows/Linux).
  2. Suchen Sie nach Einstellungen: Arbeitsbereichseinstellungen öffnen (JSON) und wählen Sie diese Option aus.
  3. Fügen Sie Ihrer Konfiguration die Konfigurationsvariablen hinzu. Die Konfigurationsvariablen variieren je nachdem, ob Sie die OAuth-Authentifizierung oder API-Anmeldedaten verwenden, wie in den folgenden Abschnitten beschrieben.

OAuth 2.1 ist der empfohlene Authentifizierungsablauf. Fügen Sie diese Einstellungen in die Datei settings.json Ihres Arbeitsbereichs ein.

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

Ersetzen Sie Folgendes:

  • https://YOUR_INSTANCE_URL: Die URL Ihrer Looker-Instanz.
  • YOUR_OAUTH_CLIENT_ID: Die OAuth-Client-ID (client_guid), die Sie von Ihrem Looker-Administrator erhalten.
  • YOUR_PROJECT_ID: Der Name des Projekts, das Sie bearbeiten möchten. Öffnen Sie dazu in Ihrer Looker-Instanz die Seite LookML-Projekte. Die Projekt-ID befindet sich in der Spalte Projekt.

Mit API-Anmeldedaten authentifizieren

Wenn Sie Looker API-Schlüssel verwenden möchten, folgen Sie der Dokumentation, um API-Anmeldedaten zu erstellen. Sie müssen auch Ihre Projekt-ID angeben.

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

Ersetzen Sie Folgendes:

  • https://YOUR_INSTANCE_URL: Die URL Ihrer Looker-Instanz.
  • YOUR_CLIENT_ID und YOUR_CLIENT_SECRET: Die Client-ID und der Clientschlüssel für die API-Anmeldedaten, die Sie zur Authentifizierung verwenden. Öffnen Sie in Ihrer Looker-Instanz die Konto-Seite, um diese Anmeldedaten zu finden. Klicken Sie dann im Abschnitt API-Schlüssel auf die Schaltfläche Verwalten. Dadurch wird die Seite API-Schlüssel geöffnet, auf der Sie Ihre Client-IDs und -schlüssel sehen können.
  • YOUR_PROJECT_ID: Der Name des Projekts, das Sie bearbeiten möchten. Öffnen Sie in Ihrer Looker-Instanz die LookML-Projekte-Seite , um den Projektnamen zu finden. Die Projekt-ID befindet sich in der Spalte Projekt.

Einstellungen

Sie können die folgenden MCP-Einstellungen im Arbeitsbereich Ihrer IDE konfigurieren.

Einstellung Beschreibung Standard
looker.instanceURL Basis-URL der Looker-Instanz (z. B. https://mycompany.looker.com). -
looker.authURL URL, die für die OAuth-Authentifizierung verwendet werden soll. Nur festlegen, wenn sie sich von der Instanz-URL unterscheidet. looker.instanceURL
looker.sdkURL URL, die für API-Anfragen verwendet werden soll. Nur festlegen, wenn sie sich von der Instanz-URL unterscheidet. looker.instanceURL
looker.oauthClientId Looker-OAuth-Client-ID. Für OAuth erforderlich. -
looker.clientId Looker API-Client-ID. Für die Authentifizierung mit API-Schlüssel erforderlich. -
looker.clientSecret Looker API-Clientschlüssel. Für die Authentifizierung mit API-Schlüssel erforderlich. -
looker.projectId Looker-Projekt-ID. -
looker.mcpServerUrl URL des externen MCP-Servers, der als Proxy verwendet werden soll (z. B. http://localhost:5000/mcp). -
looker.acceptSelfSignedCertificates SSL-Zertifikatfehler ignorieren (z. B. bei selbstsignierten Zertifikaten). Warnung: Die Aktivierung dieser Option wird nicht empfohlen. false
looker.askBeforeOverwritingRemote Immer fragen, bevor Remote-Dateien überschrieben werden, wenn ein Konflikt erkannt wird. false

MCP-Client konfigurieren

Damit Ihr KI-Agent über die Erweiterung mit Looker interagieren kann, müssen Sie Ihren Agenten so konfigurieren, dass er eine Verbindung zur MCP-Proxy-URL der Erweiterung herstellt. Standardmäßig wird der Proxy lokal unter http://127.0.0.1:5050 ausgeführt.

Wenn Ihr MCP-Server auf einem anderen Port als 5000 oder auf einem Remotecomputer ausgeführt wird, müssen Sie die Proxykonfiguration der Erweiterung aktualisieren. Aktualisieren Sie dazu die Einstellung looker.mcpServerUrl in den VS Code-Arbeitsbereichseinstellungen. Weitere Informationen finden Sie im Abschnitt Einstellungen.

Visual Studio Code (Copilot)

  1. Öffnen Sie VS Code und erstellen Sie im Stammverzeichnis Ihres Projekts das Verzeichnis .vscode, falls es noch nicht vorhanden ist.
  2. Erstellen Sie die Datei .vscode/mcp.json, falls sie noch nicht vorhanden ist, und öffnen Sie sie.
  3. Fügen Sie die folgende Konfiguration hinzu und speichern Sie die Datei: 
      {
        "servers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Claude Code

  1. Erstellen Sie im Stammverzeichnis Ihres Projekts die Datei .mcp.json, falls sie noch nicht vorhanden ist.
  2. Fügen Sie die folgende Konfiguration hinzu und speichern Sie die Datei: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Cursor

  1. Erstellen Sie im Stammverzeichnis Ihres Projekts das Verzeichnis .cursor, falls es noch nicht vorhanden ist.
  2. Erstellen Sie die Datei .cursor/mcp.json, falls sie noch nicht vorhanden ist, und öffnen Sie sie.
  3. Fügen Sie die folgende Konfiguration hinzu und speichern Sie die Datei: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }
  1. Öffnen Sie Cursor und rufen Sie Einstellungen > Cursor-Einstellungen > MCP auf. Wenn der Server eine Verbindung herstellt, wird ein grüner aktiver Status angezeigt.

Cline

  1. Öffnen Sie die Cline-Erweiterung in VS Code und klicken Sie auf das Symbol MCP-Server.
  2. Klicken Sie auf MCP-Server konfigurieren , um die Konfigurationsdatei zu öffnen.
  3. Fügen Sie die folgende Konfiguration hinzu und speichern Sie die Datei: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Windsurf

  1. Öffnen Sie Windsurf und rufen Sie den Cascade-Assistenten auf.
  2. Klicken Sie auf das MCP-Symbol und dann auf Konfigurieren, um die Konfigurationsdatei zu öffnen.
  3. Fügen Sie die folgende Konfiguration hinzu und speichern Sie die Datei: 
      {
        "mcpServers": {
          "looker": {
            "type": "http",
            "url": "http://127.0.0.1:5050"
          }
        }
      }

Über Looker authentifizieren

Wenn Sie die OAuth-Authentifizierung verwenden, müssen Sie sich anmelden, um Ihre lokale IDE mit Ihrem Looker-Konto zu verknüpfen.

  1. Öffnen Sie die Befehlspalette.
  2. Führen Sie den Befehl Looker: Anmelden (OAuth) aus.
  3. Bestätigen Sie die Aufforderung, Ihren Browser zu öffnen.
  4. Autorisieren Sie im Browser die Erweiterung, auf Ihr Looker-Konto zuzugreifen.
  5. Nach der Autorisierung werden Sie im Browser wieder zu Ihrer IDE weitergeleitet. Sie sollten die Benachrichtigung Erfolgreich bei Looker angemeldet sehen.

LookML-Projekt klonen

Um mit der Entwicklung zu beginnen, müssen Sie Ihr LookML-Repository auf Ihren lokalen Computer klonen.

  1. Öffnen Sie in VS Code ein neues Fenster.
  2. Öffnen Sie die Befehlspalette und wählen Sie Git: Klonen aus.
  3. Geben Sie die URL Ihres Remote-Git-Repositorys ein (z. B. von GitHub oder GitLab) und wählen Sie einen lokalen Ordner aus.
  4. Öffnen Sie den geklonten Ordner in Ihrer IDE.

Die Erweiterung erkennt die LookML-Dateien automatisch und beginnt mit der Synchronisierung mit Ihrem ausgecheckten Branch im Entwicklermodus Ihrer Looker-Instanz.

Fehlerbehebung

Sie können die Erweiterungsprotokolle im Bereich Ausgabe Ihrer IDE ansehen. Wählen Sie den Kanal Looker aus, um Protokolle anzusehen. Öffnen Sie die Befehlspalette, führen Sie den Befehl Entwickler: Protokollebene festlegen aus und wählen Sie Debug oder Trace aus, um detailliertere Protokolle zu erhalten.

  • Authentifizierungsfehler: Prüfen Sie, ob looker.instanceUrl und looker.oauthClientId korrekt sind. Achten Sie darauf, dass die Weiterleitungs-URI in Looker genau übereinstimmt.
  • Synchronisierungsprobleme: Prüfen Sie die Erweiterungsprotokolle, um Synchronisierungsprobleme zu beheben. Öffnen Sie dazu den Bereich Ausgabe und wählen Sie im Drop-down-Menü Looker aus.
  • Antwort „Bad Request“ während OAuth: Prüfen Sie, ob Ihre Looker-Instanz über Ihr lokales Netzwerk zugänglich ist und ob Sie eine gültige Internetverbindung haben.

Wenn Probleme mit der Erweiterung auftreten, kann es helfen, den Befehl Entwickler: Fenster neu laden über die Befehlspalette auszuführen.

Nächste Schritte