How to use JSDoc to document styled components props?

Question

I have tried to document props on vscode with JSDoc multiple times on my custom styled component, but I just can't make it show up in any way.

I have tried with the following syntax:

/**
 * @param {boolean} testprop - 20px
 */
export const Text``

export interface TextProps {
  /* 20px */ t2?: boolean
}
export const Text<TextProps>``

None of those 2 works so far.

• Is there any way to make it show up when you hover the prop?
• What's best practice for this?

Answer 1

This syntax worked for me:

export interface TextProps {
  /** 20px */ t2?: boolean
}
export const Text<TextProps>``

Note that the comment starts with 2 asterisks (/**)

Now I can hover t2 and get the comment I set before.