Vue URL Finder (VS Code Extension)
A Visual Studio Code extension designed to help you quickly find the URL routes associated with the currently open Vue.js component file within your workspace.
This extension is particularly useful in larger Vue projects where tracing component usage back to specific URLs defined in router files can be time-consuming.
Features
- Find URL Usage: Activate a command to identify the router paths where the currently active
.vue
component is used.
- Import Hierarchy Traversal: Recursively searches upwards through the component import chain. It finds components that import the current one, then components that import those parents, and so on.
- Router File Scanning: Locates files named
router.ts
within your workspace (ignoring node_modules
).
- Route Parsing: Attempts to parse route definitions within found
router.ts
files to link components to URL paths. (See Limitations).
- Clear Output: Displays the found URLs in an information message popup and in a dedicated "Vue URL Usage" Output channel for easy viewing and copying.
Requirements
- Visual Studio Code version
^1.80.0
(or higher, match your package.json
's engines.vscode
value).
- A Vue.js project opened as the workspace root.
- Project dependencies (like
@typescript-eslint/typescript-estree
for AST parsing) are for the extension's development, not required for users installing the packaged extension.
Installation
1. From VS Code Marketplace
- Open the Extensions view (
Ctrl+Shift+X
or Cmd+Shift+X
).
- Search for
Vue URL Finder
(or by publisher name: <your-publisher-name>.vue-url-finder
).
- Click Install.
2. From .vsix
File (Manual Installation)
Usage
- Open your Vue.js project in VS Code.
- Open the specific
.vue
component file you want to investigate.
- Open the Command Palette (
Ctrl+Shift+P
or Cmd+Shift+P
).
- Type or select the command:
Vue Usage: Find URL Usage
.
- The extension will scan for
router.ts
files, parse routes, build an import map (this might take a few seconds, especially on first run or large projects), and trace the usage of your component.
- If associated URLs are found, they will be displayed in:
- An information message popup (modal).
- The "Output" panel under the "Vue URL Usage" channel.
Configuration
Currently, this extension relies on convention and does not have user-configurable settings. It automatically searches for files named router.ts
.
Known Issues & Limitations
This extension uses Abstract Syntax Trees (AST) for parsing, which is significantly more robust than the previous regex approach, but some limitations may still exist:
- Router Structure: Assumes a common router setup using
createRouter
and a routes
array within files named router.ts
. Complex or highly unconventional router definitions might not be fully parsed.
- Import Parsing (
buildImporterMapAst
): The logic for finding imports within <script>
tags is basic. It might miss imports from <script setup>
if not handled explicitly or complex import/export patterns within Vue files. A full SFC parser (@vue/compiler-sfc
) would be more robust.
- Dynamic Components/Routes: Components loaded dynamically using
<component :is="...">
or routes added programmatically after the initial router definition might not be detected.
- Performance: Building the initial importer map (
buildImporterMapAst
) involves scanning all .vue
files in the workspace. This might be slow on very large projects the first time the command is run after activation or cache clearing. Subsequent runs should be faster as the maps are cached in memory for the session.
- Path Alias Resolution: This version does not resolve path aliases (like
@/
). It relies on matching component filenames. If multiple components share the same filename but exist in different aliased paths, the results might be ambiguous or incorrect depending on the import statements found.
Release Notes
See the CHANGELOG.md file for details on changes between versions.
Contributing
Contributions, issues, and feature requests are welcome! Please check the repository issues page (replace with your actual repo link).