Skip to content

String interpolation + Map = no highlighting #305

Closed

Description

@Skylled

I love the way string interpolation is highlighted, it makes my day, but with all the JSON I use (from Firebase), I end up with a lot of maps, which don't play well with the interpolation highlighter.

See gif:
String Interpolation with Map

This is obviously minor. Point me in the right direction and I might be able to take a swing at it myself.

Activity

  1. DanTup commented on May 19, 2017

    @DanTup
    Member

    I did have a go at fixing this but was unable to come up with a regex that would work reliably (see #105 (comment)):

    Since JS regex (AFAIK) doesn't have support for counting braces to figure out which closing brace actually matches the expression (consider ${something('with a } in a string'){) I don't think I can properly fix this (though if anyone has ideas, I'm all ears!).

  2. added
    is enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.
    good first issue :octocat:A relatively straight forward issue that could be done by a new contributor
    on May 19, 2017
  3. DanTup commented on May 19, 2017

    @DanTup
    Member

    The relevant code if anyone wants to have a go is here:

    "string-interp": {

  4. Skylled commented on May 19, 2017

    @Skylled
    ContributorAuthor

    Considering Dart doesn't care what kind of crazy things you do inside of an interpolated string, would it make sense to reduce the regex to just seek out a ${ with a closing }? The analyzer will catch any issues inside of the expression, or if it's not closed properly.

    Edit: Oh no, I see the problem. I forget how daunting regex can be sometimes.

  5. DanTup commented on May 20, 2017

    @DanTup
    Member

    Yeah, the problem is making sure that the correct } is detecting. I did think it'd be possible (it's just Dart inside Dart!) but because you're actually inside quotes, it's not the same as just parsing Dart, since quotes will be escaped. I did spend some time on it but couldn't make it work :(

    Maybe in future VS Code will let us use dynamic highlight info and then we can swap from the regexes to the three provided by the Analyzer.

  6. Skylled commented on May 21, 2017

    @Skylled
    ContributorAuthor

    Okay, so Dart allows a string inside of the ${ } to use the same quote symbol as the outer string without issue. It seems to me the only character the regex needs to be watchful for are the brackets. The change would at least patch this issue, but I agree, one day the syntax highlighting needs to be re-written.

    The change would require "variable.parameter.dart" being removed from Capture Group 3, since any arbitrary statement can be used inside of string interpolation.

  7. DanTup commented on May 21, 2017

    @DanTup
    Member

    Thanks; I'll take a look at this when next working on it :)

    Have you checked it with crud like this?

    List names = ['John', 'Sophena', 'Henrietta'];
    print("${
      ((names) {
          return names[(new math.Random()).nextInt(names.length)];
      })(names)} is the most valueable member of our team");

    :D

  8. Skylled commented on May 21, 2017

    @Skylled
    ContributorAuthor

    The above example still fails to highlight correctly, for the reason you listed, regex's inability to tell which is the closing bracket. But the change doesn't fail any differently than before.

    The above examples after the change.

  9. added this to the milestone on May 25, 2017
  10. DanTup commented on May 25, 2017

    @DanTup
    Member

    I think we can consider this fixed with #310. I think there's still room for improvement, but I'm not sure we'll ever get all the way with the regex; we really need Code to implement microsoft/vscode#1967 (go vote for support! :-))

  11. modified the milestones: , v1.4.1 on Jun 7, 2017
  12. added
    in editorRelates to code editing or language features
    on Jun 24, 2017
  13. maxwell8888 commented on May 3, 2021

    @maxwell8888

    Any update on this? For me, basic nesting like String test = "${(() => 'one ${"two"}')()}"; only highlights the inner most expression. You mentioned the need for microsoft/vscode#1967 which seems to have been implemented now.

  14. DanTup commented on May 3, 2021

    @DanTup
    Member

    @maxwell8888 could you file a new issue about that? With LSP semantic tokens, I would expect (or at least like) for expressions to be coloured reasonably inside strings. The previous limitations were around the textmate grammar and LSP Semantic Tokens hands this off to the server where we don't need to rely on regex to identify these. Thanks!

  15. maxwell8888 commented on May 3, 2021

    @maxwell8888

    @DanTup As well as handling nested string interpolation, I'd also like to request the expression to be highlighted with multiple colours in the same way as normal code, whereas at the moment the entire expression is just highlighted with a single colour. Should I include this in the ticket or create a separate one? Thanks

  16. DanTup commented on May 3, 2021

    @DanTup
    Member

    @maxwell8888 I'm not sure how that differs from the earlier comment, though I think one issue for colouring interpolated expressions better is probably sufficient. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issue :octocat:A relatively straight forward issue that could be done by a new contributorin editorRelates to code editing or language featuresis enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions