本周我们发布了 JavaScript 代码编辑器 0.4 版本。您可以阅读 Scripted 的背景信息 这里。

0.4 版本的完整发布说明 在这里，但在本文中我将重点介绍一些更有趣的更改。

工具提示

Scripted 使用推理引擎来构建对 JavaScript 代码的理解。 Scripted 0.3 提供了一些基本的工具提示，显示有关函数调用的推断信息。 在 Scripted 0.4 中，这一点得到了进一步的改进 - 不仅格式更好，而且现在发现的任何 jsdoc 都包含在工具提示中。 在这里，您可以看到当您将鼠标悬停在函数调用上时将出现的工具提示

 

模板

模板支持得到了增强，您现在可以使用嵌入原始选择的文本扩展来替换选择。 在第一张图片中，我们选择了一个函数调用并按下了Ctrl/Cmd+Space

在选择第一个模板完成项后，编辑器内容变为

 

可扩展性

这个版本的 Scripted 包含一个基本的插件机制。 可以只编写一个 .js 文件，将其放入正确的位置，它将扩展 Scripted 的行为。 插件 API 绝对是一个正在进行的工作，但您已经可以实现一些有用的功能。 例如，我们有保存时源转换器插件，可以执行诸如删除空格和添加版权消息之类的操作。 有关插件系统的更多信息，请参见发布说明和此处的维基。 基本上，插件开发涉及编写 AMD 模块，'require'ing API 片段，您就可以开始了。

我们想到的一个关键用例是让您编写一个插件，该插件向编辑器贡献新的注释（这些注释出现在左侧标尺中并允许对编辑器文本进行样式设置）。 这是一个非常简单的插件。 它只是在您的代码中找到水果的名称并为它们添加注释。 也许不是最有用的插件，但它应该显示插件的关键部分是什么，而不是陷入注释计算中。

define(function (require) {

	// Grab the editor API
	var editorApi = require('scripted/api/editor-extensions');

	var pathExp = new RegExp('.*\\.js$');

	// Register the new annotation type
	editorApi.registerAnnotationType('example.message');

	// Load the styling for our annotation (very simple bit of css)
	editorApi.loadCss(require('text!./styling.css'));

	// Register an 'annotation computer'.
	// The return value of the function is the new set of annotations
	// which replace any added on previous calls to the function.
	editorApi.addAnnotationComputer(function (editor) {
		// Only interested in .js files
		var path = editor.getFilePath();
		if (!path || !pathExp.test(path)) {
			return;
		}
		var text = editor.getText();
		var fruits = ['apple', 'banana', 'kiwi', 'orange'];

		var annotations=[];
		for (var f=0; f<fruits.length; f++) {
			var fruit = fruits[f];
			var index = text.indexOf(fruit);
			while (index!=-1) {
				// Create the annotation: needs type/start/end/text
				annotations.push({type:'example.message', start:index, 
				  end:index+fruit.length, text:'Found '+fruit });
				index = text.indexOf(fruit,index+1);
			}
		}
		return annotations;
	});
	console.log('Annotation adding sample plugin');
});

此插件的另外两个部分是样式 css（抱歉内联图像数据，只是为了方便重用我们从 Eclipse Orion 继承的一些图像）

/* Styling for the text in the editor */
.annotationRange.message {
	/* the icon for a 'squiggly' underline */
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
	background-color: cyan;
	color: blue;
}
/* Styling for the right hand overview ruler */
.annotationOverview.message {
	background-color: grey;
	border: 1px solid #000080;
}
/* Styling for the left hand annotation ruler */
.annotationHTML.message {
	/* the icon for a 'flashlight' */
	background-image: url("data:image/gif;base64,R0lGODlhEAAQANUAALClrLu1ubOpsKqdp6eapKufqMTAw7attLSrsrGnr62jq8C7v765vaebpb22vLmyuMbCxsnGycfEx8G+wcrIysTBxUltof//yf///v70jergpPvws+nWc/npqvrpqvrpq/raffffnvXVkfTVkvXUkd+9f+SiOemvV+uyXa2OX7mYZqeIXKuNX/ClO7KQYqiIXJ59Vp19VpFvTo9uTZBvTpNyUJNyUf///////wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADgALAAAAAAQABAAAAZ4QJxwSCwajS2aS1U6DlunzcagcuKgG4sn5HJiLZ2QiHbEbj6hEapVTKVYr3OItG5TIhVGLF0npigUEAsPAjV9Q24pEhMBCAoybEUmGRcrDgcAAzNGkxcYNzAJBQSbRJ0YqBc2DaVEHJ6pGTStRBqfGBcZILRWvThBADs=");
}

和一个 plugin.json（.json 文件对于完全简单的插件来说不是必需的）。

{	
	"name": "annotation-adding-plugin",
	"version": "0.1",
	"description": "Scripted plugin to add markers in the editor",
	"main": "annotation-adding-plugin",
	"scripted": {
		"plugin": true
	}
}

所有这些部分都在这里在 git 仓库中。 激活后，添加注释时样式将如下所示

基于此模型，我们根据 Ariya Hidayat 的一篇博客文章实现了一个更实际的插件，该文章描述了如何'检测布尔陷阱'。 该插件的源代码在这里。

有关插件开发的更多信息，请参阅维基。
 

白天/黑夜模式

最后但并非最不重要的是，我们在 Orion 中的主题支持基础上构建，现在为编辑器提供了一种深色主题。 目前无法配置单个颜色，但我们仍然认为设置的默认颜色看起来非常不错：  

开始使用

想试一试吗？ 如果您已安装 node/npm，只需键入

  npm install -g scripted
scr foo.js

readme描述了其他安装选项，它可作为独立 zip 文件使用。 许多用户很高兴关注 master 并每周/每天更新。