JavaScript是VisualStudio中的第一类语言。当你在VisualStudio 集成开发环境中编写JavaScript时，你可以使用大多数或者说所有的标准编辑辅助（代码小片、智能感知，等等）。你可以为很多应用程序类型和服务编写JavaScript代码。

对ECMAScript 2015（ES6）以及更高版本的一些支持

Visual Studio现在支持ECMAScript语言更新（例如ECMAScript 2015/2016）的语法。

ECMAScript 2015是什么？

JavaScript作为一种编程语言仍在不断更新，而TC39是负责进行更新的委员会。

ECMAScript 2015是对JavaScript语言的更新，提供了大量有帮助的新语法和功能。要想深入了解EC6的功能，请查看github上的参考网站。

除了支持ECMAScript 2015，VisualStudio还支持ECMAScript 2016，并会在发布ECMAScript的将来版本后提供对这些版本的支持。要想与TC39和ECMAScript中的最新更改保持同步，请关注他们在github上的文章。

转译JavaScript

JavaScript的常见问题在于，用户想使用最新的ES6+语言功能（因为它们能提高效率），但是运行时环境（通常是浏览器）尚不支持这些功能。这意味着用户必须弄清楚哪些浏览器支持哪些功能（可能会非常繁乏味），或者，需要一种方法将ES6+代码转换为目标运行时了解的版本（通常是ES5）。这通常称为“转译”。

TypeScript的主要功能之一是可以将ES6+代码默诵为ES5或ES3，以便用户可以编写使自己最为高效的代码，但同时仍可以在任意平台上运行代码。

因为VisualStudio2017中的JavaScript使用与TypeScript相同的语言服务，因此也可以利用ES+到ES5的转译。

在设置之前，需要对配置选项进行一定的了解。通过tsconfig.json文件配置TypeScript。如果没有此类文件，则使用某些默认值。出于兼容性原因，这些默认值在仅存在JavaScript文件（或还有.d.ts文件）的上下文中是不同的。若要编译JavaScript文件，则必须添加tsconfig.json文件并显式设置某些选项。

tsconfig文件的必需设置如下：

• allowJs: 必须将此值设置为true才能识别JavaScript文件。默认情况下，其为false，因为TypeScript编译为JavaScript，所以需要它来避免编译器中包含刚编译过的文件。
• outDir: 应将其设置为未包含在项目中的位置，从而不会检测到已发出的JavaScript文件，然后将其包含在项目中（请参阅下面的exclude）。
• module: 如果使用模块，此设置将告知编译器发出的代码应使用哪种模块格式，例如用于节点或捆绑程序的commonjs（如Browserify）。
• exclude: 此设置指明不包括在项目中的文件夹。应向此设置添加输出位置和非项目文件夹（如node_modules或temp）。
• enableAutoDiscovery: 此设置按上面所述启用定义文件中的自动检测和下载功能。
• compileOnSave: 此设置会告知编译器是否应该在VisualStudio中保存源文件时进行重新编译。
• typeAcquisition: 此组设置控件自动获取的行为（此章节中会有进一步的讲解）。

为了将JavaScript文件转换为CommonJS模块并将其放置在./cout文件夹中，可以使用以下tsconfig.json文件。

{
 "compilerOptions": {
  "module": "commonjs",
  "allowJs": true,
  "outDir": "out"
 },
 "exclude": [
  "node_modules",
  "wwwroot",
  "out"
 ],
 "compileOnSave": true,
 "typeAcquisition": {
  "enable": true
 }
}

在准备好上述设置的情况下，如果存在一个源文件（./app.js）并包含多个ECMAScript 2015语言功能，如下所示。

import {Subscription} from 'rxjs/Subscription'; // ES6 import
class Foo { // ES6 Class
  sayHi(name) {
    return `Hi ${name}, welcome to Salsa!`; // ES6 template string
  }
}
export let sqr = x => x * x; //ES6 export, let, and arrow function
export default Subscription; //ES6 default export

则文件将被发送至面向ECMAScript 5（默认值）的./out/app.js，如下所示：

"use strict";
var Subscription_1 = require('rxjs/Subscription');
var Foo = (function () {
  function Foo() {
  }
  Foo.prototype.sayHi = function (name) {
    return "Hi " + name + ", welcome to Salsa!";
  };
  return Foo;
}());
exports.sqr = function (x) { return x * x; };
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Subscription_1.Subscription;

更好的智能感知

VisualStudio 2017中的JavaScript 智能感知将显示有关参数和成员列表的详细信息。此新信息由TypeScript语言服务提供，该服务在后台使用静态分析来更好地了解使用者的代码。可以在此处阅读有关新的智能感知体验及其工作原理的详细信息。

JSX语法支持

VisualStudio 2017中的JavaScript支持丰富的JSX语法支持。JSX是允许在JavaScript中使用HTML标记的语法集。

下图演示了定义在TypeScript文件comps.tsx中的React组件，然后从app.jsx文件中使用此组件，通过智能感知在JSX表达式中实现实例和记录。此处不需要TypeScript，此特定示例刚好包含了一些TypeScript代码。

