HTML Vue Jump is a Visual Studio Code extension designed to enhance the development experience for specific Vue.js projects structured with HTML files containing either inline <script> tags or associated .dev.js files.
Features
Go to Definition: Allows jumping from a variable or method used in the HTML template to its definition within the <script> tag or the corresponding .dev.js file.
Supports definitions in data, methods, and computed properties of the Vue instance.
Go to Definition to Side: Use VS Code's built-in "Go to Definition to Side" command (e.g., Ctrl+K F12) to open the definition in a separate editor pane.
Go to Definition in New Tab (Command): Provides a command (html-vue-jump.goToDefinitionInNewTab) to open the definition in a new editor tab beside the current one. You can trigger this via the Command Palette (Ctrl+Shift+P).
How it Works
The extension parses the <script> content (inline or from the .dev.js file) using @babel/parser to find the new Vue({...}) configuration object. It then traverses this object to locate the definition of the selected identifier.
Requirements
Assumes a project structure where HTML files either contain a single <script> tag with a new Vue({...}) instance or have a corresponding JavaScript file at js/basename.dev.js relative to the HTML file, containing the new Vue({...}) instance.
Known Issues
Error recovery during parsing might lead to inaccurate results in case of syntax errors in the script.
Does not currently support Vue Single File Components (.vue files) or more complex module structures.
Assumes the Vue instance is created using new Vue({...}).
Release Notes
0.0.1
Initial release with basic Go to Definition support for inline scripts and associated .dev.js files.
