Eclipse JavaScript 编辑器：js 文件的内容辅助，自动完成

Posted

技术标签:

【中文标题】Eclipse JavaScript 编辑器：js 文件的内容辅助，自动完成【英文标题】：Eclipse JavaScript Editor: content assist for js files, autocompletion 【发布时间】：2010-11-03 15:56:11 【问题描述】：

我正在尝试将 Eclipse（带有 JavaEE 和 Web 开发插件）作为 JavaEE/GoogleAppEngine IDE。在 html 编辑器中，如果我将 <script ... src="..." /> 放入 <head> 中，我会自动在引用文件中获得 javascript 的内容辅助。我想知道是否可以在 JavaScript 编辑器中获取其他 JavaScript 文件（例如 jQuery 或自制 js 库）的内容辅助。

【问题讨论】：

【参考方案1】：

自 2019 年 6 月起，您可以使用“Wild Web Developer”插件（又名 WWD），它取代了许多其他插件（Tern、AngularJS Eclipse，...）。

https://projects.eclipse.org/proposals/eclipse-wild-web-developer https://marketplace.eclipse.org/content/eclipse-wild-web-developer-html-css-javascript-typescript-nodejs-angular-json-yaml https://github.com/eclipse/wildwebdeveloper

编辑 HTML、CSS、JavaScript、TypeScript (+ESLint)、JSON (+schema)、XML (+schema)、YAML (+schema)，专门支持 Angular、React 和 Kubernetes ，并在 Eclipse IDE 中简单高效地调试 Node.js 和 HTML+JS Web 应用程序。

要查看它的实际效果，请使用默认包含在 Eclipse IDE 中的通用编辑器打开所需的文件。

版本支持的文件格式：

HTML
CSS, SCSS, SASS, LESS
JavaScript (EcmaScript 2018 - 9th edition)
TypeScript 3.8
JSON and JSONC (including schema support)
YAML (including schema support)
XML (including schema support), XSL, XSD, DTD

支持的框架（文件专业化）和版本的 linter：

Angular (template assistance in HTML and TS files)
Kubernetes (schema built-in when editing YAML)
React (JSX, TSX, embedded HTML)
ESLint (including Typescript-ESLint)

版本支持的功能是

Validation (diagnostics, markers)
Code Completion
Hover
Outline
Rename refactoring
Jump to declaration
Find references
Color preview
... and other features part of the Language Server Protocol

支持的调试目标

Node.js
Firefox
Chromium and Chrome

安装见github页面。

【讨论】：

【参考方案2】：
    右键单击您的项目并选择属性。 扩展 Javascript -> 包含路径。 在“库”选项卡中，单击“添加 Javascript 库”。 选择“用户库”->“配置用户库”。 添加所有需要的 .js 文件，点击确定，等待项目构建完成。 您应该在编辑自己的 .js 文件时添加所有库文件的代码完成。

【讨论】：

【参考方案3】：

我尝试了很多建议，但都失败了。即将放弃我遇到了这个：

    从 Eclipse 市场搜索 JSDT jQuery 并安装。我找到了 JSDT jQuery 1.5.0。 右键单击您的项目并配置构建路径（我知道我也希望它是工作区级别）。 转到 JavaScript > 包含路径并单击添加 JavaScript 库... 选择 jQuery。这是 v1.8 支持。我看了看，但找不到更新的东西。 重新启动 Eclipse 和 viola。

终于，对吧？！

【讨论】：

我没有得到 jQuery 作为添加 JS 库的选项。任何解决方法..【参考方案4】：

免责声明我是 tern.java 的作者。

我建议你 install tern.java 扩展 JSDT 以改进对许多现代 JavaScript 框架（jQuery、jQuery UI、jQuery Mobile、YUI、Dojo、Cordova 等）的 JavaScript 支持（完成、悬停、超链接、验证） ) 查看tern modules的完整列表

【讨论】：

这是唯一对我有用的解决方案（我关注了the installation guide）。感谢您已经完成的出色工作，我希望 Tern Eclipse IDE 长期保持活跃:) 这很不错。它能够在没有 JSDoc 的大型 JS 应用程序上推断出大多数类型。放置在函数和变量上方的注释会显示在工具提示中。 我尝试按照 Abdull 使用 Eclipse Marketplace 的建议按照 GitHub 上的安装指南进行安装，但我收到一条消息，指出它与我的 Eclipse 版本不兼容 (eclipse-jee-2019-06 -R-linux-gtk-x86_64)【参考方案5】：

