Jsx comments

[alexgriffis]

In progress: This starts work on (closed) issue #9 by supporting jsx-tags as an (scope-able!) embedded language similar to how it was resolved here Microsoft/vscode@d826ad6.

I used meta.jsx.js scope to trigger the embedded language. Need your help here though, the first line of a jsx-tag loses this scope when commented, and as such it stops using the embedded language behavior - so it doesn't uncomment properly (I'm using undo in the gif below to uncomment the first line).

Any ideas? I'm unfamiliar with how scoping works here, but either a new scope for a jsx-tag comment (lines that are whitespace then {/.../} ) or updated behavior for meta.jsx.js could work. I'll update the pull if we can get this working.

Bonus - updated JS language conf file has improved support for auto-closing & surrounding pairs. Thanks for the project!

[joshpeng]

Thanks so much for this PR. Are you undo-ing for both the uncomments in the gif or only the top line? Uncommenting works on the lower lines?

[alexgriffis]

Yep, just the top line, the following lines work well and this is also the case for jsx-tags returned with arrow implicit return syntax. It's likely that there are undiscovered edge cases though. You'll notice that when commented the top line loses the meta.jsx.js scope and thus reverts to javascript from the embedded language (jsx-tags), causing the second press of the comment hotkey to trigger a standard js line comment.

[joshpeng]

I see. Unfortunately I don't have any immediate thoughts on this yet. When I have a little more time near the end of next week I'll try to do a deeper investigation. No guarantees on uncovering a solution, but thanks for your patience.

[newtmitch]

Came from the vs-code repo where I have a comment here: https://github.com/Microsoft/vscode/issues/6461#issuecomment-300012638

hopefully this helps?

[joshpeng]

Hi @newtmitch, thanks for the link. I've added the embeddedLanguages. Can you please confirm this works as you desire? On your end you can try the latest sources, or you can just manually add it to your package.json.

In your %USERPROFILE%\.vscode\extensions folder, find the joshpeng.sublime-babel-vscode-0.2.5 folder. From there, open package.json in a text editor. On line 61, add a trailing comma, then add these lines:

"embeddedLanguages": {
    "meta.tag.js": "jsx-tags",
    "meta.tag.without-attributes.js": "jsx-tags"
}

These are the same lines as alexandrudima said VSC uses for their own.

[barberdt]

To update here, with 0.2.6, I've added the above suggested embeddedLanguages entries such that my grammars entry looks like this:

"grammars": [
  {
    "language": "javascript",
    "scopeName": "source.js",
    "path": "./syntaxes/sublime-babel.json",
    "embeddedLanguages": {
      "meta.tag.jsx": "jsx-tags",
      "meta.tag.js": "jsx-tags",
      "meta.tag.without-attributes.js": "jsx-tags"
    }
  },
  {
    "language": "javascriptreact",
    "scopeName": "source.js",
    "path": "./syntaxes/sublime-babel.json",
    "embeddedLanguages": {
      "meta.tag.jsx": "jsx-tags",
      "meta.tag.js": "jsx-tags",
      "meta.tag.without-attributes.js": "jsx-tags"
    }
  },
  {
    "scopeName": "source.regexp.js",
    "path": "./syntaxes/regex.json"
  }
]

With this configuration, the issues still persist.

With Sublime Babel enabled

With Sublime Babel disabled

VSCode version: 1.15.1

Thanks for any and all support. I really enjoy the extension and would hate to have to fall back to the native highlighter.

[joshpeng]

@barberdt, @alexgriffis Please try latest version. Hopefully it works.

[GollyJer]

@joshpeng It now works of a complete component is highlighted. Thanks! But now inline props are incorrect... 😢

[joshpeng]

@GollyJer I'll take a look. Just to confirm, so default, no extension, VSC commenting is wrong too?

Edit: Okay, I think I got it now. Please try the latest commit. It now requires you to differentiate between what you want. You'll need to use block comments for the {/* */} and line comments for the //.

@barberdt, what this means is it won't behave exactly like default VSCode (which I believe has improper behavior anyways). Default VSCode would always throw the block comments no matter what instead of line comments, but when you tried to get rid of the block comments, it wouldn't fully remove it and leave { } artifacts.

[barberdt]

@joshpeng JSX only supports block commenting, as far as I know. The // inline commenting of any JSX (one or multi-line) is not desired.

[joshpeng]

@barberdt @GollyJer Since there seems to be a difference in opinion... you guys can customize it how you see best for your own needs. If you go to the extensions directory... (Windows: %USERPROFILE%\.vscode\extensions\joshpeng.sublime-babel-vscode-0.2.8 Mac: ~/.vscode/extensions/joshpeng.sublime-babel-vscode-0.2.8)

Find the file tags-language-configuration.json. If you want line comments, leave line 3. If you don't, remove that line and everything will be block comments. Hope that helps.

[GollyJer]

@joshpeng I just verified with the default behavior and @barberdt is correct. JSX only ever uses block comments, not inline comments. It would make sense for your default should probably be the same.

[GollyJer]

P.S. - The default theme just yuck! Thanks so much for your effort! 😃