CODEWITHSUNDEEP
javascriptjsontypescriptvscode-extensionsextention-cli
Prashant Choudhary
Prashant Choudhary

Reputation: 13

vscode extention with a sidebar but its not showing perfectly

Package.json code { "name": "literna-ai", "displayName": "Literna.AI", "description": "this is a ai bot", "version": "0.0.1", "engines": { "vscode": "^1.89.0" }, "categories": [ "Other" ], "activationEvents": [], "main": "./dist/extension.js", "contributes": { "commands": [{ "command": "literna-ai.helloWorld", "title": "Hello World" }], "viewsContainers": { "activitybar": [{ "id": "literna-ai-sidebar", "title": "LiternaAI", "icon": "./src/asset/logo.png" }] }, "views": { "literna-ai-sidebar": [{ "id": "literna-ai-view", "name": "Extension" }] } }, "scripts": { "vscode:prepublish": "npm run package", "compile": "webpack", "watch": "webpack --watch", "package": "webpack --mode production --devtool hidden-source-map", "compile-tests": "tsc -p . --outDir out", "watch-tests": "tsc -p . -w --outDir out", "pretest": "npm run compile-tests && npm run compile && npm run lint", "lint": "eslint src --ext ts", "test": "vscode-test" }, "devDependencies": { "@types/vscode": "^1.89.0", "@types/mocha": "^10.0.6", "@types/node": "18.x", "@typescript-eslint/eslint-plugin": "^7.11.0", "@typescript-eslint/parser": "^7.11.0", "eslint": "^8.57.0", "typescript": "^5.4.5", "ts-loader": "^9.5.1", "webpack": "^5.91.0", "webpack-cli": "^5.1.4", "@vscode/test-cli": "^0.0.9", "@vscode/test-electron": "^2.4.0" } }

extention.ts code `import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

const myViewProvider = new MyViewProvider(context.extensionUri);

context.subscriptions.push(
    vscode.window.registerWebviewViewProvider(MyViewProvider.viewType, myViewProvider)
);

}

class MyViewProvider implements vscode.WebviewViewProvider { public static readonly viewType = 'literna-ai-view';

private _view?: vscode.WebviewView;

constructor(
    private readonly _extensionUri: vscode.Uri
) { }

public resolveWebviewView(
    webviewView: vscode.WebviewView,
    context: vscode.WebviewViewResolveContext,
    _token: vscode.CancellationToken
): void {
    this._view = webviewView;

    webviewView.webview.options = {
        // Enable scripts in the webview
        enableScripts: true,

        localResourceRoots: [this._extensionUri]
    };

    webviewView.webview.html = this.getHtmlContent(webviewView.webview);
}

private getHtmlContent(webview: vscode.Webview): string {
    const logoUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, './assets', './asset/logo.png'));

    return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Sidebar</title>
    </head>
    <body>
        <h1>Welcome to My Sidebar!</h1>
        <img src="${logoUri}" width="200" alt="Logo">
    </body>
    </html>`;
}

}

export function deactivate() { }`

i checked my json file but there are so such errors and location of asset file is also correct i have all dependencies install then i can't find where the problem really is.

Upvotes: 0

Views: 26

Answers (0)

Related Questions