作为对其他答案的补充，我强烈建议安装Eclipse JSHint plugin。 您可以通过项目偏好配置它，它就像一个魅力。它会在 JavaScript 编辑器中显示其他警告。

我还建议在您的函数上方编写 jsDoc，因为这将有助于 Eclipse（@memberOf，您可以使用 Ctrl+o 进行导航）。

您也可以迁移到 TypeScript，因为 Eclipse 支持现在已经成熟（2015 年），TypeScript 是类型化的，IDE 可以从中受益（自动完成功能就像 Palantir 的魅力一样）。

【讨论】：

【参考方案6】：

我刚刚想通了如何在Eclipse JavaScript 编辑器（没有Aptana 插件）中获取js 内容辅助：

如果项目类型本身不包含 JavaScript 支持：打开 Web（或 JavaScript）透视图，右键单击项目并选择 Web 开发支持 > 添加 JavaScript 支持 em>（如果 JavaScript 支持已经存在，这不会有什么坏处）

然后在项目中右键单击 JavaScript Support 并选择 Properties，在 JavaScript 部分转到 JavaScript 库，然后选择 Source 选项卡：在这里您可以添加文件夹和当前项目的内容助手要扫描的文件

在 Aptana Studio 中（作为一个 Eclipse 插件，但我想独立版本几乎相同）：打开任何 js 或 html 文件，显示 References 窗口（或打开Eclipse 中的 Aptana 透视图）和拖放 js 文件添加到 JavaScript 范围（可以使用不同的 JavaScript 文件和资源构建和激活不同的范围配置文件：只需单击窗口中的 添加配置文件工具栏）

【讨论】：

不幸的是，这种方式会给您带来大量错误，因为内置的 javascript 解析器有些欠佳 @Jonathan：“有点？”我刚刚安装了最新的 Eclipse，但它在基本的事情上失败了，比如理解带有引号的正则表达式文字，或者用作函数参数时的 undefined 关键字。哎呀。 @utaal 它对我不起作用！如果我点击我的项目，弹出菜单中没有“Web 开发支持”！ @Cgraphics，也许它不起作用，因为您的项目不是网络项目 对于在 JavaServer Pages (.jsp) 文件（包括 .js 文件）中声明的所有全局变量，我的 JavaScript 文件 (.js) 文件中出现很多错误。我假设 HTML 也存在类似的问题。属性 -> JavaScript 库源设置只允许我添加 .js 文件，而不是 .jsp 和 .jspf 文件。 （目前在 IBM 的 Rational Application Developer 工作，基于 Eclipse 3.4 构建）【参考方案7】：

对于最新的 Eclipse Kepler 版本，还有一个可供考虑的选项是 VJET JavaScrip IDE。最初在 eBay 开发，最近为 Eclipse 基金会做出了贡献。它仍处于孵化阶段，但可以从每晚更新站点安装。 “VJET: JavaScript Toolkit”提案中描述了初始功能。它在 JavaScript 编辑器中为各种 JS 库提供内容辅助，例如：

Node.js jQuery 道场 JSON 帆布

通过VJET ANVILs Projects 导入工作区。

【讨论】：

【参考方案8】：

对于最近的 Eclipse 版本（比如我的 Indigo SR2），需要做两件事才能在 GAE 项目中获得 jQuery 的代码辅助。

    通过以下方式将项目配置为 JavaScript 项目：右键单击项目 -> 配置（属性上方）-> 转换为 JavaScript 项目

    按照 Butterworth 先生和jQuery autocompletion 说的做，安装 JSDT jQuery 插件并将 jQuery 添加到项目的 JavaScript 资源中

【讨论】：

【参考方案9】：

为 Aptana Studio 3.2 启用 Javascript 验证：

    窗口 -> 首选项 -> 验证 选择 Javascript 并启用 jslint 项目 -> 属性 -> 项目性质 选择 Web（以及您想要的任何其他内容） 窗口 -> 显示视图 -> 问题 保存您的文件，出现问题时会出现警告

