在Eclipse中自动格式化JavaScript代码

Question

考虑以下 JavaScript 代码的格式化：

$("#dataTable").jqGrid({
    url: base + "products-all",
    datatype: "json",
    jsonReader: {repeatitems: false, id: "ref"},
    colNames:["ID","Product name","Price"],
    colModel:[
        {name:"id",index:"id", width:40, align:"right", classes:"grid-col"},
        {name:"name",index:"name", width:600, align:"left", classes:"grid-col", editable:true, editoptions:{size:25}},
        {name:"price",index:"price", width:100, align:"right", classes:"grid-col", formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "}}
    ],
    rowNum:5,
    rowList:[5,10,20],
    height:114,
    shrinkToFit: true,
    sortname: 'id',
    sortorder: "asc",
    pager: "#pagingDiv",
    viewrecords: true,
    caption: "Products"
});

我应该如何在Eclipse中配置JavaScript格式化程序（即首选项>JavaScript>代码样式>格式化程序），以确保在应用自动格式化（SHIFT+CTRL+F）后，此代码看起来合适？我可以让Eclipse将JSON对象的每个字段放在新行上，但结果会看起来很乱。我也可以禁用在每个字段后插入换行符，然后整个对象将在一行中。

是否有可能禁用JSON对象内部的任何换行符插入/删除？如果不可能，我该如何处理此代码的自动格式化？

我还有另一个例子：

jQuery("#dataTable").jqGrid(
    'navGrid',
    '#pagingDiv',
    {}, 
    {reloadAfterSubmit:false},
    {reloadAfterSubmit:false},
    {reloadAfterSubmit:false},
    {sopt:['cn','bw','eq','ne','lt','gt','ew']}
);

这是一个方法调用。通常，所有的方法参数都应该在同一行上。但是在这里，我希望每个参数都在新的一行上。我该如何使代码通过自动格式化？

更新：

我使用的是Eclipse Kepler for Java EE Developers。我认为我的JavaScript编辑器是JavaScript Development Tools插件的一部分，而该插件又是Eclipse Web Developer Tools包的一部分。

- Alexey

---

我认为很难为您的口味分离每个规则。我启用格式化程序标志（与@Keyur描述的位置相同），并在json之前的行上放置//@formatter:off。 - cox

@cox 我更新了我的问题并提供了我Eclipse安装的详细信息。我只有在Java代码中才有//@formatter:off功能。我能找到获取JavaScript的方法，就是安装Aptana Studio插件，并使用它自己的JavaScript编辑器。但是，Aptana Studio相对比较重，我希望尽可能避免使用它。我很好奇，您是否使用Aptana Studio插件？如果没有，您的Eclipse中安装的JavaScript编辑器插件是什么？ - Alexey

抱歉！我使用Eclipse、Aptana（独立版）和LiClipse（试用/重新试用...）。那是来自Aptana的，它们看起来很相似！ - cox

@cox 谢谢！无论如何，您的评论都非常有帮助。 - Alexey

现在有Eclipse Wild Web Developer：https://projects.eclipse.org/proposals/eclipse-wild-web-developer - Christophe Roussy

Answer 1

如果你不想每次按 SHIFT + CTRL + F，那么只需要前往 偏好设置 -> JavaScript -> 编辑器 -> 保存操作 并勾选“格式化源代码”这个框即可。

- Duran Wesley Harris

---

我的Eclipse没有“首选项>JavaScript”选项。它有“首选项>Web>JavaScript”，但这只是链接到任务标记设置（出于某种奇怪的原因）。 - lurker

Answer 2

这个问题是没有希望的，因为即使jQuery也不会被正确地验证/格式化！

Eclipse中的JavaScript插件有几年的漏洞和恶意。

由于浏览器的不可预测性（ie.一些需要一个;，一些不需要，一些有JSON表示法，一些没有），它永远不会改变！我投票去除Eclipse中的javascript以清理Eclipse。

- Grim

---

我每天都用它，但你说得对。我们完全可以卸载Eclipse本身，保持干净整洁。 - Damien MIRAS

@DamienMIRAS 哈哈哈。经过多年使用Eclipse后，我转向了IntelliJ。 - LppEdd

我稍后会尝试一下这个！ - LppEdd

@LppEdd 不用试了。我有这个截图：https://i.stack.imgur.com/zQyN6.png。 - Grim

@PeterRader 嗯，他们通常非常专业。我认为那是一个漏洞，应该修复它。我为什么不应该报告它呢？我的意思是，这是一个相对容易的修复，我想我可以在公共GitHub存储库中完成它。 - LppEdd

Answer 3

这些选项在Eclipse首选项中。

要到达它，请按照以下步骤操作。

窗口菜单 >> 首选项 >> Web >> JavaScript >> 格式化程序

这将为您提供JavaScript的活动格式化配置文件。

选择要更改的配置文件并进行编辑或创建新配置文件。 这将为您提供一个新窗口，其中包含定义代码格式的所有选项。

您也可以对HTML、Java和其他代码执行相同的操作。

- Keyur Golani

---

Keyur，谢谢你的回复，但我知道选项的位置。我尝试过它们，但是我无法使我的代码片段看起来令人满意。 - Alexey

你想要更改整个JavaScript的自动格式化，还是只想以不同的方式自动格式化一个片段？ - Keyur Golani

我想更改整个 JavaScript 的自动格式设置。我希望能够一次性设置它，并让它在此后自动为我格式化代码。 - Alexey

所以基本上你不想每次都按 SHIFT + CTRL + F。 - Keyur Golani

谢谢你的建议。如果我找不到完全自动化的解决方案，我会按照这种方式去做。 - Alexey

我的Eclipse中不存在这个菜单。 - lurker

Answer 4

一个类似的问题在Java（而不是JavaScript）代码格式化器Eclipse中有一个答案这里。最受欢迎的两个答案建议使用// @formatter:off标签和Never join already wrapped lines选项。不幸的是，这些功能都不在Eclipse默认的JavaScript编辑器中（我认为它是JavaScript Development Tools / Eclipse Web Developer Tools的一部分）。

一个可能的解决方法是安装Aptana Studio插件并使用其JavaScript编辑器。该编辑器具有// @formatter:off功能（有关详细信息，请参见此处）。我没有找到任何类似于Never join already wrapped lines选项的东西。Aptana Studio是一个带有许多功能的插件，仅安装它以获取新的JavaScript编辑器可能不实用。Aptana Studio允许您编辑JavaScript文件，但如果您在JSP文件中嵌入了任何JavaScript代码，则无法帮助您。

另一个可能的解决方法是有选择地使用代码格式化：您可以选择一个代码块，然后按下 SHIFT + CTRL + F 仅对该特定块进行格式化。

如果您正在阅读此帖子，很可能您对 JavaScript 代码格式化存在另一个问题：当启用自动换行时，Eclipse 会搞乱 JavaScript 代码。您可以通过在“最大行宽”字段中输入一个较大的数字来禁用它，如 this answer 中所述。

- Alexey

---

有人在Aptana Studio中使用JavaScript有好的经验吗？还是有什么问题要报告的吗？谢谢。 - p555t