"type" font-locking not supported in .tsx

[nahuel]

a .ts file with this content:

type n = number

will be correctly font locked, but if the file is a .tsx one, nothing will be font locked. Note, I'm using:

(add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))

[josteink]

First of all: I have no actual experience with JSX or TSX files/expressions. I've seen how they're supposed to work, but have never actually written or edited any.

Second: Font-locking, indentation and all that is controlled by typescript-mode. I'm pretty sure tide isn't involved here. (Tide mainly controls the IDE-like functions like auto-completion, refactoring, code-navigation, etc which involves communication with tsserver behind the scenes.)

With that said: Did you follow all the instructions in the tide readme? It seems that the example adds some more customizations than you did.

Does applying those hooks too help?

[ksjogo]

You are using web-mode so web-mode is doing (or not) the font locking.

[josteink]

Indeed. I guess for now, we can say the issue of font-locking actually belongs in the web-mode repo.

@nahuel: Is that a good enough answer for you? Can you re-file your issue there?

Feel free to reference this issue, so that in the future other people with a similar issue will be able to resolve their issue as well.

[nahuel]

I had the exact configuration as stated in https://github.com/ananthakumaran/tide#tsx.

Now I see the culprit is web-mode, I though typescript-mode colorized the TS fragments in the .tsx file and web-mode colorized the JSX/HTML ones. But now I see web-mode is font-locking everything, because it knows JSX. The confusion came because I saw the interface keyword colorized, but web-mode is font-locking it because is a JS reserved keyword, not because is used by TS. So type is not colorized because web-mode lacks any TS specific keywords and is not a JS reserved keyword.

Also I saw some cases were TSX can break the web-mode font-locking, for example when calling generic functions f<number>(3), web-mode sometimes (but only sometimes) interprets <number> as an HTML tag, then the rest of the code as HTML text instead of JS.

It seems as we lack an specific mode for TSX files, or web-mode needs to be augmented with real TS support. Related issue: emacs-typescript/typescript.el#4

You can close the issue. Thanks.

[josteink]

Thanks for coming back with so detailed information. I'm sure it will be useful for other people with the same issue.

[nahuel]

PD: It will be nice to clarify in the https://github.com/ananthakumaran/tide#tsx section that web-mode doesn't supports TSX, only JSX.

[josteink]

Sure. That's a good idea. I think the documentation could be updated slightly. That's never a bad idea :)

But saying that web-mode doesn't support TSX isn't entirely true. It explicitly recognized TSX-files as as a variant of JSX.

It just doesn't font lock everything as you may expect. But editing still works fine, right?

So while support may not be complete, saying it doesn't support it is IMO a bit harsh the authors of web-mode :)

[nahuel]

it's not harsh, web-mode doesn't really supports TSX. It only treats .tsx files as .jsx ones, so in the code fragments only JS syntax is supported, but not TS one. The code line you show is the only specific tsx "support" currently implemented in web-mode :)