Scripted:VMware 推出的 JavaScript 编辑器

工程 | Andy Clement | 2012 年 10 月 11 日 | ...

Scripted 代码编辑器的第一个版本本周已在 github 上发布:https://github.com/scripted-editor/scripted

尽管 Scripted 是一个通用的代码编辑器,但最初的重点是构建出色的 JavaScript 编辑体验。Scripted 本身完全使用 JavaScript 和 HTML/CSS 构建。它是一个基于浏览器的编辑器,在开发人员的机器上本地运行,并使用 Node.js 实例来提供编辑器代码并执行编辑器操作。运行 Scripted 的唯一先决条件是您安装了最新版本的 Node.js(我们目前正在使用 Node 0.8.11 进行测试)。Scripted 重用了来自 Eclipse Orion 的编辑器组件。

 

Scripted 实际应用

 

为什么创建 Scripted?

Scripted 是内部一些原型设计和调研工作的成果,旨在探索未来工具的不同策略。探索这一领域的驱动因素主要有两方面

首先,我们看到许多用户选择不使用 IDE,而是倾向于使用更简单的轻量级编辑器(如 vim、Sublime、textmate)。开发人员通常对于执行常见任务(例如命令行 git)非常熟悉一套工具,并且不觉得有必要通过其他用户界面来学习如何使用这些工具。这些开发人员希望工具能够几乎即时启动并在操作过程中保持极高的响应速度。然而,目前来看,当他们选择放弃 IDE 时,似乎也放弃了他们习惯的一些优势,比如出色的内容辅助、快速导航和早期错误提示。Scripted 提供了一种轻量且快速的方案,同时支持开发人员不可或缺的关键 IDE 功能,例如内容辅助和对常见模块系统的理解。这些是 Scripted 的核心焦点。

其次,我们看到云 IDE 和云工作空间的概念越来越受欢迎。开发人员连接到某个远程系统进行开发工作,通常这些工具(例如 Cloud9 IDEeXo Cloud IDE)提供基于浏览器的编辑体验。用户的工作空间位于远程系统上。这种设置对于某些团队来说效果很好,但根据我们的经验,开发人员并非 100% 时间都能连接到互联网,因此仍然需要离线开发模式;此外,让他们放弃“完全控制”并在远程托管文件可能也很困难。Scripted 遵循基于浏览器的编辑模型并在本地托管服务器,提供的方案既能满足开发人员当前的需求,未来通过简单地将服务器部署到远程,也能支持使用云工作空间。

从根本上说,我们认为许多现有的 JavaScript 工具在某些关键领域存在不足,鉴于我们在语言工具方面的背景,我们想看看能否构建一个轻量级工具来满足这些需求。  

专注于 JavaScript

JavaScript 的受欢迎程度持续增长。它不再仅用于客户端编程,像 Node.js 这样的框架使得它能够用于完整的端到端解决方案。这就是为什么我们选择将 JavaScript 作为 Scripted 的首要重点。当然,我们对相关的语言(例如 CoffeeScript、最近发布的 TypeScript)也很感兴趣,但目前来说,共同点是 JavaScript。我们希望为一种语言构建出色的体验,而不是为多种语言提供不太好的体验。  

功能集

  • 启动快,轻量。
  • JavaScript、HTML 和 CSS 的语法高亮。
  • 错误和警告
    • 集成了 JSLint,用于在 JavaScript 代码上提供错误/警告标记。
    • AMD 和 CommonJS 模块解析:提供基本解析,未解析的引用将被标记为错误。
  • 内容辅助
    • HTML、CSS 的基本内容辅助
    • 对于 JavaScript,内容辅助由一个类型推断引擎驱动,该引擎了解 AMD/CommonJS 模块依赖关系,并利用 JSDoc 注释来帮助理解代码。
  • 悬停提示:将鼠标悬停在 JavaScript 标识符上会显示推断的类型签名。
  • 导航:在标识符(经推断器识别)上按 F8,编辑器将导航到声明处。这也适用于模块标识符(例如在 define() 子句中)。
  • 格式化:集成了 JSbeautify
  • 侧边面板:在主编辑器旁边可以打开一个侧边面板——目前可用于托管第二个编辑器。
  • 绑定外部命令:编辑器中的快捷键可以调用外部命令(less, mvn 等)
