TSX Files, Typescript, and React

[jupl]

Description

When a tsx file is opened, it is treated as a JS file with react-mode and without TypeScript's helpers. What's being used to autoselect react-mode should not be applicable to TypeScript files. A more long term solution would be to support tsx by incorporating pieces of the react layer into the typescript layer (or vice versa) but at least for now stopping the mode change would be helpful. EDIT: I see that tsx uses web-mode.

Reproduction guide 🪲

• Ensure typescript and react layers are installed.
• Start Emacs
• Open an existing file like the following named template.tsx:

import React from 'react' // Alowed with allowSyntheticDefaultImports
import {PAGE_STYLE} from './styles'

/**
 * Render root component representing the entire application
 * @return Root component
 */
export default function Root() {
  return <div style={PAGE_STYLE}>Welcome</div>
}

Observed behaviour: 👀 💔
File is opened in react-mode with JS packages.

Expected behaviour: ❤️ 😄
File is opened in typescript-mode (or maybe react-mode) web-mode with TS packages.

System Info 💻

• OS: darwin
• Emacs: 25.1.1
• Spacemacs: 0.200.1
• Spacemacs branch: master (rev. 3706a42)
• Graphic display: t
• Distribution: spacemacs
• Editing style: vim
• Completion: helm
• Layers:

(typescript colors docker editorconfig emacs-lisp html javascript markdown org-plus osx react restclient shell shell-scripts syntax-checking vimscript yaml
            (auto-completion :variables auto-completion-return-key-behavior nil auto-completion-tab-key-behavior 'complete auto-completion-enable-help-tooltip t)
            (clojure :variables clojure-enable-fancify-symbols t)
            (git :variables git-magit-status-fullscreen t)
            (version-control :variables version-control-diff-tool 'diff-hl))

[TheBB]

This is a consequence of magic-mode-alist having a higher priority than auto-mode-alist. Should be easy to fix with custom match functions though.

[BrianMcKeever]

I fresh installed emacs and spacemacs on windows 10. I enabled typescript, react, html, and javascript layers, and .tsx files open in foundation mode for me.

[BrianMcKeever]

Of course, immediately after posting that, it loads correctly in web-mode. I don't think I did anything to fix it. The last thing I changed was the start directory on my emacs shortcut.

[jupl]

Updated after seeing that there is already proper support for TSX files. :)

[RafaelCosman]

With a .tsx file in Web mode, how does one format the buffer? SPC m = uses web mode's formatting which is terrible for js.

[mattnedrich]

Does anyone know if this is being worked on?

[vegansk]

+1

[pmiddend]

This is highly annoying. Can we at least hack it so that SPC m = uses typescript/format instead of web-html-beautify?

[NotBrianZach]

@pmiddend it shouldn't be too hard to do that. it's somewhat of a upstream issue (somewhat).
I had similar issues switching to es-beautifier to get nice formating of react components based on eslint rules.
Basically what you can do is (and this worked for me in my situation)

1. fork web-beautify (https://github.com/yasuyk/web-beautify/pull/28/files changes should be similar to this, except with tslint or whatever)
2. make a private spacemacs layer (copy typescript layer I suppose)
3. clone your web beautify fork into your private layer's local directory (see spacemacs docs)
4. modify your layer's package.el file to use the local version of web-beautify, make sure to include commands from local package in the use-package command for web-beautify in the private layers package.el file.

Also I agree it's extremely annoying. This took me a couple days to figure out.

[coatlicue89]

Quick workaround:

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

in dotspacemacs/user-config

[jonhermansen]

Quick workaround:

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

in dotspacemacs/user-config

If html layer is not added to .spacemacs, typescript-mode does not load by default for .tsx files (on develop branch). If the workaround above is used, there is no HTML syntax highlighting. Took me a while to figure this out.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!

[Arelav]

Quick workaround:

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

in dotspacemacs/user-config

If html layer is not added to .spacemacs, typescript-mode does not load by default for .tsx files (on develop branch). If the workaround above is used, there is no HTML syntax highlighting. Took me a while to figure this out.

Thanks. Finally, TSX works for me. I think it should be documented to support TSX both HTML and TS layers should be enabled.
All times I tried it was adding the typescript layer automatically. And I have only one index.html in the project and open it very rarely.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!