fix: Enable Tailwind CSS autocomplete in Angular template files#78
Open
LucasPC-hub wants to merge 1 commit intonathansbradshaw:mainfrom
Open
fix: Enable Tailwind CSS autocomplete in Angular template files#78LucasPC-hub wants to merge 1 commit intonathansbradshaw:mainfrom
LucasPC-hub wants to merge 1 commit intonathansbradshaw:mainfrom
Conversation
This commit fixes the issue where Tailwind CSS autocomplete was not working in Angular component HTML files, only in inline templates. Changes: - Map Angular language_id to "html" instead of "angular" for LSP compatibility - Remove invalid scope_opt_in_language_servers configuration - Update README with Tailwind CSS configuration instructions The Tailwind CSS Language Server only recognizes "html" and "typescript" language IDs. By mapping Angular to "html", we enable Tailwind autocomplete in .component.html files while maintaining all Angular Language Server features. Fixes: Tailwind CSS IntelliSense in Angular template files Related: zed-industries/zed#39507
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Tailwind CSS autocomplete wasn't working in Angular
.component.htmlfiles - it only worked in inline templates within.tsfiles.Previously, the only workaround was to manually change the file language from "Angular" to "HTML", but this caused the loss of TypeScript variable references from the component, making the Angular IntelliSense much worse.
Solution
This PR makes two changes that together fix the issue:
Change language_id mapping in
extension.toml:"Angular" = "angular"to"Angular" = "html"Remove
scope_opt_in_language_serversline fromlanguages/angular/config.tomlscope_opt_in_language_servers = ["tailwindcss-language-server"]Both changes are needed - the language_id mapping alone doesn't solve it, and removing the scope_opt_in line alone doesn't solve it either. Together, they enable Tailwind autocomplete while keeping the file detected as "Angular" language, preserving all Angular IntelliSense features.
Configuration Required
Users need to add this to their Zed
settings.json:```json
{
"languages": {
"Angular": {
"language_servers": ["angular", "tailwindcss-language-server", "..."]
}
}
}
```
Result
Now Tailwind CSS autocomplete works in
.component.htmlfiles while keeping them as "Angular" language type, maintaining full Angular IntelliSense with TypeScript variable references.Related to zed-industries/zed#39507