Vscode: Add support for ES2016 Object Spread Initializer

[onybo]

Object Spread Initializers is a proposed feature of ES2016 and is very useful when writing Redux reducers. The syntax is supported in babel, but when using the feature in Visual Studio Code it will mark the spread operator as a syntax error.

See: https://github.com/sebmarkbage/ecmascript-rest-spread/blob/master/Spread.md
for more information of the feature.

It would be very nice if Visual Studio Code did not mark the use of this feature as an error with a red squiggly.

The current behavior in Visual Studio Code is also described in Issue #1640

[jpierson]

+1 I've been pretty much ignoring my errors and warnings in VSCode in hopes that this would be addressed soon but it's been a few months now. I've also noticed some discussion in the ESLint project about this and their suggestion was to make use of babel-eslint. I wonder if that is possible to use in VSCode...

[jrieken]

This issue was moved to Microsoft/TypeScript#6525

[onybo]

No point in moving this feature request to the TypeScript project. They already have the feature on their roadmap. It is planned for the 2.0 release of TypeScript.

https://github.com/Microsoft/TypeScript/wiki/Roadmap

I don't understand why Syntax checking of EcmaScript in Visual Studio Code is dependent on TypeScript though? Do you use TypeScript to check the syntax of plain .js files?

[jrieken]

Yes

[kumarharsh]

@jrieken shouldn't eslint and babel-eslint be doing that?

[marc314]

+1 I can't use VSCode at all b/c of this.. My code uses a ton of obj spread, so I am forced to use a different editor :-1:

[jrieken]

Sorry to hear that. Since recent we do have an option to turn off validation for JavaScript - "javascript.validate.enable": false. That setting and a linter extension that supports object spread (like eslint) should bring you in a more comfortable spot.

[marc314]

@jrieken
// Place your settings in this file to overwrite the default settings
{ "javascript.validate.enable": false }
Doesn't seem to effect the red ~ for me... Am I doing it wrong?

[jrieken]

two questions:

• what version of vs code are you running?
• this is a JavaScript file, not TypeScript?

[marc314]

This is a .js file (not .jsx or .ts)...

[jrieken]

@dbaeumer Do you have ideas why that is?

[kumarharsh]

@marc314 Try using the 0.10.15-insider build, and see if it changes... That same code seems to be working fine for me.

[dbaeumer]

@jrieken the setting in not available in 0.10.11 (intellisense doesn't propose it either in that build)

[jrieken]

Ok. mystery solved - @marc314 You got two options: Try out the 0.10.15-insider or wait for the next stable build is coming out very, very soon.

[marc314]

@jrieken @kumarharsh @dbaeumer Thanks guys! I installed the insider build and it solved my issue. Looking forward to the next stable build as well. Much obliged!

[albertogasparin]

Just updated to v1.0 but spread operator is still marked as an error :disappointed:
I've also added jsconfig.json with target es6 to my project, but no luck

[jrieken]

@albertogasparin Object spread is not es6 but up for es7 discussion. There is a setting to disable validation such that VS Code doesn't complain about the future there.

[pavestru]

Regarding this, as a newcomer to VS Code I found the official docs very helpful.

[tracker1]

To add what @jrieken has, you can use the eslint plugin to have eslint run, it will catch most of the same errors, but may miss some. I'm just ignoring these for now, still annoying.

[DennisBecker]

The issue still exists - I'm using VS Code 1.7 and ESLint plugin for React.js

[adoji92]

i'm using vscode version 1.7.1
with eslint version 3.9.1 both on global and local
and just adding "javascript.validate.enable": false in settings.json(the one pops up with cmd+,) resolved the problem.
now i don't see any eslint warnings about spread operator. no restart/reload required!

[DennisBecker]

What you do is disabling JavaScript errror detecton in VS Code which is a bad idea. ESLint may not find all issues or errors in your code.

[adoji92]

ok i know it would be better vscode supports spread operator natively.
i just made some kind of footnote for those
who confused vscode doesn't support the operator not at all.
And i also quite trust eslint thought. thank you for your quick replying @DennisBecker !

[ghost]

@marc314 Use Object.assign for now if you want to get rid of that red squiggles.

[Law78]

I've the same issue and I'use the latest version of VSCODE, the spread operator isn't recognized.

[kumarharsh]

The thing is that this depends on Salsa, which is itself written on top of Typescript. If I am interpreting discussions in older issues](https://github.com/Microsoft/vscode/issues/3804) correctly, until Typescript doesn't gets these features, Salsa won't, and by extension JS in vscode won't. We can only wait until TS gets better ES8 support, which seems to _coming soon_^TM.

[DerGernTod]

really unfortunate, since this actually works but gets detected as an error:
var arr = [ ...state.slice(0, i), {...state[i], likes: state[i].likes + 1}, ...state.slice(i + 1) ]
it works up until the {...state[i] stuff. (as of wes bos video about redux (around 8:50): https://www.youtube.com/watch?v=BWN-9bF51BU

[Anupheaus]

Why is this issue closed? It is important that this gets fixed! I feel this is a bug and should be fixed in vs code.

[jrieken]

This issue is a duplicate of https://github.com/Microsoft/TypeScript/issues/2103 which will come with TypeScript version 2.1.3. Please do not comment here but on the actual issue.

[halliej]

Guess it's back to Atom...

[kumarharsh]

It's coming in 1.8!!!

[Mellbourn]

@kumarharsh that sounds great. Do you have a reference?

[kumarharsh]

@Mellbourn: https://github.com/Microsoft/vscode/issues/3804#issuecomment-265021769

[XidongHuang]

Hey, does this problem be solved? I updated my VS code to 1.9, but still get the error warning in redux programming like

...
case "CHANGE_NAME": 
               { state = {...state, name: action.payload}; 
                 break;}
...

Is is any hints about it?

update:
Fixed it, just as mentioned above, need to update Typescript to the latest version.

[Noyabronok]

I'm on VS Code version 1.10 and I thought I had this problem too, but then I realized that the code line above didn't have a closing semicolon. Adding the semicolon fixed the problem.

[tracker1]

All my source is under my profile directory... in my profile, I've setup a package.json in my profile root, configured ~/.eslintrc to my desired baseline configuration... from there, disable the JS warnings, and install the ESLint extension.

Now I just see eslint errors... doesn't help when editing outside my profile, but works well enough for my own use case.

Also, I do setup a per-project eslint.. the baseline in the profile root is a fallback when editing other things that aren't a project, or don't have it setup yet.

[whxaxes]

disabled javascript validation and jshint, use eslint only...