Vscode: JSX language support - more than colors

[OshotOkill]

I know VSCode has not support JSX yet but it didn't appear so much error highlights in the last version, even I had already changed my language mode into Plain Text.

[leafduo]

Seems that changing language only affect highlighting?

[OshotOkill]

@leafduo So it does, and I must change file extension into .jsx to get rid of these warnings.

[leafduo]

@OshotOkill It's annoying. And jsx and js files have different highlighting. That's annoying too.

[zimond]

http://stackoverflow.com/questions/32832264/change-language-to-jsx-on-visual-studio-code

Found this but it is not working for the latest VS Code build

[OshotOkill]

@leafduo That's OK for me, especially colors and highlightings are the same as .tsx files in this version (kinda like C#).

[OshotOkill]

@daiheitan It's a hack lol and could lead to some side effects...

BTW #81 also mentioned these problems.

[anibali]

Same problem here, none of the hacky "fixes" I've found around the internet seem to help either. Is renaming our files to use the IDE properly really our only option at the moment?

[OshotOkill]

@anibali AFAIK It is...

Once upon a time I replied them on twitter for asking jsx support, and they said they were working on getting it better just a start.

[zimond]

@OshitOkill
VS Code does have jsx support now. It just could not parse JSX syntax in plain js files.
This is assigned to a developer now, so I guess let's just wait.

[admmasters]

I think one of the issues seems to be that jsx is seen as different to normal js (which seems to work pretty well with autocompletion/intellisense etc). JSX and other variants of JS should still be able to support all the same functionality as the basic JS syntax if those features are available and there should be the ability for VS Code dialects to act as extenders as oppose to completely separate languages if that makes any sense...

[jrieken]

Appart form syntax highlights there is no real support for JSX yet, but it is on its way. Stay tuned.

[jpierson]

What is the motivation for JSX syntax in .js files? I don't understand what using the .js file extension buys you other than possible tooling compatabilty. I don't doubt that there are valid reasons but they should be presented when making feature requests.

[gpbl]

@jpierson It's like having JS code in an HTML page. Also, from a developer point of view, JSX is Javascript with a different syntax.

[anibali]

@jpierson Using a new IDE should not force you to rename a bunch of files IMO.

[alexisbg]

There is a workaround by using ESLint. Have a look at "JavaScript Linters (ESLint, JSHint)" heading on this page:
https://code.visualstudio.com/docs/languages/javascript

Very efficient!

[jpierson]

Ok so what I can gather from @anibali and @gpbl is that jsx syntax inside .js files is useful for designers and there must be other editors that have set this precident and thus would make VSCode difficult to switch to for projects that have been taking advantage of this feature. Does that sound right?

Personally I would be more in favor of a feature that allows a global setting that makes all .js files be able to default to reactjs JSX syntax. This should be similar to the jsconfig files that are already used on a directory level to specify between es5 and es6. Any arguments against using that as a solution? My concerns about supporting any super set of JavaScript in .js files is that it could potentially make the code for standard JS parsing more complex, slow, and hard to maintain. Are these concerns valid?

[jpierson]

See #334 for more details on another option for treating JavaScript as JSX.

[anibali]

@jpierson I don't expect any superset of JS to be automatically supported. Either of your proposed solutions would work fine for me.

[anibali]

FWIW the ESLint workaround proposed by @alexisbg is good for my needs.

[OshotOkill]

@jpierson My opinion is similar that they should make an optional choice in user settings to config all .js files support JSX syntax or, to say the least, provide this option in jsconfig.json.

[OshotOkill]

@alexisbg lOl I totally forget we could initiate ESlint in editor other than the default and extensions now make it more convenient to switch between. Thanks.

But I am also looking forward to another way of setting this in global rather than download ESlint from NPM every time.

[jwulf]

Does the eslint workaround work when the file is named *.jsx? I have an app.jsx file, and "eslint.enable:true, and I get syntax highlighting and no spurious errors - but I don't think I'm getting eslinting.

[fhelwanger]

If I use the eslint workaround, can I still get intellisense to work?

[alexisbg]

@fhelwanger Intellisense seems to work but it is not always relevant.

[dlong500]

eslint is a decent workaround at the moment but it would still make a lot of sense to fully support JSX syntax in *.js files. After all JSX syntax is specifically meant to be used within/along side JavaScript, so it doesn't make sense to separate the two. All that should be needed is an extension to the standard JavaScript syntax. I think it would make sense to have a setting option to recognize JSX within *.js files so it can enabled or disabled per user preference.

[egamma]

We plan to improve this by integrating the Salsa work from the TypeScript team: Microsoft/TypeScript#4789

[OshotOkill]

@jwulf Yes it does and .jsx files now support the basic function -- autocomplete brackets...( in version 0.10.2)

If you try to return two nodes in render() {} function you will get a parsing error, so I think the linting is working.

[egamma]

Not a fix, but here is a workaround for using VS Code with JSX:

• Install the vscode-eslint extension and configure eslint for JSX.

{
    "ecmaFeatures": {
        "jsx": true,
        ...
    }
    ...
}

• If you are using React constructs inside .js files then the built-in JavaScript validation can be disabled using the setting "javascript.validate.enable": false or
• You can install the js-is-jsx extension which changes the file mapping so that .js files are treated like .jsx files. Notice when installing this extension then you loose the existing language support for .js files.

[albertogasparin]

js-is-jsx extension + eslint extension looks like the best combo for now, as you will get both syntax highlight and hinting.

[egamma]

Yes makes sense, thanks (updated my comment above).

[prashaantt]

That's really a huge tradeoff between form (highlighting) and function (intellisense), which IMO is the distinguishing feature of Code. Sublime Text otherwise has an excellent highlighting support for JSX already.

Here's my +1 to a quick and full native JSX support in Code.

[sethreidnz]

I +1 as well. I have just started using WebStorm instead... Which I don't like nearly as much.

[egamma]

@justsayno @prashaantt the other work around you can try is to disable the built in JS validation. Then you will still get some intellisense in JS but still no support for JSX intellisense. To disable the built-in JS validation add the following setting to your user or workspace settings:

{
    "javascript.validate.enable": false
}

Please let me know what you think works better, than we can adjust the work around recommendation.

[aravantv]

@jwulf I have the same issue: I use the workaround with eslint + the corresponding vscode extension but the linting simply does not appear in vscode when I edit my .jsx files. However:

• running eslint in command-line does show that there are some problems
• linting does display when I edit _.js_ files in vscode

[mheiber]

+1 IntelliSense is great, having it for JSX files would be cruc

[fhelwanger]

@mheiber I think that Salsa already does that.

Check https://code.visualstudio.com/Updates#_javascript-salsa-preview

[egamma]

Closing - Salsa will be the default for the February update and supports JSX.

[mheiber]

Thanks! I'll switch over to Salsa, looking forward to trying it out. Love
the work you guys are doing with Code.
On Feb 22, 2016 12:30 PM, "Erich Gamma" [email protected] wrote:

Closed #140 https://github.com/Microsoft/vscode/issues/140.

—
Reply to this email directly or view it on GitHub
https://github.com/Microsoft/vscode/issues/140#event-560020709.

[shprink]

js-is-jsx is gone (　ﾟдﾟ)

[prashaantt]

I think this is now easily fixed with the setting:

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