40

I am interested in using ECMAScript 6 features in my web application which I am developing using Visual Studio 2013. Currently the syntax does not seems to be working, How can I configure VS to make it work?

Jim Jones
  • 2,568
  • 6
  • 26
  • 43
Ammar Khan
  • 2,565
  • 6
  • 35
  • 60
  • I'm not sure If VS 2013 supports ES6, I'd suggest looking into traceur or another transpiler – Jim Jones Jul 31 '14 at 19:18
  • 4
    had the same issue. For compilation, i use traceur like @SpencerKillen mentionned, and I disabled syntax error in Tools->Options for javascript editor. – Cedric Dumont Nov 21 '14 at 07:12
  • it may not even come in vs2015 - see http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/7017377-support-for-es6-modules – Luke Page Mar 19 '15 at 08:20
  • THE editor is here! http://blogs.msdn.com/b/visualstudio/archive/2015/06/10/javascript-editor-improvements-in-visual-studio-2015.aspx – pungggi Jun 14 '15 at 19:32
  • According to this it will be available in VS2015 in the July release. https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7752489-es6-es2015-support – Ray Suelzer Jun 27 '15 at 19:50
  • An alternative is [Visual Studio Code (freeware)](https://code.visualstudio.com/) which supports ECMAScript 6+ – Liam May 31 '18 at 09:52

3 Answers3

52

If you have Resharper installed in your VS 2013 - from today on you can switch to using ES6:

enter image description here

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Oleksii Aza
  • 5,368
  • 28
  • 35
  • 4
    Note that this option only became available in the latest version of ReSharper (9.1). Versions prior to that will *not* show you the "JavaScript language level" option. – Sean Anderson Jun 03 '15 at 05:04
  • 2
    Just tried this out but basic ES6 things like import, export, class, still show up as syntax errors... Guess they're still working on it. – James Reategui Jul 06 '15 at 22:06
  • 7
    @JamesReategui you need to turn off the VS syntax checking. http://i.imgur.com/RCdK7Od.png Then the syntax errors will go away. – Greg Gum Jul 11 '15 at 23:39
  • 2
    @GregGum - just tried turning off VS syntax checking and that works better, thanks. – James Reategui Jul 13 '15 at 00:26
4

What I've done for the past few years for my VS solutions is to have the latest version of node.js installed.

From there, I whould create an _buildscripts directory with a package.json file. (NOTE: make sure to set private:true in your package.json)

With that in place I will have a prebuild.cmd (setup as a pre-build script for my project) with something similar to the following...

:CHANGE_TO_CURRENT_DIRECTORY
rem Change to this batch file's drive/directory
CD /D "%~dp0"

:INSTALL NODE DEPENDENCIES AND INSTALL - use call, since it's a batch/cmd file
call npm install

:SET YOUR "start" SCRIPT IN package.json TO BE YOUR BUILD
:   such as .... "start":"gulp"
call npm start

From here, you can setup gulp, traceur, browserify and/or another tools targeting newer javascript concepts.

I'm using git, so detecting new/updated files is far easier than with TFS, but you can script at least the checkout of your output directory for transpiled JavaScript.

You can also use something like watchify or gulp-watchify for hanling live edits (via a terminal window).

I realize this answer takes you well outside of VS's integrated tooling, there are some integrated tools, like chirpy and others that do these sorts of things, but my experience is they have be sub-par for my needs, and I've been doing more node development lately.

Tracker1
  • 19,103
  • 12
  • 80
  • 106
4

Seems like the best we can do is to vote for es6 support. It's strange for me but Web Essentials also doesn't povide ES6 support yet.

As for me I've disabled syntax errors for js files in my VS. Not ideal but at least less eye distracting.

ro0gr
  • 106
  • 3