JSX language support - more than colors #140

Closed
OshotOkill opened this Issue Nov 19, 2015 · 40 comments

Projects

None yet
@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.
2

@leafduo
leafduo commented Nov 19, 2015

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
leafduo commented Nov 19, 2015

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

@daiheitan

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

@jrieken jrieken was assigned by bpasero Nov 19, 2015
@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
anibali commented Nov 19, 2015

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.

@daiheitan

@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
Member
jrieken commented Nov 20, 2015

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

@jrieken jrieken changed the title from JSX in .js extension file has broken more seriously to JSX language support - more than colors Nov 20, 2015
@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
gpbl commented Nov 20, 2015

@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
anibali commented Nov 20, 2015

@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
anibali commented Nov 21, 2015

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

@anibali
anibali commented Nov 21, 2015

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
jwulf commented Nov 23, 2015

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?

@jrieken jrieken was unassigned by egamma Nov 23, 2015
@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
Member
egamma commented Nov 26, 2015

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 egamma modified the milestone: Backlog Dec 10, 2015
@egamma
Member
egamma commented Dec 17, 2015

Not a fix, but here is a workaround for using VS Code with 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
Member
egamma commented Dec 18, 2015

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
Member
egamma commented Dec 20, 2015

@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
aravantv commented Jan 2, 2016

@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
mheiber commented Feb 22, 2016

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

@egamma egamma modified the milestone: Feb 2016, Backlog Feb 22, 2016
@egamma
Member
egamma commented Feb 22, 2016

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

@egamma egamma closed this Feb 22, 2016
@mheiber
mheiber commented Feb 22, 2016

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" notifications@github.com wrote:

Closed #140 #140.

β€”
Reply to this email directly or view it on GitHub
#140 (comment).

@shprink
shprink commented Jun 8, 2016

js-is-jsx is gone (γ€€οΎŸΠ΄οΎŸ)

image

@prashaantt

I think this is now easily fixed with the setting:

"files.associations": {
    "*.js": "javascriptreact"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment