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.
Related
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'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".
I would like to add a button next to the terminal dropdown but can't see a way in the API to do this
From the docs:
[...] 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.
Therefore I think it is not possible to add a button next to the terminal.
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?
In my extension, I would like to check in a certain function, if the control (or command) key is currently pressed. How is that possible? I couldn't find any field that exposes this information.
If you read the below article
https://code.visualstudio.com/docs/extensionAPI/patterns-and-principles
It says
Visual Studio Code has a very rich extensibility model and there are many ways to extend the tool. However, we do not provide direct access to the underlying UI DOM to extension writers. With VS Code, we’re continually trying to optimize use of the underlying web technologies to deliver an always available, highly responsive editor and we will continue to tune our use of the DOM as these technologies and our product evolve. To maintain performance and compatibility, we run extensions in their own host process and prevent direct access to the DOM. VS Code also includes a built-in set of UI components for common scenarios such as IntelliSense, so that these experiences are consistent across programming languages and extensions and extension developers do not need to build their own.
We realize that this approach may initially feel restrictive to extension developers. We’re always looking for ways to improve our extensibility model and expand the capabilities available to extensions. We look forward to hearing your feedback and ideas.
This means your extension code doesn't run the in editor window context at all. And you can't hack into the webview as the extension api doesn't provide it. So you need to open a Feature request with VScode team and ask them to expose either the last keyboard event or atleast the status of Shift, Ctrl and alt keys. Currently they just discard it and throw it away (if no editor is open) else they send it to the monaco editor before checking for any shortcut combination
This does not directly answer your question but maybe helps solving your problem:
Your extension could contribute two different commands: For example first command myextension.runTarget (noDebug=true) and myextension.debugTarget (noDebug=false). In addition your extension can contribute keybindings that bind those two commands to different hotkeys, for instance CTRL + F5 and only F5.
Looks like vscode itself does it the same way (screenshot of keybindings view):
This question might be of use. With this approach you could track a key down event and then if the key code is equal to command (91 or 93 on Safari/Chrome, 224 on Firefox) or control. From there, you could put in your functionality if this returns as true, or however you want to structure it