VisualStudio 2017中的JavaScript

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_modulestemp)。
  • 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代码。

Note

若要将JSX语法转换为React调用,必须将"jsx":"react"设置添加到上述tsconfig.json文件中的compilerOptions

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

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

配置JavaScript项目

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

  • package.jsonbower.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中列出bootstrapjqueryjquery-validationjquery-validation-unobtrusive
  • kendo-ui已经手动添加到lib文件夹中。

Folder structure

可以使用以下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

如果你喜欢这篇文章,敬请给站长打赏↑

除特别注明外,本站所有文章均为本站站长原译,转载请注明出处。