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
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?
Solution
Not sure
Arrow functions are incorrectly highlighted (✅ solved)
Incorrect |
Correct |
|
|
Solution
PR #13
So, given this file
// syntaxes/glimmer-ts.json
{
"scopeName": "source.gts",
"patterns": [{ "include": "source.ts" }]
}
If I make it so source.ts
is broken like source.bla
all highlighting except for some suspect characters is removed.
![image](https://private-user-images.githubusercontent.com/83799/252163024-9e8b7a4e-fb2f-4e6c-8b4a-9239eaff711e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4ODE2OTgsIm5iZiI6MTcxODg4MTM5OCwicGF0aCI6Ii84Mzc5OS8yNTIxNjMwMjQtOWU4YjdhNGUtZmIyZi00ZTZjLThiNGEtOTIzOWVhZmY3MTFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDExMDMxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUwOWY5ZjA4YzdlODFhMDM1MmU5Y2RlNzE2NTkwYjg0N2M4MDY1YjVkZjgzZGRlYWU1YzYyMzZhODU2MDE3ZWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.VxumLiJye8CDM1awKaBZ_0xZ6ewZ2E47etjCwaVo5J4)
These extra colours come from having this setting turned on.
![image](https://private-user-images.githubusercontent.com/83799/252163723-a67d1642-c3fa-4c2a-950f-42849a1a3ce0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4ODE2OTgsIm5iZiI6MTcxODg4MTM5OCwicGF0aCI6Ii84Mzc5OS8yNTIxNjM3MjMtYTY3ZDE2NDItYzNmYS00YzJhLTk1MGYtNDI4NDlhMWEzY2UwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIwVDExMDMxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM2NjA4MWNjMzI2MDQxZGJkYzY5MDJkMDVlZmI1M2Q4NzgyZDZiYWMwOGYzMzdkMDBiMmI1ZmMyNzE2OTc3OTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ExbIte_9Xv9gHGlnSevJZPG72gus6m_Jip7gGc7etNY)
The arrow function >
being red is down to that setting and gives a reason for #5 occuring
To fix that we need to add the following to the glimmer-ts and glimmer-js grammars in the package.json.
"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 |
|
|
Partial Solution
Set editor.foldingStrategy
to indentation
in settings.
"[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 |
|
|
Solution
PR #15
The handlebars extension was causing this, merging #15 and disabling that extension will fix the issue.
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 |
|
|
Solution
Need to add glimmer-ts
and glimmer-js
to eslint.validate
.
// .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?