styled-components/vscode-styled-components

[Feature Request] - Syntax highlighting for custom tags

Open

#303 opened on Jun 3, 2021

View on GitHub
 (3 comments) (10 reactions) (0 assignees)JavaScript (893 stars) (123 forks)batch import
E-Hardbugenhancementhelp wanted

Description

Basically an extension of this issue: https://github.com/styled-components/vscode-styled-components/issues/224

Apparently the intellisense is with the TS compiler and can be configured there, but the syntax highlighting is handled by this plugin so setting custom tags in tsconfig.json has no effect on the syntax highlighting.

Is there a reason for this? Can we not just add a VS Code setting or whatever that allows you to set custom tags? Seems like a much better way of doing it than hard-coding tag names for every styled-components-style library under the sun (there are so many now!)

Contributor guide

Tech stack
typescriptjavascript
Domain
developer experiencetooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
VS Code extension developmentTextMate grammarsTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
Review the existing grammar definition for styled components (likely in a syntaxes/ directory) to understand how tags are currently handled. Investigate how VS Code's contributes.configuration can be used to add a user setting for custom tags. Look at the linked issue #224 for background on why this was not implemented initially. Consider referencing similar extensions that allow user defined tag names.