Better HTML support for react

[isidorn]

Refs: #24403

Currently if my react component returns HTML I do not get any nice HTML support when I try to edit this, instead this code is treated as javascript.

Easy repro steps

1. npm install -g create-react-app
2. create-react-app my-app
3. cd my-app/
4. code-insiders .
5. open app.js and try editing the HTML returned by the component

[aeschli]

@isidorn Can you attach the source code and give some ideas what you expect?

[isidorn]

When I am editing HTML like code I would expect all the nice support I have in real HTML, for instance:

• All the nice HTML suggestions we have. Example: when typing <
• Auto indenting / deindent - example: when adding a in html it automatically gets de-indented
• Highlighting matching tags

Here's the source code,

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React Isidor</h2>
        </div>
        <div className="App2">
          


        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

[mrchief]

The current situation is a mess.

• Emmet barely functions (lots of issues, stops working randomly, cannot detect context, tab expansion and showSuggestionsOnTop do not play nicely with other packages)
• 3rd party packages have their own quirks. Auto close tag and Paired rename offer some respite but the experience is not smooth. E.g. closing tag inserts an extra > always (try typing / on an existing HTML element <span> -> </span>>)
• Installing any kind of snippets extension messes up suggestions context menu. Again, a boolean value of show one or the other on top is not really helpful. If I'm editing HTML, I want emmet to come up first. If I'm editing JS, JS snippets should take precedence.
• Attributes are not auto quoted. Nor does typing an opening quote completes with a closing quote. Same with attribute curly braces.

Sublime Text is no better. Visual Studio provides the best experience but lacks Emmet support natively (with no good/reliable extensions to fill the gap).

I guess this is a really hard problem to solve with so many editors failing at it one way or the other.

[aeschli]

@mrchief Can you file individual issues with code samples and steps? Emmet, auto close (now part of the built-in HTML support), all have different owners.
Paired rename is provided by an extension.

[mrchief]

Can you file individual issues with code samples and steps?

I saw your earlier comment and was just trying to add/support to what the expectations should be (tag autoclosing, attribute quotes/braces autoclosing, context detection etc.)

Regarding 3rd party extensions - if VS Code can support React natively, we won't need them. Just like
visual studio supports ASP.Net Razor (and intellisense can detect when we're in code block vs html block). I think this is what the original issue is about.

Whenever I had Emmet related issue, almost everytime I found an already closed issue for that one. Also, the random failures are hard to file, because there is no consistent step to repro them (or at least I haven't found them yet). But yeah, if I can find something consistent, I'll surely report them.

I do get your point but I wasn't piggybacking this issue to report new issues. Hope you understand my perspective.

[mjbvz]

Yes, let's split this out into individual issues.

Going back to @isidorn's original points, I believe tag matching and attribute suggestions generally should work. Tag suggestions should also work, just not automatically when you type <. I'll open a FR to track this one

Please open a new issues for any cases you'd like to see better supported