Don't set "<"...">" as bracket pair

[hediet]

Describe the issue

This is the current language configuration that babel ships for jsx:

{
  "comments": {
    "blockComment": ["{/*", "*/}"]
  },
  "brackets": [["<", ">"], ["{", "}"], ["[", "]"], ["(", ")"]],
  "colorizedBracketPairs": [["{", "}"], ["[", "]"], ["(", ")"]],
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "'", "close": "'", "notIn": ["string", "comment"] },
    { "open": "\"", "close": "\"", "notIn": ["string"] },
    { "open": "/**", "close": " */", "notIn": ["string"] }
  ],
  "surroundingPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"],
    ["<", ">"],
    ["'", "'"],
    ["\"", "\""]
  ]
}

Because ["<", ">"] is configured as bracket pair, VS Code tries to match these brackets, but only if they have the same language id.

Unfortunately, this causes red brackets since the latest update (because we consider "brackets" again, even if "colorizedBracketPairs" is set):

This is because the language id of the opening bracket and closing bracket don't agree:

Sample Code to Reproduce

import React from "react";
import Display from "./Display";
import ButtonPanel from "./ButtonPanel";
import calculate from "../logic/calculate";
import "./App.css";

export default class App extends React.Component {
  state = {
    total: null,
    next: null,
    operation: null,
  };

  handleClick = buttonName => {
    this.setState(calculate(this.state, buttonName));
  };

  render() {
    return (
      <div className="component-app">
        <Display value={this.state.next || this.state.total || "0"} />
        <ButtonPanel clickHandler={this.handleClick} />
      </div>
    );
  }
}

Possible Solution

I recommend to just remove the "<" ... ">" bracket pair.

[dpidan]

Unfortunately, this causes red brackets since the latest update (because we consider "brackets" again, even if "colorizedBracketPairs" is set):

Small clarification for readers that this is from the latest VS Code [1.76.0] update

Until this is addressed, a workaround is possible by setting brackets in your VS Code user settings.json:

{
    "[jsx]": {
        "editor.language.brackets": [
            ["{", "}"], ["[", "]"], ["(", ")"]
        ]
    },
    "[jsx-attr]": {
        "editor.language.brackets": [
            ["{", "}"], ["[", "]"], ["(", ")"]
        ]
    }
}

[michaelgmcd]

Thanks for the detailed issue, taking a look at this now.

[michaelgmcd]

Should be fixed in v0.0.37