ES6 / ES7 support in Visual Studio 2015 Community

Question

I'm hearing that VS 2015 is supporting the new js syntax but when I open up a project written using aurelia.js in this IDE intellisense complains about many, many things eg.

export class UpperValueConverter {
  toView(value){
    return value && value.toUpperCase();
  }
}

I have the WebEssentials 2015 installed. Still nothing seems to work... Probably an important information is that my current VS installation is a fresh one, so I didn't mess up any settings.

That *is* a syntax error. Did you mean to place this in an object literal or class definition? — Bergi, Jul 21 '15 at 16:23
It is a syntax error as a top-level entry, it is not a syntax error as a key/value in an object, or a class, but you haven't shown that. — loganfsmyth, Jul 21 '15 at 16:29
Ok, I updated my question. VS considers this to be an error even though it's inside a class. — Marek M., Jul 21 '15 at 16:36
@SzwornyDziąch Can you provide a link to the project you are opening that complains about this? I can create a new ASP.Net MVC project, configure the Typescript build to use SystemJS modules, add this class, and I get no errors — rwisch45, Jul 21 '15 at 18:20
Actually the project itself doesn't matter. I too created an asp.net mvc project, added a file with only this code and it still complained. Could you provide me with the info on how to configure the TypeScript build (also - why typescript has anything to do with that? :) ). One thing I think I should mention - it's a fresh installation of visual studio and web essentials, so I didn't mess up any settings :). — Marek M., Jul 21 '15 at 18:41
I'm particularly having issues with "Expected ;" (semicolon) at the opening brace of methods of an exported class. Changing the VS project's typescript module setting didn't seem to have any effect. — pettys, Sep 10 '15 at 20:51

score 6 · Answer 1 · answered Oct 28 '16 at 12:52

Javascript is a language. ES6 is a version of Javascript. Microsoft has not supplied a intellisense mapping file for it. The suggestions on this post suggest using javascript frameworks/APIs which do provide intellisense mapping files. These suggestions do not answer the question on how to stop getting intellisense errors for new Javascript versions. Unless someone creates that mapping file and provides a URL for us to reference from Visual Studio/tools/Javascript/Intellisence/references you will get syntax errors writing straight ES6 Javascript.

score 3 · Answer 2 · answered Jul 29 '15 at 06:06

For using the new ES6/ES7 syntax you have to use a transpiler. You have three options Traceur, Babel or TypeScript. These will transpile the new syntax to the current ES5 syntax which the current browsers support. Aurelia has good support for Babel or TypeScript.

Visual Studio 2015 includes TypeScript 1.5. So you have to create a TypeScript file (.ts) instead of a Javascript file (.js). TypeScript will transpile this to a ES5 .js file. The .js file is the one that runs in the browser.

When you open a Javascript file in Visual Studio it will handle this as a ES5 Javascript file and not as a ES6/ES7 Javascript file, so if you want to use Babel then you get syntax errors in the editor.

Note: you don't *have* to use a transpiler if you're developing code for just one engine, which is a case for JavaScript Windows apps, so even ES6 code which is incorrectly highlighted due to poor ES6 support in Visual Studio itself, will still work properly on the actual device. — RReverser, Jan 15 '16 at 23:32

score 2 · Answer 3 · answered Jul 22 '15 at 13:47

2

I think the issue is the nodeJS project template. I have created an empty web project and used git bash to run my jspm commands. When I add a js file I still get a couple of syntax issues but it recognizes most of the new syntax.

answered Jul 22 '15 at 13:47

Stephen Brickner

2,584
1
11
19

Yeah, but "most of" is not enough :). On the attached screenshot I can see that VS gives you the same errors as my installation. What's weird is that I've seen some video tutorials where author used VS with new js syntax and he/she wasn't getting any errors. Can't remember if they had any other (other than webessentials) plugin installed. – Marek M. Jul 22 '15 at 16:47
I've seen a video with the same thing, they had no errors at all but I believe they were using visual studio code: https://code.visualstudio.com/ . It's a lightweight IDE like sublime or brackets. Althought the IDE is showing errors it will still work when you run the project. I agree it would be better if none were there except the ones that were actual errors but the ones shown in the image are a lot less than those in the node template that doesn't like import, export, class, etc. – Stephen Brickner Jul 22 '15 at 17:05

score 2 · Accepted Answer · edited May 23 '17 at 12:02

I was having this problem in .jsx files, visual studio 2015 was using the react-tools plugin to parse and highlight the syntax errors.

I can't find the question i got this from now, but someone said to change a line in the following file:

C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server\server.js

Change the following line:

var transformed = reactTools.transformWithDetails(code, { elementMap: true });

To:

var transformed = reactTools.transformWithDetails(code, 
    { elementMap: true, 
      es6module: "--es6module", 
      harmony: "--harmony", 
      nonStrictEs6module: "--non-strict-es6module"  });

I added the option nonStrictEs6module, and now it doesn't warn me over most things except directly assigned arrows functions:

~~It would be nice if we could somehow~~ I managed to swap out the react-tools transform for a babel stage-1 transformer, check out my answer here :-)

Anytime we have to start jigging with program files manually there is a pretty good chance future updates will find us back there doing it again, if we remember how. The Visual Studio Community crew needs to address this directly. For now I use the "Open In Sublime Text" plugin and edit my JS files there. — Serexx, Jun 29 '16 at 18:40
Its easy enough to Google the answer and do it again, I haven't lost this to updates yet — , Jun 29 '16 at 19:08

score 1 · Answer 5 · edited Feb 15 '16 at 16:26

1

The best thing I can suggest is the

WebCompiler. Its the most easy and beautiful way to write ES6 or LESS or TypeScript etc.

The easiest and most powerful way to compile LESS, Scss, JSX and CoffeeScript files directly within Visual Studio or through MSBuild.

edited Feb 15 '16 at 16:26

xlecoustillier

16,183
14
60
85

answered Oct 05 '15 at 19:38

ahmadalibaloch

5,851
2
50
59

ES6 / ES7 support in Visual Studio 2015 Community

5 Answers5

Linked