Impossible to type ANYTHING: Rider ALWAYS creates (invalid) XML tags in TSX files

I'm simply trying to type some text within two HTML tags in a JSX file in Rider. As soon as I press a space key, the text is converted into an (invalid) XML tag. Nothing I do allows me to fix it. Undo/backspace/etc. all undo the change, but none of them allow me to continue typing.

Example: `<h2>Login</h2>`

As soon as I type a space character after the word "Login," it becomes: `<h2><Login></Login></h2>`.

I have searched the preferences and disabled literally every single XML and HTML setting. I am still completely unable to use the editor to type even the most basic text.

4 comments
Comment actions Permalink

Hi Zaneclaes, it seems like you are using "Space" to expand Emmet abbreviations.

 

Could you clarify, what key are you using to expand abbreviations?

Expansion is controlled by the following settings:

  • Settings | Editor | Emmet -> Expand abbreviation with
  • Settings | Editor | Live Templates | Other Languages -> By default expand with
1
Comment actions Permalink

Indeed, Emmet is the culprit. However, I don't really consider this a "solution" (just a work-around). The root problem is that Rider is making entirely invalid suggestions. For example, it will try to covert a pure Javascript object:

useState(props.username)

Into a totally invalid XML tag:

useState(<props className="username"></props>)

It's smart enough to know this isn't even valid TSX syntax. Even if the <props> component existed, this would not be valid code. It underlines it in red, yet it still uses it for autocomplete.

Also, not to turn this into a rant, but I lost many many hours trying to figure this out. The fact that I could not find this setting through all my searching (in the help, in the preferences, and in the Rider website) for "autocomplete," "XML," "TSX," etc. suggests some very very bad UX. Using proprietary terms like "Emmet" to describe a core feature like "autocomplete" is beyond obtuse.

0
Comment actions Permalink

 

The conversion you mentioned is an Emmet expansion - Emmet not aware of the code and will work the same way independently of the editor you are using. This behavior should be consistent between IDEs/Editors/Plugins that support Emmet expansions in JSX/TSX. Please note that Emmet expansion is not the same as autocompletion - autocompletion is aware of the surrounding code and your project in general, while Emmet just expands given expression depending on the contents of the abbreviation you are using.

 

Regarding the UX issue you mentioned - Emmet is not a Rider-specific term. This term originated with an Emmet toolkit, and Rider uses the same terminology as the original toolkit. Users usually expect those terms, especially coming from other tools like VSCode that use the same terms.

0
Comment actions Permalink

Well...

  • Rider defaulted to space (not tab, like the docs say it should).
  • Rider does not show a dropdown, or any other UI/feedback indicating why I just got this text expansion — it just mysteriously inserts it (unlike VSCode).
  • If I type "expansion" into Rider settings, no relevant settings appear.
  • I opened the same project in VSCode, and it didn't have any of these problems (it used tab by default, it shows a dropdown for expansions, and even if I press the "tab" key in the same exact code it doesn't exhibit the problems described above where it inserts invalid code).

When you get right down to it, it took me days to figure out what the heck was going on with Rider, and there was no UI/UX feedback to indicate what was happening.

0

Please sign in to leave a comment.