Make VSCode apply syntax highlighting to .tsx files

Question

Trying to start a gatsby+react+typescript project and VSCode will only apply syntax highlighting to the HTML in my .tsx files. The typescript code remains a single color. How do I fix this?

Note: I have no plugins installed at the moment and the highlighting works if the file type is set to .jsx

Iconostasis

vscode.readthedocs.io/en/latest/languages/typescript – Demetra

What language mode is shown in the lower right corner of the status bar? The file icon suggest that it's not set to typescript – Apocryphal

looks like it thinks the file is XML. – Iconostasis

Does it work properly if you set it to typescript react? Have you configured files.associations so that tsx files would be treated as xml? – Apocryphal

Answer 1

Clicking on the language button in the lower right corner and selecting typescript react fixed the problem.

Iconostasis

Answer 2

I solved this issue just reloading vscode as required by JavaScript and TypeScript Nightly extension, once it was reload I just double checked that Typescript react was selected and the problem was resolved.

Seems like the real problem was that the library JavaScript and TypeScript Nightly was not fully reloaded.

Dray

Answer 3

I faced same problem, even "Typescript React" was selected as the language. I had to click and select the language pack version before getting syntax highlighting working.

Euphonize

Answer 4

In my case "JavaScript and TypeScript Nightly" extension was causing the problem. I had the same problem even when "Typescript React" was selected. I disabled all the extensions and problem solved. Then I enabled each extension individually and I've found out "JavaScript and TypeScript Nightly" was causing the problem. I hope this will help someone.

Mongolism

Answer 5

Reload the JavaScript and TypeScript Nightly extension solved it (Settings on Auto-Detect)

Meridithmeriel

Answer 6

Here is how I got mine to work:

1. Click settings for the installed extension
2. Click 'Extension Settings' from the drop down should see '@ext:kamikillerto.vscode-colorize' in the search bar up top.
3. Select the option Colorize: Include -> 'Edit in settings.json
4. add "**/*.tsx" to the colorize.include array.

Shalloon