How to auto-update HTML preview on preview-clicking JS file in project browser?

Hi,

I'm trying to create a workspace where I can quickly page through dozens of example JS files and see the results (as if they were placed in the src attribute of a <script> in a basic HTML template).

So far, I've got it previewing my `index.html` in a pinned tab that is loading in `example01.js` in the `<script>` tag. I also have `Editor > General > Editor Tabs > Enable preview tab` enabled, so I can single-click on example02.js, example03.js… and so on, but what I'm hoping to achieve is have the preview of `index.html` update and inject the filename of the active preview editor into `index.html` and refresh.

 

 

I'm not opposed to even learning Swing and making a plugin to achieve this workflow, but I feel that this is likely overkill and maybe a task runner, file watcher or run config could do the job with less complexity.

For some context, I'm trying to make a workflow where it's crazy fast to page through p5.js examples. Right now, there's too much clicking back and forth into the website, and I'd like to be able to browse examples right in Webstorm.

Any pointers of what road to go down would be super-appreciated!

Thanks in advance.

0

Not sure I follow you. Would you like the script src path to auto-update once you click the corresponding .js file? There are no IDE features I can think of that can do the job

You can create a script that alters the index.html and use run configurations to trigger it, but there is no way to automatically start the run configuration on previewing a file, you would need a use some hot keys, etc to start it

0

Thanks for the response. You're understanding correctly. I have a ton of JS files, but no corresponding .html files and I'd like to be able to click through them fast to see what they do visually.

The task runner option is a good idea, though I was hoping I could do it as a single click instead having to add a hotkey as well.

It's a lot of effort to save a single keypress, but I'm interested to try and develop a Webstorm plugin that provides this functionality (auto browser preview on js file preview in webstorm). The use case on this is to make the p5.js example library a bit more navigable for webstorm users. I figure it'd be worth it for some at least some of it's thousands of users.

If anyone has any pointers as to where in the IntelliJ Platform API I might find the hooks to trigger builds on file preview, I'd appreciate the push in the right direction!

Thanks kindly!

0
We have a special forum for questions regarding plugins development - https://intellij-support.jetbrains.com/hc/en-us/community/topics/200366979-IntelliJ-IDEA-Open-API-and-Plugin-Development. Feel free to ask questions there
0

请先登录再写评论。