VSCode extension?

[danielo515]

Hello.
I think this tool is the best thing since sliced bread. However, it is a bit unconfrotable to have to install it globally and then run it from the command line.
I think an VSCode extension wrapping this library will be awesome.
I am not sure if it will be worth wrapping this entire library or just cherry pick some components. For example, things that are not going to be needed are:

• command line
• ability to read files
• ability to execute astx files

So maybe it is possible to leverage the power of astx as a separate package?

[jedwards1211]

Thanks! Oh yeah I've wanted a VSCode extension since I started this... The thing I haven't figured out yet is if it's possible to make something very similar to the search/replace UIs in extensions (the VSCode extension API is extremely limiting). That's really the only thing holding me up...

Since this lib exports a node API the VSCode extension could wrap that. I would probably make the extension capable of loading a locally installed astx version as well so that you wouldn't have to upgrade the extension every time I release improvements to astx.

[jedwards1211]

Anyway I'm about to go on a long weekend vacation, but I'll try to research this next week

[danielo515]

I also have a couple of extensions and the extensions API it's indeed very limited.
Indeed you can't show an UI like the normal search and replace, but there are different approaches that other plugin authors are taking.
One is to resort to config.json and ask the user to put them there and turn them into commands that you can call on the commands pallette or trigger them with a hotkey. This is what find and transform does
You can open a webview and put any UI you want there, it may look a bit overkill but for a basic UI it may be possible. Some tools go beyond this and allow users to define their own UI, like ego power tools

Lastly seems that you can contribute with a tree view so maybe you can ask the search and replace using a prompt and then display the results on a tree view. Sadly they don't allow custom inputs there

[jedwards1211]

The fact that people are forced to do things like use a webview 🤦 Oh, I thought you were saying they had to run a local server to serve up the HTML, it's better than I thought, but there's still no way to embed arbitrary HTML in the sidebar or something like the little find and replace panel, right?
Being able to make a good UI for custom search and replace tools should be a basic requirement for any IDE extension API...
I need to see how the Atom TS experience is these days. Because Atom extensions are free to do anything.
I hate the way the VSCode team thinks...there's also been a longstanding issue with the extension architecture causing laggy Vim extension performance, many people have tried to make them care about it, but they don't give af.

[jedwards1211]

Okay, I guess the situation is getting better because now they have WebviewViews which can be rendered in the sidebar or panel areas. So when I make an extension it's probably gonna be webviews everywhere.

[danielo515]

Yes, they have the usual arrogance of "We built this awesome editor for free, you should be grateful and all that". We all know Microsoft right? I still don't trust them.
I also use the VIM extension and it is too bad the performance hits it gets from time to time.
I also saw that there is a custom editors api, which allows you to build, well, that, custom editors. Maybe it is the right thing for showing the list of affected files and maybe a preview.
I didn't knew you can use WebViews on the sidebars. Where you saw that?

[linonetwo]

I find a similar extension that can only do searches. I rise an issue there nikaspran/vscode-ast-query#15 Maybe do some modification to that extension can achieve this.

[jedwards1211]

Huh, some sorta interesting capabilities in esquery, but I think having a syntactic JS/TS pattern syntax is a lot better because you don't need to know node types and attribute names

[jedwards1211]

That would definitely be a good starting point! Astx find cli output colorizes what variables captured, would be nice to do that in an extension (in addition to supporting replacement). I'll start working on it soon

[jedwards1211]

@danielo515 @linonetwo I have a beta version of the extension out now: https://github.com/codemodsquad/vscode-astx

[linonetwo]

@jedwards1211 I give you a star on Github, but I cant find it in vscode extension store?

[jedwards1211]

I haven't put it in the vscode extension store yet because it doesn't support publishing beta versions. I guess I could use 0.x versions if you really want but right now all you have to do is download the VSIX file from the releases page (here's a link to the latest: vscode-astx-1.0.0-beta.8.vsix) and install that with code --install-extension vscode-astx-1.0.0-beta.8.vsix

[jedwards1211]

Oh I had put those instructions in the vscode-astx README but you didn't see it because I had forgotten to set the default branch to beta