Vscode: ES2017 Object rest spread yields "Property assignment expected" validation error when used in JS embedded in HTML

Created on 31 Jan 2017 · 10Comments · Source: microsoft/vscode

This issue is a followup to @zoltanzf in https://github.com/Microsoft/vscode/issues/3804#issuecomment-275052588 saying:

As I see the .vue files are recognized as HTML by vscode, so the HTML syntax need to be extended with object rest/spread support.

Since this fix that landed in version 1.8, Code is fine with using Object rest spread in .js files.

However, in JS-embedded-in-HTML (~~or in .vue files via all of the extensions supporting it -- I tried vue, Vue Components, Vetur --~~ EDIT Vetur seems to be fine, see below discussion), a JS validation error Property assignment expected continues to be returned.

VSCode Version:
- Version 1.9.0-insider
- Commit fcac9b686abe4292e69a774f61c8c4ce17768bf5
- Date 2017-01-31T01:06:33.637Z
- Shell 1.4.6
- Renderer 53.0.2785.143
- Node 6.5.0
OS Version:

Steps to Reproduce:

Create two new files
In the first file, paste this plain JS code and save as .js:
var obj = { a:1, b: 2 }; var obj2 = { ...obj };
In the second file, paste the code below and save as .html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        var obj = { a: 1, b: 2 };
        var obj2 = { ...obj };
    </script>
</head>
<body>
</body>
</html>

Expected:

None of the files should yield errors.

Actual

In the second case (js within html), Code's JS validator yields error Property assignment expected. on the var obj2 = { ...obj }; line

bug javascript

Source

ronjouch

👍3

Most helpful comment

Yep, that seems to have been the root cause:

screen shot 2017-02-10 at 2 39 57 pm

mjbvz on 10 Feb 2017

🎉2

All 10 comments

Just saying, works fine for me with vetur 0.3.1 and VSCode 1.9

octref on 10 Feb 2017

Just saying, works fine for me with vetur 0.3.1 and VSCode 1.9

@octref indeed, regarding the Vetur digression from my original post, I can no longer reproduce what I wrote. I don't know whether that was a misconfiguration of mine, or if Vetur started doing something smarter since :-/

At any rate though, I confirm the html test case from my original post still fails as of VSCode 1.9.1:

vscode191-stillfails-html

ronjouch on 10 Feb 2017

Adding @aeschli too since this behavior seems specific to javascript in html. I'm guessing the configuration options passed to tssserver for JavaScript in html are out of sync with those we use for regular javascript files

mjbvz on 10 Feb 2017

👍1

@mjbvz Very likely, { "javascript.validate.enable": false } does not work for html files:

expected behavior: native VS Code validation is disabled, ES Lint worries about validation
actually happening: native Visual Studio Code validation continues to throw errors about ES next features

mudrz on 10 Feb 2017

To disable script validation in HTML set the following setting:
"html.validate.scripts": false

aeschli on 10 Feb 2017

🎉1 👍1

JavaScript inside HTML has hardcoded compiler options and is configured to use the latest target (ES6 at the moment)

aeschli on 10 Feb 2017

@aeschli nice, thanks, I am pretty sure I searched for such setting, but didn't find it. Now it's there and I can confirm that it works

mudrz on 10 Feb 2017

@aeschli I took a look and I believe the html extension is still using TypeScript 2.0.10, which did not support spread. I'm going to update its version of TypeScript to 2.1.6 and see if that fixes things

mjbvz on 10 Feb 2017

Yep, that seems to have been the root cause:

screen shot 2017-02-10 at 2 39 57 pm

mjbvz on 10 Feb 2017

🎉2

Thanks @mjbvz !

aeschli on 15 Feb 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings