Template Only Component

Color stops after the closing template tag and only starts after I use console.log (I assume other function usage would do the same)

Class Component

Template highlighting just seems broken, decorators are not highlighted

Somehow creating a new syntax for glimmer-ts and glimmer-js causes slight differences even though they extend from js and ts. I attempted to port the changes made by @dfreeman here to https://github.com/lifeart/vsc-ember-syntax and saw the same issues appear.

What I've spotted so far and if a fix is found

• Decorators are incorrectly highlighted
  • tracking in glint repo as issues likely stems from glint typed-ember/glint#601
• Arrow functions are incorrectly highlighted
  • #13
• Code folding only on template tag
  • Partially solved with settings change
  • tracking here lifeart/vscode-ember#43
• HBS Comment Highlighting
  • #15
• eslint does not run
  • solved with settings change
• Missing functionality

Decorators are incorrectly highlighted

I believe this is when used with the glint-language-server, I don't think it provides the semanticTokenScopes required to apply the correct colours ontop of the syntax highlighting.

Typescript Language Server provides semantic tokens here https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/languageFeatures/semanticTokens.ts
@dfreeman Do you have any idea why they would not get passed down from TS -> Glint?

Incorrect	Correct

Solution
Not sure

Arrow functions are incorrectly highlighted (✅ solved)

Incorrect	Correct

// syntaxes/glimmer-ts.json
{
  "scopeName": "source.gts",
  "patterns": [{ "include": "source.ts" }]
}

"unbalancedBracketScopes": [
  "keyword.operator.relational",
  "storage.type.function.arrow",
  "keyword.operator.bitwise.shift",
  "meta.brace.angle",
  "punctuation.definition.tag",
  "keyword.operator.assignment.compound.bitwise.ts"
]

Code folding only on template tag (✅ partially solved)

If I reload the window, very breifly I can see the code folding arrows I'd expect then it switches to only offering folding for the template tag and it's contents.

This seems to be related to running ember-language-server. Tracking lifeart/vscode-ember#43

Incorrect	Correct

"[glimmer-js]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.foldingStrategy": "indentation"
},
"[glimmer-ts]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.foldingStrategy": "indentation"
},

Solution
Ember Language Server to provide a js/ts folding

HBS Comment Highlighting (✅ solved)

If a comment includes an @ symbol, the highlighting changes for that word

Incorrect	Correct

eslint does not run (✅ solved)

I think since the files are glimmer-ts files and not typescript files, eslint doesn't know to run

Incorrect	Correct

// .vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "glimmer-ts",
    "glimmer-js"
  ],
  "eslint.rules.customizations": [
    { "rule": "*", "severity": "warn" },
  ]
}

Missing functionality

• With remove-unused-imports installed any unused imports should be automatically removed, updating the code to run on glimmer-ts or glimmer-js files results in an error becaue of the template tag being passed to babel/typescript. A fix would need to happen in that plugin.
• Code natively offers an Organise Imports option from typescript which is not available on glimmer-* files.
• Auto-closing tags do not work inside <template> tags, possibly because html-language-server is not running for embedded handlebars

@dfreeman @chiragpat any ideas?

Currently the inline-template grammar does pattern matching in strings. This breaks the syntax highlighting when a string contains <template>.

Example:

I will open a fix PR shortly.

Hi @chiragpat!

I like how you extension implement syntax highlighting for .js/.ts files!
I have new .hbs syntax highlighting addon, and trying to figure out, how we can cooperate and use same syntax highlighting or kinda.

https://marketplace.visualstudio.com/items?itemName=lifeart.vscode-glimmer-syntax

Hello!! Great plugin!

I was wondering if it makes sense to migrate the plugin to https://github.com/glimmerjs to collocate with the runtime and future changes?

This would be similar to https://github.com/sveltejs/language-tools where they offer a language server and editor plugins.

VS Code is not properly highlighting an angle bracket component invocation where that component is from an argument, using the @componentName syntax: