JavaScript 编辑器在VisualStudio 2015中的改进


[原文发表地址] JavaScript Editor Improvements in Visual Studio 2015

[原文发表时间] 2015-6-10

JavaScript 是一个非常重要的开发技术在很多不同平台上,包括 网页,移动客户端,和服务器程序。在Visual Studio 2013 上已经支持智能感应,转到定义,着色和格式化的JavaScript源代码,和一些其他功能。我们已经把这些功能带到了Visual Studio 2015上,我们通过三个关键领域提高了JavaScript开发者的体验通过:

· 改善开发者使用流行JavaScript库的体验

· 添加对新JavaScript ECMAScript2015(也被称作ES2015和旧的ES6)语言和web浏览器API的支持

· 提高使用复杂JavaScript 代码库的工作效

每一个被选择的领域都是基于我们听到的UserVoice,的反馈,通过社会媒体,通过在Visual Studio中发送笑脸/皱眉的功能和从许多像你一样的开发者进行直接的讨论中得到的。

在本贴中,我将重点介绍这些领域中的JavaScript编辑器的新特性。你可以在支持JavaScript项目的Visual Studio中的使用这些功能。

支持流行的JavaScript

支持AngularJS 1.x and RequireJS

默认情况下,Visual Studio 2015 支持流行的AngularJS and RequireJS语言库。在之前的博客中我们已经讨论了Visual Studio 2013使用这两个语言库是必须安装的(在VS使用AngularJS在VS使用RequireJS)。Visual Studio 2015中,这些都被支持,不需要其他的安装步骤。

当你在你的代码中引用angular.js (或者 angular.min.js)时候,编辑器会自动的提供智能感应,转到定义,并支持导航栏:

IntellISense for AngularJS

                     智能感应支持 Angular 1.3,表现为routeProvider 服务建议

同样,当你使用require.js 库的时候智能感应和导航支持是自动启用的。支持自定义RequireJS,你可以看Customizing IntelliSense in RequireJS.

IntelliSense suggestions for a module referenced using RequireJS

                                       建议在一个模块中使用RequireJS智能感应

JSDoc 文档注释

文档注释是很棒的工具,在您的应用程序中提供关于API详细的信息。你写代码时候他还可以帮助引导Visual Studio 提供更好的智能感应建议。Visual Studio 2015,编辑器现在能理解JSDoc-style documentation comments 并能用他们提高你的编程体验。JSDoc 已经成为JavaScript 注释在Web上的非官方的标准,他们被用在像AngularEmber库中。这里有一个简单的例子,在方法getPhotos() 的文档中使用注释和显示智能感应提示。

JSDoc comments displayed in IntelliSense tool tips

                                            JSDoc 注释现在智能感应提示框中

当你在注释中引用一些参数类型(如Array, above)你可以使用标准的JavaScript 内置的类型和对象,像String, Number, 或者Array。你可以定义一个自定义对象,该对象用于记录参数的自定义属性,比如配置设置。您可以看到可能传递给 savePhoto() 函数选项对象的建议。

Documenting configuration objects using JSDoc

                                                            用JSDoc记录配置对象

除了JSDoc注释,XML-style 文档注释在Visual Studio 2013.继续支持。JSDoc 标签编辑器支持的完整列表可以在 MSDN 上找到。

新语言和浏览器功能

由于语言标准和web API的演变,JavaScript 编辑器也保持同步更新。在这个版本中,我们介绍了进一步支持的新语言功能在ES2015标准(原名ES6)和一整套新的DOM API。最近宣布的Microsoft Edge web浏览器也支持这些功能。

ECMAScript 2015 (原先的ECMAScript 6) 支持

如微软的Edge浏览器,现在支持一大套的ES2015功能, Visual Studio JavaScript 编辑器也支持大多数的具体的ES2015,Visual Studio 2015 提供支持:

· Classes

· Arrow functions (also known as lambdas)

· Template strings

· Rest/spread operators

· Object literal enhancements

· Proxies

· Symbols

· 新的ES2015API例如Map, Set, Weakmap, Weakset, Promises,和其他各种的API的变化

这可以让你现在写出如下的代码:

Using new language features in ES2015

                                           使用ES2015中新的语言功能

注意类的关键词用于LayoutManager类,一个string模板的变量message,和最后arrow函数被用作addEventListener API 返回函数 的第二个参数。了解更多的信息,查看整套的学习资料被收集在GitHub上的Eric Douglas的ES6学习

资源库,或者复习ES2015JavaScript版本规范

你或许注意到还有一些ES2015的功能没有被支持,比如modules。支持最新版的ES2015语言功能是重要的,我们正在尽可能支持全部的ES2015规范。

新的 web 浏览器 API 的智能感知功能

Visual Studio 2015为新浏览器(Microsoft Edge)的API提供有效智能感知功能。下面是API的几个要点:

你可以访问网站http://status.modern.ie查看被支持的全部API列表,过滤在预览版中可用的API

工作在复杂的JavaScript代码中

最后,我们从开发者那里听说当工作在复杂的JavaScript 源代码中,很难找到需要的方法。有两个编辑功能已经被添加帮助你们发现重要的说明和API在你的JavaScript源代码中,这样你可以很轻松的浏览你的代码。

任务列表

你可以在你的源代码中使用Visual Studio 的任务列表来跟踪// TODO, // HACK, // UNDONE,或者自定义的注释标记。这可以帮助让技术债务和代码中涉及到的问题显示出来。

Viewing TODO and HACK comments in the Task List

                    使用任务列表查看TODOTACK注释在JavaScript 源代码中

导航条

导航条是开启的对于JavaScript 开发人员使用的支持公共设计模型和库的JavaScript 编辑器。这有助于你跳转到代码中频繁使用的标识符和减少浏览源文件的时间。

在下面的例子中可以看见编辑器是如何理解ECMAScript源代码:

Using the navigation bar to browse JavaScript source, written using ES5

                       使用导航栏浏览 JavaScript 源代码,使用 ES5 编写

另一个例子,你可以看见导航条支持新的ES2015的类关键字(大大的简化了在前面例子中的等效的原型语法):

Using the navigation bar to browse JavaScript source, written using ES2015

                    使用导航栏浏览 JavaScript 源代码,使用 ES5 编写

展望未来

除了这里突出的功能外,有各种bug的修复,性能的提高,和其他更新给你一个一流的JavaScript 编辑器体验。今后,我们将继续扩大编辑器帮助建立大型的JavaScript解决方案。

我们知道这是非常的重要对于我们有一个编辑器支持JavaScript 语言的最新变化,例如ES2015模型和生成器,我们正在努力确保Visual Studio对他有很大程度的支持。

现在可以下载Visual Studio 2015,去尝试使用这些功能。如果你是开源开发者、学生、 业余爱好者,或在一个小的专业团队工作中,可以查看免费的Visual Studio 2015 Community版本了。你可以通过发送笑脸/皱眉给我们,让我们知道你在使用JavaScript 编辑器时工作状况。你可以在我们的UserVoice 网站上对未来的JavaScript工具进行投票。

Jordan Matthiesen-项目经理,Visual Studio JavaScript工具组@JMatthiesen

Jordan 已经在微软工作3年了,工作于web的JavaScript 工具和移动应用程序开发。在此之前,他做了14年开发web应用程序和产品,使用的是ASP.NET/C#, HTML, CSS,和JavaScript等。

Comments (0)