I'd like to do something like a project file. When the user opens it, the webview of my extension would welcome the user instead of the default VSCode editor.
I know I can workaround it by adding extra context menu items or buttons, but in this case I'm curious if it's possible to override that it by default tries to open in the editor.
Is this possible either manually or automatically?
What you're after sounds exactly like what the upcoming webview / custom editor API hopes to accomplish.
The custom editor API aims to allow extensions to create fully customizable read/write editors that are used in place of VS Code's standard text editor for specific resources. These editors will be based on webviews. We will support editors for both binary and text resources.
See the following issue for more info and further links to the proposed API, example extensions etc:
Custom webview editor API (#77131)
Note that it usually takes a while for new APIs to make it into stable releases after being made available as "proposed APIs".
Related
I am developing a VSCode extension (a graphical modeler, not text based). On validate some errors/problems can show up in the VSCode problems tab. (Diagnostics Collection). How can I intercept a click event on a specific problem listed in the problems tab? I need to highlight the related object in my custom modeler. It seems there is only a standard built-in behavior in VSCode to scroll to a text-line. I can't find an API to subscribe to click events on problems in the VSCode problems tab.
Scenario:
We have a graphical custom editor for BPM as VSCode extension running in a Webview (A non text-based editor: See screenshot)
There is a validator and several problems can be show up in VS Code problems tab (As a diagnostic collection).
When user clicks on specific problem (e.g. the 3rd message) How can we now the user clicked on the 3rd problem in the list of problems? We want to use that user-event to show some (problem text or solution) in the graphical modeler. So we can't make use of the VSCode built-in features for text based languages.
Screenshot VSCode Graphical Custom Editor
I am building an extension for VsCode and wanted to show a small tutorial on how to use it, but I can't find an appropriate API for that. Obviously, I can save some variables in the global state to follow user progress and use some FE framework to do some drawing in a webview, but it feels very custom. I saw that VSCode shows a tutorial on initial installation and hoped I can do the same.
In VSCode it is called a walkthrough and is defined simply in package.json. Here is a link to this API: https://code.visualstudio.com/api/references/contribution-points#contributes.walkthroughs
and this an example project https://github.com/microsoft/vscode-extension-samples/blob/main/getting-started-sample/package.json#L39
It is pretty easy to define and use. It accepts text, media files, and markdown files.
I'm looking for a solution.
When I type some CSS inside VSC, the editor show me a list of possible choice. Then I select the desire one and the editor show me again a list of possible properties, but between all this properties their are some old one that are still use in web development if we want to make a website compatible with older browser.
I figure that some suggestion in VSC are display with strikethrought, so I'm looking to a solution to apply this to my personal snippets.
I've been using PhpStorm for awhile, for PHP as well as JS. I would love, however, to switch to VSCode since it's lighter, open source and free. But one feature that I cannot quite carry over with extensions is Code Style settings.
PhpStorm has a sweet visual interface in settings that allows you to set up detailed code style rules with live examples right there. ESLint, unfortunately, doesn't have anything similar - it's all text rules (which is a drag and takes forever to set up).
So I'm wondering if there's any way at all to export PhpStorm code style settings as ESLint rules? Or if there's an app that has a similar interface to set up ESLint? Or maybe there's a VScode extension that I am missing that has a similar interface?
Is it possible to access the DOM in a VSCode plugin, to manipulate the interface elements?
For example, hiding the left sidebar with the Explore, Search, Git, and Debug icons.
An extension cannot directly modify the DOM. Please see https://code.visualstudio.com/docs/extensions/our-approach for more information on our approach for extensions.
See also the https://code.visualstudio.com/api/extension-capabilities/overview page, which states:
However, we also impose restrictions upon extensions to ensure the stability and performance of VS Code. For example, extensions cannot access the DOM of VS Code UI.