Feature Request: Malformed ICU Syntax Highlighting

[radiovisual]

When the no-invalid-variables rule runs, it can only shows that a problem has occurred, but it does not show WHERE the problem exists. However, the https://www.npmjs.com/package/@formatjs/icu-messageformat-parser we use in the project does return the location where the malformed syntax is in the string. It would be really cool to somehow highlight the location of the error where the ICU format went wrong for ever better feedback for the users.

For example:

try {
  const message = "invalid syntax {variable";
  icu.parse(message);
} catch (err: unknown) {
  console.log(JSON.stringify(err, null, 2));
}

will result in the following output:

  {
        "location": {
          "start": {
            "offset": 15,
            "line": 1,
            "column": 16
          },
          "end": {
            "offset": 24,
            "line": 1,
            "column": 25
          }
        },
        "originalMessage": "invalid syntax {variable"
      }

This means we could use this location data to return a highlighted string as a the error that gets reported to the logger, something that looks like:

These highlighted strings could become the string sent to the received property on the Problem class