Skip to content

Show JSDoc descriptions for JS in HTML script tags#269515

Open
magliocchetti wants to merge 3 commits into
microsoft:mainfrom
magliocchetti:268776-fix-jsdoc-hover-html-script-tags
Open

Show JSDoc descriptions for JS in HTML script tags#269515
magliocchetti wants to merge 3 commits into
microsoft:mainfrom
magliocchetti:268776-fix-jsdoc-hover-html-script-tags

Conversation

@magliocchetti

Copy link
Copy Markdown
Contributor

Summary

Fixes #268776 - JSDoc descriptions and MDN reference links now appear when hovering over JavaScript code inside HTML <script> tags, matching the behavior in .js and .ts files.

Problem

When hovering over JavaScript constructors and methods inside HTML <script> tags, only the type signature was displayed. JSDoc descriptions and MDN reference links from TypeScript definition files (lib.dom.d.ts) were missing.

Before:

new DataTransfer(): DataTransfer

After:

new DataTransfer(): DataTransfer

The **DataTransfer** object is used to hold any data transferred between contexts,
such as a drag and drop operation, or clipboard read/write.

*@see*  [MDN Reference](https://developer.mozilla.org/docs/Web/API/DataTransfer)

Root Cause

The doHover method in extensions/html-language-features/server/src/modes/javascriptMode.ts was only using info.displayParts from TypeScript's QuickInfo response, ignoring:

  • info.documentation - JSDoc description text
  • info.tags - JSDoc tags including MDN references

Changes

  1. Added displayPartsToMarkdown() helper function

    • Converts TypeScript display parts to markdown
    • Handles {@link https://...} tags for MDN references
    • Properly formats URLs as markdown links
  2. Enhanced doHover() method

    • Includes documentation from info.documentation
    • Formats and includes tags from info.tags
    • Maintains existing type signature display
  3. Added test coverage

    • New test file: extensions/html-language-features/server/src/test/hover.test.ts
    • Tests for DataTransfer, Blob, and built-in method documentation

Testing

  • ✅ Manual testing with HTML file containing various JavaScript constructors
  • ✅ Verified MDN links appear and are properly formatted
  • ✅ No compilation errors
  • ✅ Added unit tests for hover functionality

Impact

  • Low risk: Only affects hover information display in HTML files with embedded JavaScript
  • No breaking changes to API or behavior
  • Aligns HTML JavaScript hover with standalone JS/TS file behavior

Closes #268776

When hovering over JavaScript code inside HTML `<script>` tags, JSDoc
descriptions and MDN reference links from TypeScript definition files
were not being displayed, although they worked correctly in .js and .ts files.

The issue was in the HTML language features server's `doHover` method in
javascriptMode.ts. It only extracted the type signature from TypeScript's
QuickInfo (info.displayParts) but ignored the documentation
(info.documentation) and tags (info.tags) containing JSDoc descriptions
and MDN links.

This commit:
- Adds displayPartsToMarkdown() helper to convert TypeScript display parts
  to markdown, properly handling {@link https://...} tags for MDN references
- Modifies doHover() to include documentation and tags in hover response
- Adds test cases to verify JSDoc descriptions and MDN links are shown

Fixes microsoft#268776

Signed-off-by: Giovanni Magliocchetti <[email protected]>
Copilot AI review requested due to automatic review settings October 2, 2025 10:51

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR enhances the hover information displayed for JavaScript code inside HTML <script> tags by adding JSDoc descriptions and MDN reference links, bringing parity with the hover behavior in standalone .js and .ts files.

Key changes:

  • Added a displayPartsToMarkdown() helper function to convert TypeScript display parts to markdown format with link support
  • Enhanced the doHover() method to include documentation and JSDoc tags in hover tooltips
  • Added comprehensive test coverage for the new hover functionality

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
extensions/html-language-features/server/src/modes/javascriptMode.ts Added markdown conversion helper and enhanced hover method to include JSDoc documentation and tags
extensions/html-language-features/server/src/test/hover.test.ts Added new test suite covering hover functionality for DataTransfer, Blob, and built-in methods
Comments suppressed due to low confidence (1)

extensions/html-language-features/server/src/modes/javascriptMode.ts:1

  • The substr() method is deprecated. Use substring() or slice() instead for better compatibility and future-proofing.
/*---------------------------------------------------------------------------------------------

Comment thread extensions/html-language-features/server/src/test/hover.test.ts Outdated
@aeschli

aeschli commented Oct 21, 2025

Copy link
Copy Markdown
Contributor

Thanks @obrobrio2000 !

@vs-code-engineering vs-code-engineering Bot added this to the October 2025 milestone Oct 21, 2025
@amunger

amunger commented Oct 21, 2025

Copy link
Copy Markdown
Collaborator

lint errors:

[hygiene                  ] extensions/html-language-features/server/src/modes/javascriptMode.ts(258,42): Unexpected unicode character: "—" (charCode: 8212). To suppress, use // allow-any-unicode-next-line
[hygiene                  ] File not formatted. Run the 'Format Document' command to fix it: extensions/html-language-features/server/src/modes/javascriptMode.ts

@aeschli aeschli modified the milestones: February 2026, March 2026 Feb 24, 2026
@aeschli aeschli modified the milestones: 1.111.0, On Deck Mar 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

BUG: No description for JS classes/methods in script tag for html file

5 participants