Eclipse JavaScript Editor：js 文件的内容辅助、自动完成
我正在尝试将 Eclipse（带有 JavaEE 和 Web 开发插件）作为 JavaEE/GoogleAppEngine IDE。 在 HTML 编辑器中，如果我将
I'm trying Eclipse (with JavaEE and Web Development plugins) as a JavaEE/GoogleAppEngine IDE. In HTML editor if I put a <script ... src="..." /> in <head> I automatically get content assist for JavaScript in the referenced file. I was wondering if it was possible to obtain content assist for other JavaScript files (e.g. jQuery or homebrew js library) inside JavaScript editor.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（12）
我刚刚弄清楚如何在Eclipse JavaScript编辑器中获取js内容辅助（没有Aptana插件）：
如果项目类型本身不包含JavaScript支持：打开Web（或JavaScript）透视图，右键单击在项目上并选择Web Development Support > 添加 JavaScript 支持（如果 JavaScript 支持已经存在，这不会造成影响），
然后右键单击项目中的JavaScript 支持并选择属性，在 JavaScript 部分中，转到 JavaScript 库，然后选择“源”选项卡：在这里，您可以添加要由当前项目的内容辅助扫描的文件夹和文件
在 Aptana Studio 中（作为 Eclipse 插件，但我想独立版本几乎相同）：打开任何 js 或 html 文件，显示参考窗口（或在 Eclipse 中打开 Aptana 透视图）并拖放要添加到 JavaScript 范围的 js 文件（这是可能的）使用不同的 JavaScript 文件和资源构建和激活不同的范围配置文件：只需单击窗口工具栏中的添加配置文件）
I just figured out how to obtain js content assist in Eclipse JavaScript editor (without Aptana plugins):
If the project type doesn't natively contain JavaScript Support: open Web (or JavaScript) perspective, right-click on the project and select Web Development Support > Add JavaScript Support (this won't hurt if JavaScript support is already present)
then right-click JavaScript Support within the project and select Properties, in the JavaScript section go to JavaScript library and then select Source tab: here you can add folders and files to be scanned by content assist for the current project
In Aptana Studio (as an eclipse plugin but I suppose the standalone version is almost the same): open any js or html file, show References window (or open Aptana perspective in eclipse) and drag-drop js files you want to add to JavaScript scope (it is possible to build and activate different scope profiles with different JavaScript files and resources: just click add profile in the window toolbar)
在我看来， Aptana 是用于 js 编辑的最佳 Eclipse 插件。 它支持许多主要库，如 jQuery、yui、dojo 等。
Spket 不过也不错。 不过，大多数情况下，如果您进行 Firefox 扩展开发（虽然有点过时），
内置的 js 编辑器很糟糕。 它声称到处都有错误，即使显然没有错误。
imo, Aptana is the best eclipse plugin for js editing. It includes support for many of the major libraries like jQuery, yui, dojo, etc.
Spket, however is also good. Though mostly if you do firefox extension development (getting a little out of date though)
The built in js editor is terrible. it claims there are errors all over the place even when there clearly are not.
对于 Aptana Studio 3：（已测试 Eclipse 插件）
找到您感兴趣的库...将其保存到磁盘，然后将其拖到您的项目中。 它位于项目中的哪个位置并不重要，因此您可以根据需要为此类文件创建一个新文件夹。
<强>!! 该项目必须是某种类型的 Web 项目：Web、PHP、Python、Ruby、Rails。
http://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries
For Aptana Studio 3: (plugin for Eclipse tested)
Find a library you are interested in...Save it to your disk, and then drag it into your project. It does not matter where in the project it sits, so you can create a new folder for files like this if you like.
!! The project must be some type of web project: Web, PHP, Python, Ruby, Rails.
http://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries
对于 Eclipse Juno 4.2 和 Aptana Studio 3 以及 JQuery (jquery-1.7.2.js)，
我确实得到了这个工作，并在上面提出了 magjis 答案，但有一个警告。
按照上面的 magjis 将缩小的 JQuery 库放入现有项目的子文件夹中对我来说不起作用。 创建新项目并使用未压缩的库后，它确实对我有用。
SO 和其他地方有许多过时的帖子引用已弃用的 Aptana 对话框，并提供与当前 Eclipse 版本无关的信息。 我所知道的是，对于 Eclipse Juno 4.2、Aptana 3 和 JQuery 1.7.2，以下是可行的（至少对我来说）：
确保您已安装 Aptana 插件并且位于 Web 透视图中。 这就是 Aptana Studio 视角的名称……如果他们将其命名为包含“Aptana”一词的东西，那就不会那么混乱了。
确保您的默认编辑器是“JavaScript Source Editor”。 在“窗口”->“设置” 首选项-> 一般-> 编辑-> 文件关联并在列表中选择 .js 扩展名。 下面的列表框中有多个选项。 使用任何其他编辑器甚至都没有给我代码着色...这是我可以获得代码帮助的唯一一个。
我在遵循上述magjis的建议之前就这样做了，所以我不知道是否有必要。 但我安装了 JQuery ruble，如下所示：
http://wiki.appcelerator.org/display/tis /JavaScript+Library+Support#JavaScriptLibrarySupport-jQuery%28
然后，对上面 magjis 的回答进行阐述：
创建一个新项目并添加未压缩的 JQuery 库，方法是将 jquery-1.7.2.js 拖放到项目资源管理器中的项目上，然后在出现的对话框中选择“链接到文件”选项。 我链接到项目根目录的 /js 文件夹中的 jquery-1.7.2.js，这是该库通常所在的位置。
将 jquery1.4.2.sdocml 放入项目中，然后选择复制或链接到该文件。 我将该文件复制到项目的根目录中。
如果我可以进一步评论的话，回想起来，我希望两个月前我就放弃了 Eclipse，而坚持使用 Notepad++，或者花时间寻找更精简、更快、更稳定的 PHP/JS/HTML/CSS 环境。
For Eclipse Juno 4.2 and Aptana Studio 3 and JQuery (jquery-1.7.2.js)
I did get this working and upvoted magjis answer above with a caveat.
Dropping the minified JQuery library as per magjis above into a subfolder of an existing project didn't work for me. It did work for me after creating a new project and using the uncompressed library.
There are dozens of outdated posts on SO and elsewhere that refer to deprecated Aptana dialogs and provide information that isn't pertinent to the current Eclipse version. All I know is that for Eclipse Juno 4.2, Aptana 3 and JQuery 1.7.2, here's what works (for me, at least):
Make sure you have the Aptana plugin installed and are in the Web perspective. That's what the Aptana Studio perspective is called...it would be less confusing if they named it something that had the word 'Aptana' in it.
Make sure your default editor is 'JavaScript Source Editor'. Set this in Window -> Preferences -> General -> Editors -> File Associations and choosing the .js extension in the list. There is more than one option in the list box below. Using any other editor didn't even give me code coloring...this is the only one I could get code assist to work with.
I did this before following magjis's advice above, so I don't know if it was even necessary. But I installed the JQuery ruble as below:
http://wiki.appcelerator.org/display/tis/JavaScript+Library+Support#JavaScriptLibrarySupport-jQuery%28
Then, to expound on magjis' answer above:
Create a new project and add the uncompressed JQuery library by dropping jquery-1.7.2.js onto the project in the Project Explorer and selecting the Link To File option in the dialog that appeared. I linked to the jquery-1.7.2.js in the /js folder of the project root which is where the library usually goes anyway.
Drop jquery1.4.2.sdocml into the project and choose to either copy or link to the file. I copied the file into the root of the project.
If I may make a further comment, in retrospect I wish I had given up on Eclipse two months ago and stuck with Notepad++ or spent the time looking for leaner, faster, more stable PHP/JS/HTML/CSS environment.
免责声明 我是 tern.java 的作者。
我建议您安装 tern.java 它将 JSDT 扩展为改进许多现代 JavaScript 框架（jQuery、jQuery UI、jQuery Mobile、YUI、Dojo、Cordova 等）的 JavaScript 支持（完成、悬停、超链接、验证）请参阅 tern 模块
Disclaimer I'm the author of the tern.java.
I suggest you that you install tern.java which extends JSDT to improve JavaScript support (completion, hover, hyperlink, validation) for a lot of modern JavaScript frameworks (jQuery, jQuery UI, jQuery Mobile, YUI, Dojo, Cordova, etc) See the full list of tern modules
我尝试了很多建议，但都失败了。 正要放弃时，我遇到了这个：
终于，对吧？！
I tried and failed at many suggestions. About to give up I came across this:
Finally, right?!
为 Aptana Studio 3.2 启用 Javascript 验证：
Enabling Javascript validation for Aptana Studio 3.2:
对于最新的 Eclipse 版本（例如我的 Indigo SR2），需要完成两件事才能在 GAE 项目中获得 jQuery 的代码帮助。
通过以下方式将项目配置为 JavaScript 项目：右键单击项目 -> 配置（属性上方）-> 转换为 JavaScript 项目
像 Butterworth 先生一样做正确的事和 jQuery 自动完成 说，安装 JSDT jQuery 插件并将 jQuery 添加到项目的 JavaScript 资源中
For recent Eclipse versions (like my Indigo SR2), two things need to be done to get code assist for jQuery in a GAE project.
Configure the project to be a JavaScript project by: Right click project -> Configure (right above Property) -> Convert to JavaScript Project
Do right as Mr. Butterworth and jQuery autocompletion said, install the JSDT jQuery pluggin and add jQuery to the project's JavaScript Resources
对于最新的 Eclipse Kepler 版本，还有一个可供考虑的选项，即 VJET JavaScrip IDE。 最初是在 eBay 开发的，最近为 Eclipse 基金会做出了贡献。 它仍处于孵化阶段，但可以从夜间更新站点安装。 初始功能在“VJET：JavaScript 工具包”提案中进行了描述。 它在 JavaScript 编辑器中为各种 JS 库提供内容辅助，例如：
通过 VJET ANVILs 项目导入工作区。
For latest Eclipse Kepler Release there is one more option to consider which is VJET JavaScrip IDE. Originally developed in eBay and recently contributed to Eclipse foundation. It is still in incubation phase, but can be installed from nightly update site. Initial functionality is described in 'VJET: JavaScript Toolkit' proposal. It provides content assists in JavaScript editor for various JS libraries like:
through VJET ANVILs Projects imported into workspace.
作为对其他答案的补充，我强烈建议安装 Eclipse JSHint 插件。
您可以通过项目首选项来配置它，它的工作方式就像一个魅力。 它在 JavaScript 编辑器中显示其他警告。
我还建议在函数上方编写 jsDoc，因为这将有助于 Eclipse（
@memberOf，您可以使用 Ctrl+o 进行导航）。您也可以转向 TypeScript，因为 Eclipse 支持现已成熟（2015 年），TypeScript 是类型化的，并且 IDE 可以获得好处（自动完成功能就像一个魅力 Palantir）。
As a complement to the other answers I strongly recommend installing the Eclipse JSHint plugin.
You can configure it via project preferences and it works like a charm. It shows additional warnings in the JavaScript editor.
I would also recommend writing jsDoc above your functions as this will help Eclipse (
@memberOf, you can use Ctrl+o to navigate).You may also move to TypeScript as Eclipse support is now mature (2015), TypeScript is typed and an IDE can reap the benefits (autocompletion works like a charm with Palantir).
自 2019 年 6 月起，您可以使用“Wild Web Developer”插件（又名 WWD），它取代了许多其他插件（Tern、AngularJS Eclipse 等）。
编辑 HTML、CSS、JavaScript、TypeScript (+ESLint)、JSON (+schema)、XML (+schema)、YAML (+schema)，专门支持 Angular、React 和 Kubernetes，并且可以轻松调试 Node.js 和 HTML+JS Web 应用程序并且在 Eclipse IDE 中高效。
要查看其实际效果，请使用 Eclipse IDE 中默认包含的通用编辑器打开所需的文件。
版本支持的文件格式：
版本支持的框架（文件专业化）和 linter：
版本支持的功能
支持的调试目标
有关安装，请参阅 github 页面。
Since 2019-06 you can use the "Wild Web Developer" plugin (aka WWD) which replaces many other plugins (Tern, AngularJS Eclipse, ...).
Edit HTML, CSS, JavaScript, TypeScript (+ESLint), JSON (+schema), XML (+schema), YAML (+schema), with specialized support for Angular, React and Kubernetes, and debug Node.js and HTML+JS web-apps simply and efficiently in the Eclipse IDE.
To see it in action, open the desired file with the Generic Editor that's included by default in the Eclipse IDE.
Supported file formats for edition:
Supported frameworks (file specialization) and linters for edition:
Supported features for edition are
Supported debugging target
For installation see github page.