Vscode: Wrong type of comments for React code

[keithn]

• VSCode Version: 1.1.1
• OS Version: Windows 10

Steps to Reproduce:

1. position cursor on a line of react html
2. press ctrl-/ to comment out the line

It will insert // instead of {/* */}

[alexdima]

@keithn What is the filename? What language appears in the bottom right?

[keithn]

here's a sample piece of code, line 19 got the wrong comments, its a .jsx and says JavaScript React

[alexdima]

Ok, now I think I understand. The inline react html section does not recognize // as a comment. Thanks for clarifying!

[keithn]

yeah, // is not a comment, it has to be commented out with {/* */}

[yinghang]

Any updates?

[ChuckPierce]

any updates on this issue?

[luchogiri]

Wrong toggle line comment and syntax coloring for JSX tags is the only that blocks me moving from atom/nuclide to VSCode

update: I tried to make an extension to deal with this but VSCode extensions API has the worst documentation ever!

[ivosabev]

Any updates?

[alexdima]

yes, we now support embeddedLanguages when contributing a grammar. @aeschli Can we change the JSX grammar such that it wraps all embedded html/jsx code in a scope that can be used to configure us to detect the language inside there as HTML?

[aeschli]

@alexandrudima By looking for meta.tag.js and meta.tag.without-attributes.js we should already be able to detect this...

[alexdima]

That's great. I suggest the grammar contribution of JavaScript to also include an embeddedLanguages, similar to HTML: https://github.com/Microsoft/vscode/blob/master/extensions/html/package.json#L58

[ajonno]

Can you please provide an update on when commenting out JSX (in a .js file) will be supported ? thanks.

[arashsa]

Would be great if someone added this function!

[aeschli]

I just did, as you can see from the bug resolution and the attached change set.
It will be in the January build,

[mattblackdev]

I'm having this issue again in the March 2017 build v1.11.

Steps to reproduce:

1. create new file
2. save as 'test.js'
3. enter:

import React from 'react'

export default class Test extends React.Component {
  render() {
    return (
      <div>
       Test
      </div>
    )
  }
}

1. Press cmd + / on line 6: "Test"

Expected

Line 6 to equal {/*Test*/}

Got instead

Line 6 equals // Test

[aeschli]

@mattblackdev I quickly tried your example in the latest insiders build and I got {/*Test*/}.
Please file a new issue if you still see this

[ivosabev]

Tested in Version 1.11.2 on Mac OS X and it is not working.

[MacKentoch]

I finally made it work (I was puzzled it worked on my windows but not on my Mac).

SOLUTION: Just change the language to JavaScript (React).

I previously had JavaScript (babel) and it gave bad commenting on jsx.

[newtmitch]

I have 1.12.1 and I'm still seeing the issue as well. Specifically for me, I have the language set to "Javascript React (Babel)" and it's still commenting HTML-area code inside the return() statement with the double-slash. Not sure what's going on there... Is there a setting somewhere that I might have set that I might have set earlier that I need to clear out now?

[mattblackdev]

Still having the issue as well on 1.12.1 and on "Javascript React (Babel)”. It is with a certain set of projects, however. When I start a new project comments work fine inside JSX.

On May 7, 2017, 6:53 PM -0400, Ryan Mitchell [e-mail], wrote:

I have 1.12.1 and I'm still seeing the issue as well. Specifically for me, I have the language set to "Javascript React (Babel)" and it's still commenting HTML-area code inside the return() statement with the double-slash. Not sure what's going on there... Is there a setting somewhere that I might have set that I might have set earlier that I need to clear out now?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[alexdima]

The problem is with the extension associated with Javascript React (Babel). The grammar and the grammar registration from the extension must let us know that the language contains embedded languages.

e.g. From our built-in JavaScript language https://github.com/Microsoft/vscode/blame/master/extensions/javascript/package.json#L72

{
        "language": "javascript",
        "scopeName": "source.js",
        "path": "./syntaxes/JavaScript.tmLanguage.json",
        "embeddedLanguages": {
          "meta.tag.js": "jsx-tags",
          "meta.tag.without-attributes.js": "jsx-tags"
        }
},

This lets VS Code know that within the scopes meta.tag.js and meta.tag.without-attributes.js (specific to this grammar), VS Code should consider the language to be jsx-tags. Then, when the selection is within such scopes, VS Code will use the comment settings defined for jsx-tags.

The resolution is simple: we must find out who defines JavaScript React (Babel) (i.e. what extension) and let them know (file an issue) they should also define the embeddedLanguages section in their contribution.

[newtmitch]

Found it for me - looks like it's Sublime Babel. I'm appending a note to an existing issue covering this. I disabled the Sublime Babel extension and it appeared to work fine after that. Re-enabled, issue reappeared.

[ivosabev]

I followed the suggested solution here: Disabled Sublime Babel and switched the file syntax to JavaScript React, and it worked. But, if you comment a line twice it will add // instead of removing the {/* */} comment so you end up with // {/* <Button /> */}

[alexgzhou]

Just use sublime babel, it works fine!

[chrisbull]

For anyone searching for "vscode comment jsx" (like me)... here is the fix:
Put these in your settings (user or workspace)

"files.associations": {
  "*.js": "javascriptreact"
},

[FateRiddle]

Setting language to Javascript(React), you can comment it properly.
But When you try to uncomment it with ctrl + /, it only deletes /* */ and leaves { } there.
Please fix it.

[aeschli]

@FateRiddle and everyone else. This here is a closed bug. Instead of commenting on this one, please file new issues with the steps to reproduce.