Question 344029 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How to show VSCode Extension version number in View?

My VSCode extension has a tab, which shows a view (defined in package.json). Is it possible to show the extension’s installed version number (as listed in package.json) inside a view?

This is a sample of my code

I included the [installed_package_version] variable as aim for this question.

"contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "myview",
          "title": "My view",
          "icon": "icon.png"
        }
      ]
    },
    "viewsWelcome": [
      {
        "view": "myview-page",
        "contents": "My content. Current version: [installed_package_version]",
        "when": "true"
      }
    ],
    "views": {
      "myview": [
        {
          "id": "myview-page",
          "name": "My view",
          "type": "tree"
        }
      ]
    }
}
Tags:

2

Answers


  1. 0

    Here’s simple example for how you show vscode extention version in web view:

    import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // Get the extension's version
    const extensionVersion = vscode.extensions.getExtension('<your_extension_id>').packageJSON.version;

    // Create and show a webview
    const panel = vscode.window.createWebviewPanel(
        'extensionVersion', // Identifies the type of the webview. Used internally
        'Extension Version', // Title of the panel displayed to the user
        vscode.ViewColumn.One, // Editor column to show the new webview panel in
        {}
    );

    // Set the HTML content of the webview
    panel.webview.html = getWebViewContent(extensionVersion);
}

function getWebViewContent(version: string): string {
    return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Extension Version</title>
        </head>
        <body>
            <h1>Extension Version</h1>
            <p>The installed version of the extension is: ${version}</p>
        </body>
        </html>
    `;
}

    if this helped?

    Login or Signup to reply.
  2. 0

    To display the version number of your VSCode extension inside a view, you can achieve this programmatically rather than directly through the package.json configuration. Here’s how you can do it:

    1. Retrieve the extension’s version programmatically using the VSCode API.
    2. Update the content of your view dynamically with the version information.

    Here’s a basic example of how you could accomplish this using TypeScript:

    import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // Register a command to show the view
    const disposable = vscode.commands.registerCommand('extension.showMyView', () => {
        // Get the extension's version
        const version = vscode.extensions.getExtension('your.extension.identifier')?.packageJSON.version;

        // Create a webview panel
        const panel = vscode.window.createWebviewPanel(
            'myView',
            'My View',
            vscode.ViewColumn.One,
            {}
        );

        // Set the HTML content with the version
        panel.webview.html = getWebviewContent(version || 'Version information not available');
    });

    context.subscriptions.push(disposable);
}

function getWebviewContent(version: string): string {
    return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My View</title>
    </head>
    <body>
        <h1>My View</h1>
        <p>Current version: ${version}</p>
    </body>
    </html>
    `;
}

    This code does the following:

    • Registers a command extension.showMyView to trigger the view.
    • Retrieves the extension’s version using vscode.extensions.getExtension.
    • Creates a webview panel and sets its HTML content dynamically with the version information.

    You’ll need to replace 'your.extension.identifier' with the actual identifier of your extension. You can find this in your extension’s package.json.

    Remember to include this in your package.json:

    "activationEvents": [
    "onCommand:extension.showMyView"
],

    This way, your view will be shown dynamically with the version information whenever the command is executed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search