在生成时在/out/app.js处创建的JavaScript文件包含代码：

"use strict";
var comps_1 = require('./comps');
var x = React.createElement(comps_1.RepoDisplay, {description: "test"});

配置JavaScript项目

语言服务由静态分配提供支持，这意味着它会分析源代码（而不实际执行代码），以返回智能感知结果并提供其他编译功能。因此，项目上下文中包含的文件的数量越多、文件大小越大，在分析过程中使用的内存和CPU就越多。因此，对项目形状做出了几个默认假设：

• package.json和bower.json列出了项目所使用的依赖项，并且这些默认包含在自动类型获取（ATA）中
• 项层node_modules文件包含库源代码，并且其内容默认不包括在项目上下文中。
• 所有其它.js、.jsx、.ts和.tsx文件都可能是你自己的源文件之一，并且必须包含在项目上下文中。

在大多数情况下，使用上面的默认项目配置就能打开项目并获得极佳的体验。但是，在具有不同文件夹结构的项目的项目中，可能需要进一步配置语言服务，才能更好地仅专注于你自己的源文件。

覆盖默认值

可以通过将tsconfig.json文件添加到项目根目录来替代上面的默认配置。tsconfig.json有多个不同的选项，可以操纵项目上下文。下面列出了其中几个选项，但要获取一整套可用的选项，请参阅架构存储。

重要的tsconfig.json选项

{
 "compilerOptions": {
  "allowJs": true,     // include .js and .jsx in project context (defaults to only .ts and .tsx)
  "noEmit": true      // turns off downlevel compiler
 },
 "files": [],        // list of explicit files to include in the project context. Highest priority.
 "include": [],       // list of folders or glob patterns to include in the project context.
 "exclude": [],       // list of folders or glob patterns to exclude. Overridden by files array.
 "typeAcquisition": {
  "enable": true,      // Defaulted to "false" with a tsconfig. Enables better IntelliSense in JS.
  "include": [ "jquery" ], // Specific libs to fetch .d.ts files that weren't picked up by ATA
  "exclude": [ "node" ]   // Specific libs to not fetch .d.ts files for
 }
}

示例项目配置

提供具有以下设置的项目：

• 项目的源文件位于wwwroot/js
• 项目的库文件位于wwwroot/lib
• 在bower.json中列出bootstrap、jquery、jquery-validation和jquery-validation-unobtrusive。
• kendo-ui已经手动添加到lib文件夹中。

可以使用以下tsconfig.json来确保语言服务仅分析js文件夹中的源文件，但仍然提取.d.ts文件并将其用于lib文件夹中的库。

{
 "compilerOptions": {
  "allowJs": true,
  "noEmit": true
 },
 "exclude": ["wwwroot/lib"], //ignore lib folders, we will get IntelliSense via ATA
 "typeAcquisition": {
  "enable": true,
  "include": [ "kendo-ui" ] //kendo-ui wasn't added via bower, so we need to list it here
 }
}

VS 2015中的显著更改

由于VisualStudio 2017中拥有全新的语言服务，因此，有几个与之前的体验不同或之前的体验中没有的行为。最显著的更改是将VSDoc替换为JSDoc、删除自定义.intellisense.js，扩展和特定代码模式的有限智能感知。

不再具有///<references />或_references.js

以前，在任何时候需要了解智能感知作用域中有哪些文件的过程相当复杂。有时，需要所有文件都位于作用域，其他情况下则不需要，但这会导致涉及手动引用管理的复杂配置。今后，无需再考虑引用管理，因此也无需对引用、注释或_references.js文件添加三斜杠。

有关智能感知工作原理的详细信息，请参阅JavaScript智能感知。

VSDoc

XML文档注释（有时称为VSDoc）以前可用于修饰包含额外可强化智能感知结果的源代码。为支持更易于编写并且是JavaScript公认标准的JSDoc，不再支持VSDoc。

.intellisense.js扩展

以前，可以创建智能感知扩展，该扩展允许为第三方库添加自定义的完成结果。这些扩展难以编写并且安装和引用它们也很繁琐，因此，以后的新语言服务不再支持这些文件。作为更简单的替代方法，可以编写TypeScript定义文件，来提供与旧版本.intellisense.js扩展相同的智能感知优势。你可以在此处了解有关声明（.d.ts）文件创作的详细信息。

不支持的模式

由于新语言服务由静态分析（而不是执行引擎）提供支持（请参阅此问题以了解关于此差异的信息），因此，存在几种无法再检测到的JavaScript新械。最常见的模式是“expando”模式。当前语言服务无法向声明后附加的属性的对象提供智能感知。例如：

var obj = {};
obj.a = 10;
obj.b = "hello world";
obj. // IntelliSense won't show properties a or b

可以通过在对象创建期间声明属性来避免此问题：

var obj = {
  "a": 10,
  "b": "hello world"
}
obj. // IntelliSense shows properties a and b

还可以添加JSDoc注释，如上所示：

/**
 * @type {{a: number, b: string}}
 */
var obj = {};
obj.a = 10;
obj.b = "hello world";
obj. // IntelliSense shows properties a and b