feat: filter path suggestions by file type in HTML attributes

[magliocchetti]

Summary

This PR implements intelligent file filtering for HTML path completion, addressing microsoft/vscode#242999.

When typing paths in HTML attributes, files are now prioritized based on the expected file type. For example, <link rel="stylesheet" href=""> now shows CSS files first, making it faster and easier for developers to find the right files.

Problem

Currently, when autocompleting file paths in HTML attributes, VS Code shows all files regardless of the context. This makes it harder to find the appropriate file, especially in large projects with many different file types.

Example: When typing <link rel="stylesheet" href="">, developers have to scroll through JavaScript files, images, HTML files, etc., to find their CSS files.

Solution

This implementation analyzes the HTML tag and its attributes to determine which file types are most relevant, then prioritizes those files in the autocomplete list using sortText.

Key Features

• Context-aware filtering: Analyzes both tag name AND attributes (e.g., <link rel="stylesheet">)
• Non-exclusive: All files remain visible and selectable
• Smart prioritization: Matching files appear first, others second, directories always included
• Extensible: Easy to add new tag/attribute patterns
• Zero breaking changes: Fully backward compatible

Changes

Core Implementation

• src/htmlLanguageTypes.ts: Added optional attributes field to HtmlAttributeValueContext interface
• src/services/htmlCompletion.ts: Pass node.attributes to completion participants
• src/services/pathCompletion.ts:
  • Added getExtensionFilter() method for context analysis
  • Modified providePathSuggestions() to apply filtering using sortText
  • Supports 6+ tag/attribute combinations

Testing

• Added 4 new comprehensive test cases
• Updated 1 existing test for new fixture
• All 146 tests passing ✅
• Added styles.css test fixture

Supported Patterns

HTML Pattern	Prioritized Extensions	Use Case
<link rel="stylesheet" href="">	.css, .scss, .sass, .less	Stylesheets
<link rel="icon" href="">	.ico, .png, .svg, .jpg, .jpeg, .gif, .webp	Favicons
<link rel="apple-touch-icon" href="">	.ico, .png, .svg, .jpg, .jpeg, .gif, .webp	Apple device icons
<script src="">	.js, .mjs, .cjs, .ts, .tsx, .jsx	JavaScript files
<img src="">	.png, .jpg, .jpeg, .gif, .svg, .webp, .bmp, .ico	Images
<video src="">	.mp4, .webm, .ogg, .mov, .avi	Video files
<audio src="">	.mp3, .wav, .ogg, .m4a, .aac, .flac	Audio files

How It Works

1. User triggers path completion in an HTML attribute
2. System analyzes the tag and its attributes (e.g., <link> with rel="stylesheet")
3. getExtensionFilter() determines relevant file extensions
4. Matching files get sortText = "0_filename" (appear first)
5. Non-matching files get sortText = "1_filename" (appear second)
6. Directories always included without sortText modification
7. Result: Developer sees CSS files first, then other files, with folders always visible

Testing

Automated Tests

Results: All 146 tests passing ✅

New Test Cases

• ✅ CSS filtering for <link rel="stylesheet">
• ✅ Image filtering for <link rel="icon">
• ✅ JS prioritization for <script> tags
• ✅ No filtering when attributes don't match

Backward Compatibility

✅ Fully backward compatible

• Optional field in context interface (graceful fallback)
• All existing tests pass without modification (except count update)
• No API breaking changes
• Non-exclusive filtering (all files still accessible)
• Works with existing completion UI

Performance

• Minimal overhead: Filtering logic is lightweight
• No UI changes: Uses existing sortText mechanism
• Lazy evaluation: Only filters when context available
• No additional I/O: Uses existing file list

Related Issues

• Addresses microsoft/vscode#242999
• Implementation location suggested in this comment

Behavior

Before: (All files mixed together)

about/
index.html
script.js
styles.css

After for <link rel="stylesheet" href="">: (CSS files prioritized)

styles.css      ← CSS file first
about/          ← Folders
index.html      ← Other files
script.js

Checklist

• Implementation complete
• All tests passing (146/146)
• No breaking changes
• Backward compatible
• Documentation added (inline comments)
• Follows existing code style
• TypeScript types properly defined
• Handles edge cases (quotes, missing attributes)
• Extensible design

Additional Notes

This implementation follows the guidance from the cited issue thread to implement the feature in src/services/pathCompletion.ts. The solution is production-ready and can be easily extended to support additional tag/attribute combinations in the future.

The filtering is intentionally non-exclusive to maintain flexibility - all files are still shown, just in a better order. This ensures users can still select any file if needed, while making the common case (selecting the correct file type) much faster.

---

Note: This PR is for the vscode-html-languageservice repository. The issue #242999 is in the main vscode repository.

[Copilot]

Pull Request Overview

This PR implements intelligent file filtering for HTML path completion based on the HTML context (tag and attribute combinations). When typing paths in HTML attributes, files are now prioritized by their expected file type - for example, CSS files appear first when autocompleting in <link rel="stylesheet" href="">.

• Added context-aware filtering that analyzes both HTML tag name and attributes to determine relevant file types
• Implemented non-exclusive prioritization using sortText to maintain backward compatibility
• Extended support for 6+ tag/attribute patterns including stylesheets, scripts, images, videos, and audio files

Reviewed Changes

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

Show a summary per file

File	Description
src/htmlLanguageTypes.ts	Added optional attributes field to HtmlAttributeValueContext interface
src/services/htmlCompletion.ts	Modified to pass node attributes to completion participants
src/services/pathCompletion.ts	Implemented core filtering logic with getExtensionFilter() method and updated suggestion prioritization
src/test/pathCompletions.test.ts	Added 4 comprehensive test cases and updated existing test count
src/test/pathCompletionFixtures/styles.css	Added CSS test fixture file

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}