7

I'm trying to develop a new extension for vscode based on Webview but I am running into problems with posting messages from client to extension. As a starter, I used this repo and I am following these steps from Microsoft.

As you can see in the example we have:

(function() {
            const vscode = acquireVsCodeApi();

My problem is that in my react app the acquireVsCodeApi is like it doesn't exist. I tried multiple ways eg. in componentDidMount lifecycle but no luck.

This user seems to be able to run it but parts of his app are missing so is not clear to me.

Does anyone have an idea of how to use acquireVsCodeApi() with React or a code snippet that can help?

Regards

3 Answers 3

5

Ok, so first you need to assign it into a variable in webview content in a script eg: https://github.com/shinhwagk/vscode-note/blob/be2aabf2812a9b6200be971425535024440dbd88/src/panel/notesPanelView.ts#L32

and then in typescript, it has to be an interface

interface vscode {
    postMessage(message: any): void;
}

declare const vscode: vscode;

const addCategory = () => () => vscode.postMessage({ command: 'add-category' });

Solution came from here: https://github.com/shinhwagk/vscode-note/blob/be2aabf2812a9b6200be971425535024440dbd88/src/webview/index.tsx#L10

1
  • 2
    Why do you need the JS vscode API in your TS code? You have direct access to the entire vscode API. The aquisition via that function is only made for JS script code you load into a webview. May 22, 2019 at 6:50
2

Similar to @Unseen's answer, what i did is create a global.d.ts file, and declare vscode type there.

type VSCode = {
  postMessage(message: any): void;
  getState(): any;
  setState(state: any): void;
};

declare const vscode: VSCode;

In this case you can access vscode in any file. Example: https://github.com/hacker0limbo/vscode-webview-react-boilerplate/blob/master/app/global.d.ts

1

Webpack + NPM version

This NPM version uses two packages: vscode-webview and @types/vscode-webview. The @types/vscode-webview is reasonably recent, but vscode-webview has been abandoned in an immature state. While the code 'webpack's ok, it is somewhat dubious.

Your repository uses typescript, and so you can install a type declaration from npm to allow your typescript checker to determine the correct interface for the vscode api.

A type declaration file is available for vscode-webview on npm.: npm install @types/vscode-webview

Then, in your code, you would put in your imports:

import "vscode-webview"

This is a little different from the usual import * from "vscode-webview" as the author has used a global scoped declare to match the globally scoped acquireVsCodeApi function.

Link on npm: [@types/vscode-webview] https://www.npmjs.com/package/@types/vscode-webview

To avoid the dubious package:

Copy the contents of @types/vscode-webview into a local file, and point your imports at your local file.

2
  • 1
    Please explain why it is most correct. Maybe by pointing out what less correct options you compare to and explain how they are less correct. Maybe describe the benefits povided by being more correct. How can you be sure that there are no more correct options? Please consider taking the tour and reading How to Answer.
    – Yunnosch
    Dec 31, 2022 at 18:27
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Eyeslandic
    Jan 2 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.