【讨论】：

【参考方案10】：

适用于 Eclipse Juno 4.2 和 Aptana Studio 3 和 JQuery (jquery-1.7.2.js)

我确实得到了这个有效的答案，并在上面提出了一个警告。

按照上面的 magjis 将缩小的 JQuery 库放到现有项目的子文件夹中对我来说不起作用。在创建一个新项目并使用未压缩的库后，它确实对我有用。

在 SO 和其他地方有几十个过时的帖子提到了已弃用的 Aptana 对话框，并提供了与当前 Eclipse 版本无关的信息。我所知道的是，对于 Eclipse Juno 4.2、Aptana 3 和 JQuery 1.7.2，这是有效的（至少对我而言）：

确保您已安装 Aptana 插件并且处于 Web 透视图中。这就是 Aptana Studio 透视图的名称……如果他们将其命名为包含“Aptana”一词的东西，那就不会那么混乱了。

确保您的默认编辑器是“JavaScript 源代码编辑器”。在 Window -> Preferences -> General -> Editors -> File Associations 中进行设置，然后在列表中选择 .js 扩展名。下面的列表框中有多个选项。使用任何其他编辑器甚至都没有给我代码着色...这是我唯一可以使用代码辅助的工具。

我在听从上面 magjis 的建议之前就这样做了，所以我不知道这是否有必要。但我安装了 JQuery 卢布如下： http://wiki.appcelerator.org/display/tis/JavaScript+Library+Support#JavaScriptLibrarySupport-jQuery%28

然后，在上面解释 magjis 的回答： 创建一个新项目并添加未压缩的 JQuery 库，方法是将 jquery-1.7.2.js 拖放到 Project Explorer 中的项目中，并在出现的对话框中选择 Link To File 选项。我链接到项目根目录的 /js 文件夹中的 jquery-1.7.2.js ，无论如何，这是库通常所在的位置。 将 jquery1.4.2.sdocml 拖放到项目中，然后选择复制或链接到该文件。我将文件复制到项目的根目录中。

如果我可以进一步评论，回想起来，我希望我在两个月前放弃了 Eclipse 并坚持使用 Notepad++，或者花时间寻找更精简、更快、更稳定的 php/JS/HTML/CSS 环境。

【讨论】：

【参考方案11】：

对于 Aptana Studio 3：（已测试 Eclipse 插件）

找到您感兴趣的库...将其保存到您的磁盘，然后将其拖到您的项目中。它位于项目中的哪个位置无关紧要，因此您可以根据需要为此类文件创建一个新文件夹。

！！该项目必须是某种类型的 Web 项目：Web、PHP、Python、Ruby、Rails。

http://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries

【讨论】：

【参考方案12】：

imo, Aptana 是最好的 Eclipse js 编辑插件。它包括对许多主要库的支持，如 jQuery、yui、dojo 等。

Spket，不过也不错。虽然主要是如果您进行 Firefox 扩展开发（虽然有点过时了）

内置的 js 编辑器很糟糕。它声称到处都有错误，即使显然没有。

【讨论】：

感谢您的提示：我刚刚安装了 Aptana js 编辑器插件，它看起来非常不错。但是，如何为我的 js 文件（而不是库）获得内容辅助？ 如果没有自动关联，请转到窗口菜单 -> 首选项。在首选项的常规部分，转到编辑器-> 文件关联。然后选择*.js文件类型并将aptana编辑器设置为默认 另外，对于 jquery 代码辅助，您需要转到首选项 -> Aptana -> 编辑器 -> JavaScript -> 代码辅助并选中 jQuery 旁边的框

以上是关于Eclipse JavaScript 编辑器：js 文件的内容辅助，自动完成的主要内容，如果未能解决你的问题，请参考以下文章

eclipse中js代码如何设置可折叠？

如何安装和配置 AngularJS Eclipse

如何在 Eclipse ADT 中编辑 HTML/CSS/Javascript [关闭]

有没有eclipse下编辑html，js，css时语法自动提示的插件

Eclipse--解决eclipse下的Requesting JavaScript AST from selection

Eclipse 中的 JavaScript 编辑器 [关闭]