demo/ParentWithChildren.vue: Parent component with child components
demo/ComplexParentComponent.vue: Complex structure with multiple children and grandchildren
demo/DynamicHeading.vue: Component that renders dynamic heading levels using :is
demo/DynamicHeadingDemo.vue: Demonstrates usage of dynamic heading components
These demo files can be used to test the extension and see how it visualizes heading structures across component boundaries.
Screenshots
When using the extension with these demo files, you will see a tree structure in the sidebar showing all headings, with warnings for improper heading level hierarchy:
Development
Prerequisites
Node.js
npm/yarn
Setup
# Install dependencies
npm install
# Run in development mode
npm run watch
# Debug in a new VSCode window with F5 key
Build
# Package the extension
npm run vscode:prepublish
Version History
0.0.5
Improved heading level validation to detect h1 tags appearing after any heading level (h2-h6)
Added comprehensive test suite for all dynamic heading patterns
Updated documentation to remove references to temporarily disabled features
Fixed component type definitions for better compatibility
0.0.4
Improved heading structure validation for accessibility
Enhanced warning system for h1 tags appearing after h2 tags
Optimized dynamic tag detection to focus on actual heading elements
Modified component resolution for better performance
0.0.3
Modified VSCode engine requirements to support Cursor editor (v0.49.6+)
Lowered VSCode requirement from v1.99.1 to v1.60.0 for wider compatibility
Fixed type definitions to match new engine requirements