Svelte Function Outline is a Visual Studio Code extension that provides a tree view of functions within Svelte files. This extension helps developers navigate and manage their Svelte components more efficiently by displaying a hierarchical list of functions defined in the <script> tag of Svelte files.
Features
Function Hierarchy: Displays a nested tree view of functions within Svelte files.
Quick Navigation: Allows users to quickly navigate to function definitions within the editor.
Automatic Refresh: Automatically updates the tree view when the active editor changes or the document is saved.
Installation
Open Visual Studio Code.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X.
Search for "Svelte Function Outline" and click "Install".
Usage
Open a Svelte file (.svelte) in the editor.
The "Svelte Function Outline" view will appear in the Explorer panel, showing a list of functions defined in the <script> tag.
Click on a function in the tree view to navigate to its definition in the editor.
Commands
Go to Function: Navigates the editor to the selected function's definition.
Requirements
Visual Studio Code
Svelte files with <script lang="ts"> tags
Known Limitations
Currently supports only TypeScript functions defined within <script lang="ts"> tags.
Nested functions are displayed with indentation to represent their hierarchy.
Contributing
Contributions are welcome! Please open an issue or submit a pull request.
License
This extension is licensed under the MIT License. See the LICENSE file for more details.
