Why isn't my VS Code extension with the OpenAI API showing in the Extension Development Host?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I am developing a simple VS Code extension that calls the OpenAI API to display the day in Danish.

I can’t find the extension when searching for it in the Extension Development Host window (after pressing F5). What could I be doing wrong?

extension.js

JAVASCRIPT
const vscode = require('vscode');
import { OpenAI } from 'openai';
require("dotenv").config(); // Load environment variables from .env file

// Initialize the OpenAI client
const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY
});


// Activate the extension
function activate(context) {
    console.log('Your extension "gpt-danish-day" is now active!');

    // Register the command
    let disposable = vscode.commands.registerCommand('gpt-danish-day.getDay', async () => {
        // Call the OpenAI function to get the day in Danish
        const response = await getDayInDanish();

        // Show the result in a VS Code information message
        vscode.window.showInformationMessage(`Today in Danish: ${response}`);
    });

    context.subscriptions.push(disposable);
}


// Function to fetch the current day in Danish
async function getDayInDanish() {
    try {
        const chatCompletion = await client.chat.completions.create({
            model: "gpt-4o-mini",
            messages: [
                { role: "system", content: "You are a helpful assistant." },
                { role: "user", content: "Tell me what day is it today in Danish?" }
            ]
        });

        // Extract and return the content of the first choice
        return chatCompletion.choices[0].message.content.trim();
    } catch (error) {
        console.error("Error calling OpenAI API:", error.message);
        return "Error fetching the day in Danish.";
    }
}


// Deactivate the extension
function deactivate() {}

module.exports = {
    activate,
    deactivate
};

package.json

JSON
{
  "name": "code-commenter",
  "displayName": "Code Commenter",
  "description": "A VS Code extension that uses ChatGPT to add comments to your code.",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "categories": [
    "Other"
  ],
  "contributes": {
    "commands": [
        {
            "command": "gpt-danish-day.getDay",
            "title": "Get Day in Danish"
        }
    ]
  },
  "scripts": {
    "vscode:prepublish": "vsce package",
    "test": "node ./test/runTest.js"
  },
  "dependencies": {
    "axios": "^1.5.0",
    "dotenv": "^10.0.0",
    "vscode": "^1.80.0"
  },
  "devDependencies": {}
}

Comments 0

•

Answers 1

•

1 Answer

Answer by StackOverflow TychoAI Agent • 1 month ago

Below are two common causes for an extension not appearing in the Extension Development Host:

1. Missing Activation Events

VS Code only loads your extension when an activation event is triggered. In your package.json you don’t show any "activationEvents". Without one, the extension won’t activate (and its commands won’t be available). To fix this, add an activation event corresponding to your command. For example:

JSON
{
  "activationEvents": [
    "onCommand:gpt-danish-day.getDay"
  ],
  "contributes": {
    "commands": [
      {
        "command": "gpt-danish-day.getDay",
        "title": "Get Day in Danish"
      }
    ]
  }
  // ... rest of your package.json
}

This tells VS Code to activate your extension when the command is invoked.

2. Incorrect or Confusing Module Usage

Your extension file mixes CommonJS (using require) and ES Module syntax (using import). This might cause errors that prevent your extension from activating in the development host. Since VS Code extensions traditionally use CommonJS, either change the ES import to use require or adjust your configuration to support ES modules. For example, update the import of OpenAI:

JAVASCRIPT
const vscode = require('vscode');
const { OpenAI } = require('openai');   // Changed to require syntax
require("dotenv").config(); // Load environment variables from .env file

// ... rest of your extension code

Apply these changes and then press F5 again. Your extension should now show up, and invoking the command (using Command Palette) should activate it and display the day in Danish.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Discussion