4
votes

Visual Studio 2015 support for ES6/ES7 syntax with React has some definite limitations compared to Babel / Sublime (or Atom, VS Code, etc). Specifically, I am trying to achieve 'support' for ES6 imports / exports and ES7 decorators and class properties in JSX files WITHOUT turning off JS debugging / intellisense in Visual Studio 2015 (.NET 4.5 project NOT version 5).

I've found a few things that were helpful, such as this hack to the node server VS utilizes to parse JSX (and am working on modifying it to use Babel, but have already ran into a few issues with the approach).

I have downloaded the node tools, turned on ES6 intellisense preview, and have TypeScript 1.7.6 installed.

So, its better, but still has too many limitations.

It looks like Microsoft is pouring most of its JSX support into TypeScript. While I recognize some of the benefits of TypeScript, at this point, I don't want to write my JSX in TypeScript, BUT from what I understand, valid JS is valid TypeScript, and if I can achieve better React / ES6 / ES7 support now (or in the future) by changing the extension of my files from JS / JSX to TS /TSX, fine; however, when I tried this, Visual Studio 2015 instantly began complaining about the lack of typing definitions and explicit types within my JSX syntax. Can you turn these off?

In other words, anyway to tell Visual Studio 2015 'highlight this file like you would TypeScript, provide some basic syntax validation, some nice intellisense, but don't worry about building, sourcemaps or anything else' (I am using webpack for this)?

To be clear, my question is "how can I achieve the absolute best ES6/ES7 support with React in Visual Studio 2015" because my problem is I have a .NET 4.5 MVC app that needs to be built, and the front-end needs to be 'modern' ES6/ES7 React.

If there is another way to solve my problem (like with VS Code + Mono -- required .NET 5+), or if you have any advice on how best to answer the above question, it would be greatly appreciated. Thanks in advance for any help you can offer!

1
While it is true that valid JavaScript is valid TypeScript, it is unfortunately not true that valid ECMAScript 6 is valid TypeScript. Thus I don't think TypeScript will help you in your quest unless you are willing to sprinkle your class definititions with a liberal dose of : any type declarations to make the tooling stop complaining about types.Brandon

1 Answers

0
votes

Best thing I have found thus far is to hack Visual Studio's node server and use this plugin I wrote with Webpack for debugging.