Can't view my changes on Extension Host for my Custom VSCode extension - visual-studio-code

This is my first extension, so go easy on me haha
My extension basically uses TypeScript + Svelte, here's the repo: https://github.com/renan-brasilio/sfdx-ui
I was able to create the first version, published on VSCode Market, I had no problems on testing but now every time that try to see the changes (normally I use yarn watch or even npm run watch) but no matter the change I do, I can't see it on the Extension host, it always show the version that I created before.
I even unpublished my extension and uninstalled from my VSCode, but no luck.
I see one detail here on my sidebar.ts which gets the main page, is showing an error
Cannot find module '../components/Sidebar.svelte' or its corresponding type declarations.ts(2307)
Any thoughts on this?
Thanks in advance.

Related

How to make custom changes to a VSCode extension directly from the extensions folder

Good day. I have a third-party VSCode extension that's been throwing an error all day. In order to actually diagnose this, and then submit an issue on the parent GitHub repository, I've been poking around and trying to figure out where the error is being thrown from.
I have a decent idea where the error is originating from, but I'd like to add a console.debug statements to confirm this.
My question is this: I've made changes to the actual VSCode extension source code (installed within the VSCode extensions folder ), but VSCode is not picking up those changes. What do I do? Clean the cache or something, I'm not quite sure.
The source file is basically just a Ts-compiled-to-JS file, so still pretty easy to work with.
I've checked out the Developer Tools Console (Ctrl+Shift+I), but the error stack is not particularly helpful.

Pop-up message showing " Did you attach the CPU-Profile?" while trying to run live server in VScode

I have Live-Server extension installed in my VSCode.
I was trying to run the live-server but a pop-up appeared as below:
This is a reminder to make sure that you have not forgotten to attach 'c\Users\HP\AppData\Local\Temp\ritwickdey.LiveServer-unresponsive.cpuprofile.txt' to an existing performance issue.
I couldn't find much recourses to understand what the issue was or what action I should take about it.
BTW: Live Server is not loading the browser-page by its own, but at port:5500 its running.
Please Help.
after researching i found this blog, where i got to know that its because of performance issue
https://www.nicoespeon.com/en/2019/11/fix-vscode-extension-performance-issue/
first thing bundle your vsCode extensions:https://code.visualstudio.com/api/working-with-extensions/bundling-extension
if that solves the issue then great if not then add this extension to vsCode
https://marketplace.visualstudio.com/items?itemName=nicoespeon.abracadabra
hope the first link will provide complete solution.
Happy Learning

How to check built-in formatter/beautifier version? and does it auto-update?

Somebody from stackoverflow asked me to check if I have the latest js-beautify in my vscode. But I don't know how to check it. Can you please help?
I read from one of the threads in VS Code that it uses js-beautify as the formatter (it's the one doing the 'formatonsave' etc.). Please correct me if I'm wrong.
If it uses js-beautify, how do I know what version it is in? and does it auto-update to the latest version whenever there's a new one?
Thank you.
I already tried going through documentations and I also checked the preferences thoroughly, but I can't seem to find how to (manually) check for updates about plugins, especially the built-in ones like js-beautify.
The default setting for extensions.autoUpdate in VS Code enables auto-updating for all extensions. You can confirm this in your user settings or simply bring up the Command Palette (CTRL+SHIFT+P) and type 'auto update' to enable or disable it.
In the Command Palette you can also update extension mannually.
The current version of every installed extension is listed right next to its name in the extension panel or under the Changelog panel.

Implementing a Preview channel of a vscode extension

I want to offer a preview version of my vscode extension so that user can get changes more frequently.
Essentially, I'd like to replicate what VSCode does:
* Stable: tested changes, happens every month/ad hoc
* Insiders: Daily build that gets sent to users
I noticed that the Visual Studio marketplace has a mechanism for marking an extension as "Preview" but this seems to be only cosmetic, in other words, it still overwrites the latest stable version of the extension.
I thought about publishing a new extension and calling that the "Preview" version, but then I want to only allow one of the extensions to be enabled at any given time because it's unclear how my extension will operate if you essentially have 2 extensions installed and running at the same time.
Has anyone tried this before? What's the best way to achieve this?
This is no way to do this currently. The feature request is tracked here
Existing extensions—such as tslint—publish two versions: a normal release and a preview version

firebreath plugin refresh after update

I want to reload a plugin after update without restarting browser. I tried the mac version, it works fine, howeve, I need to change the plugin name for each version.
navigator.plugins.refresh(false);
http://www.firebreath.org/display/documentation/Deploying+and+updating+your+plugin?focusedCommentId=8585308#comment-8585308
In windows, I tried those steps and I couldn't make it work. Has anyone had any luck with this? Does anyone know what could be wrong?
"On Windows you even need to install it to a version-specific directory with a version-specific filename. Once the plugin is installed, you can try the following to reload the plugin in open browsers
<script>
var myplugin = "<object id=\"plugin\" type=\"application/x-foobar\"> </object>";
function onload(){ // Assuming this function put your plugin on the page in the first place
document.getElementById('pluginHere').innerHTML = myplugin;
}
function reload(){
document.getElementById('pluginHere').innerHTML = "";
document.getElementById('pluginHere').innerHTML = myplugin;
}
</script>
thanks alot.
This is a difficult trick that can go wrong in a lot of different ways. It's difficult for me to guess what might be going wrong specifically, particularly since you said "on windows", but you haven't specified what browser that is. All of the browsers work differently in subtle ways and IE and the others are completely different as far as this goes.
Things you could try:
use setTimeout to add a small delay between removing the plugin from the DOM and re-adding it
open about:plugins and then shift-refresh to see if it picks up the new version
Try different browsers and see what the behavior is
Use Process Monitor to monitor the queries of the registry and see when the registry keys are being accessed; use this to help plan your strategy.
Anyway, I hope some of that helps; I used to upgrade that way but it was too error prone and too prone to things changing with new browsers, so these days I just make the client restart their browser on upgrades. It saves a lot of hassle and lots of development time.
I use a signed CAB with MSI inside to load the plugin on internet explorer.
On the first time install I found that the plugin can be accessed from Javascript but events were not working.
When I looked at loaded plugins, the plugin was not loaded.
If I refreshed the page the plugin is loaded.
my solution was to add the following code from this stack overflow question
One time page refresh after first page load
This worked like a charm.