Question 130115 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – how to add documentation to a Svelte Component on hover inside VSCODE?

I’m working on a Svelte project in VSCode, and I’d like to provide some additional documentation for my Svelte components. Specifically, I want to add some simple lines of text that appear in a popup when the user hovers over the component.

Currently, when I hover over a Svelte component in VSCode, I see the following default text:

(alias) class MyComponent
import MyComponent

However, I want to add some custom text that explains how to use the component properly. (For example, for some components to work correctly, I need to tell the user to apply a tailwind class peer to the previous element.)

Is there a way to add this type of documentation to Svelte components in VSCode? Ideally, I’d like to be able to specify the documentation text in a comment within the component file itself.

It would also be great if the documentation text could support markdown formatting, including headers (#, ##, ###), links, —- dividers, – lists and so on.

Any help would be greatly appreciated! Thank you!

Tags:

2

Answers


  1. 0

    I was searching for the same issue as in this question.

    This question has useful answers: Is there a standard way to document Svelte components?

    To summarize from that question:

    • Svelte does provide broad guidelines to document components here and in their FAQ. I am using this way and can see the documentation reflected on hover in VS Code. It does not work on Webstorm though. But since you mentioned VS Code, I think this should be adequate for your need.
    • There are other packages like sveld, sveltedoc-parser but I haven’t been able to get them working for Svelte3. My work projects are based on Svelte3.

    This question should probably be marked as a duplicate.

    Login or Signup to reply.
  2. 0

    yes, you can using vscode:

    basically you need to create a html <!-- --> comment at the start of your *.svelte file which includes at the beggining @component

    Example:

    example using your example issue:

    <!--
  @component
  ## To make this work:
  You MUST SET `peer` tailwind class, to the previous HTML element manually

  ### Notes:
  you may need to style your parent element by adding `flex flex-row-reverse`, add some `gap` and so on... because this component is just a tooltip, not a container
-->

    as you see you can use also Markdown inside the comment.

    how it looks?

    on hover of the import:
    enter image description here

    on hover of the component itself:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search