本週我們釋出了專注於 JavaScript 的程式碼編輯器 0.4 版本。您可以在此處閱讀有關 Scripted 背景的資訊。

0.4 版本的完整發布說明在此處，但在這篇文章中，我將重點介紹一些更有趣的更改。

工具提示

Scripted 使用推理引擎來理解您的 JavaScript 程式碼。Scripted 0.3 提供了一些基本的工具提示，顯示有關函式呼叫的推斷資訊。在 Scripted 0.4 中，這一點得到了進一步發展——不僅格式更好，而且現在任何發現的 jsdoc 也包含在工具提示中。在這裡，您可以看到當您將滑鼠懸停在函式呼叫上時將出現的工具提示

 

模板

模板支援已得到增強，您現在可以使用嵌入原始選擇的文字擴充套件來替換選擇。在第一張圖片中，我們選擇了一個函式呼叫並按下了 Ctrl/Cmd+Space

選擇第一個模板完成時，編輯器內容變為

 

可擴充套件性

此版本的 Scripted 包含一個基本的外掛機制。只需編寫一個 .js 檔案，將其放入正確的位置，它就會擴充套件 Scripted 的行為。外掛 API 絕對還在開發中，但您已經可以實現一些有用的功能。例如，我們有儲存時源轉換器外掛，執行諸如刪除空格和新增版權訊息等操作。有關外掛系統的更多資訊，請參見釋出說明和 wiki 中的此處。基本上，外掛開發涉及編寫一個 AMD 模組，“require” 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

自述檔案描述了其他安裝選項，它作為一個獨立的 zip 檔案提供。許多使用者樂於跟隨主分支並每週/每天更新。