这些功能的更多详细信息请参阅维基文档

 

使用 Scripted 开发 Scripted

Scripted 是 100% 的 JavaScript、HTML 和 CSS。因此,它是一个完美的 codebase,可以在其上使用 Scripted 编辑器。对于我们的其他工具项目,我们通常不在日常工作中亲自使用这些工具;相反,我们开发它们供其他人使用。在 VMware,我们正在使用 Scripted 开发 Scripted——没有什么比开发者自己不断遇到 bug 修复得更快了!

 

Scripted 快速入门

github 登录页面包含一个入门视频:

但基本步骤如下

  1. 确保已安装 node
  2. 从此处获取最新的打包版本 (0.2.0):scripted_v0.2.0.zip 
  3. 解压
  4. 确保 bin 文件夹中的脚本是可执行的(如果在 linux/mac 上),使用命令chmod 755 bin/*
  5. 将 bin 文件夹添加到你的 PATH

    Mac/Linuxexport PATH=<pathToUnzipLocationOrClone>/bin:$PATH

    Win

    set PATH=<pathToUnzipLocationOrClone>\bin;%PATH%  

  6. 开始使用,像启动 'vi' 一样,用 'scr' 或 'scripted' 启动它

    scr foo.js

Scripted 在启动时会尝试推断您的项目根目录。它通过搜索附近的.git.project文件。如果没有,它将以单文件模式工作。要告诉 Scripted 根目录在哪里,您可以创建一个简单的(空的).scripted文件放在根目录下。Scripted 需要知道根目录,因为当然,一些操作(如内容辅助、依赖解析、搜索)是在项目上下文中发生的。  

技术栈

如前所述,服务器端技术是 Node.js,但实际上服务器端代码量非常小。支撑推断引擎的是我们编写的一些用于分析模块依赖关系的服务器端 JS。

在客户端方面,我们不想重复造轮子来实现编辑器技术,因此选择了使用 Eclipse Orion 的编辑器。这提供了快速友好的编辑体验,对于使用过“完整版 Eclipse” 编辑器的人来说会非常熟悉——它共享了许多相同的行为和快捷键绑定。我们尽力将我们在内容辅助等功能方面的工作贡献回 Orion 项目。任何需要解析的 JavaScript 代码都会通过我们可恢复的 Esprima 解析器的衍生版本。当开发人员正在 actively 编辑文件时,代码通常处于未完成状态,因此一个即使在有错误时也能返回一个 decent 的 AST 的可恢复解析器非常重要。

 

接下来的计划?

我们目前处于早期阶段(0.2.0 版本),未来的计划包括
  • 更智能的推断,带来更好的内容辅助和更轻松的导航。
  • 侧边面板增加更多窗格。目前只有一个编辑器窗格,但我们打算加入搜索结果窗格、文档、Git 信息窗格,可能还有代码预览和模拟代码执行窗格。目的是让 Scripted 尽可能地自动管理这些窗格,以便屏幕上的所有内容都与当前任务相关。
  • 简单的插件系统。
  • 调试。探索与 Chrome Dev Tools 和 node inspector 等工具的集成。
 

我们决定尽早开源以获取反馈。如果您想帮助我们塑造这个编辑器,请加入讨论。有一个 scripted-dev Google 群组用于讨论,还有一个 jira 问题跟踪器用于记录错误、增强功能请求以及对现有问题进行投票,以确保它们得到适当的优先处理。如果您想亲自修改 codebase,我们绝对欢迎提交——请查看 github 页面获取更多信息。

请试用! https://github.com/scripted-editor/scripted

获取 Spring 新闻通讯

订阅 Spring 新闻通讯,保持联系

订阅

抢先一步

VMware 提供培训和认证,助您快速进步。

了解更多

获取支持

Tanzu Spring 在一个简单的订阅中提供对 OpenJDK™、Spring 和 Apache Tomcat® 的支持和二进制文件。

了解更多

即将举行的活动

查看 Spring 社区中所有即将举行的活动。

查看全部