Visual Studio 2015 社区中的 ES6 / ES7 支持答案

【问题标题】：ES6 / ES7 support in Visual Studio 2015 CommunityVisual Studio 2015 社区中的 ES6 / ES7 支持
【发布时间】：2015-10-11 05:26:45
【问题描述】：

我听说 VS 2015 支持新的 js 语法，但是当我在这个 IDE 中打开一个使用 aurelia.js 编写的项目时，intellisense 抱怨很多很多事情，例如。

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

我安装了 WebEssentials 2015。似乎仍然没有任何效果......可能一个重要的信息是我当前的 VS 安装是新的，所以我没有搞砸任何设置。

【问题讨论】：

那是语法错误。你的意思是把它放在对象字面量或类定义中吗？
这是 not 我正在使用的 ES6 中的语法错误...
作为顶级条目是语法错误，作为对象或类中的键/值不是语法错误，但您没有显示。
其实项目本身并不重要。我也创建了一个 asp.net mvc 项目，添加了一个只有这段代码的文件，但它仍然抱怨。您能否向我提供有关如何配置 TypeScript 构建的信息（还有 - 为什么 typescript 与此有关？:)）。我想我应该提到一件事——它是全新安装的 Visual Studio 和 Web Essentials，所以我没有搞砸任何设置:)。
我对“预期;”特别有问题（分号）在导出类的方法的左大括号处。更改 VS 项目的 typescript 模块设置似乎没有任何效果。

标签： visual-studio-2015 ecmascript-6 aurelia ecmascript-2016

【解决方案1】：

Javascript 是一种语言。 ES6 是 Javascript 的一个版本。 Microsoft 尚未为其提供智能感知映射文件。这篇文章的建议建议使用确实提供智能感知映射文件的 javascript 框架/API。这些建议并未回答有关如何停止为新的 Javascript 版本获取智能感知错误的问题。除非有人创建该映射文件并提供一个 URL 供我们从 Visual Studio/tools/Javascript/Intellisence/references 引用，否则直接编写 ES6 Javascript 时会出现语法错误。

【讨论】：

【解决方案2】：

我在 .jsx 文件中遇到了这个问题，Visual Studio 2015 使用 react-tools 插件来解析和突出显示语法错误。

我找不到从现在开始的问题，但有人说要更改以下文件中的一行：

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

更改以下行：

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

收件人：

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

我添加了选项nonStrictEs6module，现在除了直接分配的箭头函数之外，它不会警告我大多数事情：

~~如果我们能以某种方式就好了~~我设法将react-tools 转换为babel stage-1 转换器，查看我的答案here :-)

【讨论】：

任何时候我们必须手动开始对程序文件进行jigging，如果我们记得怎么做的话，未来的更新很有可能会再次找到我们。 Visual Studio 社区工作人员需要直接解决这个问题。现在我使用“在 Sublime Text 中打开”插件并在那里编辑我的 JS 文件。
很容易用谷歌搜索答案然后再做一次，我还没有因为更新而丢失这个

【解决方案3】：

我能建议的最好的事情是

WebCompiler。它是编写 ES6 或 LESS 或 TypeScript 等最简单、最漂亮的方式。

直接在 Visual Studio 中或通过 MSBuild 编译 LESS、Scss、JSX 和 CoffeeScript 文件的最简单、最强大的方法。

【讨论】：

【解决方案4】：

要使用新的 ES6/ES7 语法，您必须使用 transpiler。您有三个选项 Traceur、Babel 或 TypeScript。这些会将新语法转换为当前浏览器支持的当前 ES5 语法。 Aurelia 对 Babel 或 TypeScript 有很好的支持。

Visual Studio 2015 包括 TypeScript 1.5。所以你必须创建一个 TypeScript 文件 (.ts) 而不是 Javascript 文件 (.js)。 TypeScript 会将其转换为 ES5 .js 文件。 .js 文件是在浏览器中运行的文件。

当您在 Visual Studio 中打开 Javascript 文件时，它会将其作为 ES5 Javascript 文件而不是 ES6/ES7 Javascript 文件处理，因此如果您想使用 Babel，则会出现语法错误在编辑器中。

【讨论】：

注意：如果您只为一个引擎开发代码，那么您不必必须使用转译器，这是 JavaScript Windows 应用程序的情况，因此即使是 ES6 代码由于 Visual Studio 本身对 ES6 的支持不佳而被错误地突出显示，但仍可在实际设备上正常工作。

【解决方案5】：

我认为问题在于 nodeJS 项目模板。我创建了一个空的 Web 项目并使用 git bash 运行我的 jspm 命令。当我添加一个 js 文件时，我仍然遇到一些语法问题，但它可以识别大部分新语法。

【讨论】：

是的，但“大部分”还不够 :)。在随附的屏幕截图中，我可以看到 VS 给您的错误与我的安装相同。奇怪的是，我看过一些视频教程，其中作者使用 VS 和新的 js 语法并且他/她没有收到任何错误。不记得他们是否安装了任何其他（除了 webessentials）插件。
我看过一个同样的视频，他们完全没有错误，但我相信他们使用的是 Visual Studio 代码：code.visualstudio.com。它是一个轻量级的 IDE，如 sublime 或括号。尽管 IDE 显示错误，但在您运行项目时它仍然可以工作。我同意如果除了实际错误之外没有其他错误会更好，但图像中显示的错误比节点模板中不喜欢导入、导出、类等的错误要少得多。