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_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代码。
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.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