Question

我想lint（甚至可能自动）在JavaScript中美化空白。问题是是否有任何工具可以做到这一点。

我知道JSLint和JSHint，例如，可以检查缩进和尾随空格，这两者都很好，但这些并不是你可能拥有的唯一一种空格。

我想检查的是：

在某些构造之前或之后是否有空行？
是否有多个空行？
某些事物之间是否存在单个空格（这是由JSLint / JSHint部分检查的）？
...

基本上，我想拥有像Visual Studio和Resharper这样的现代IDE可以做的所有事情，但作为可以嵌入Grunt的命令行工具。

我发现在这个方向上做的唯一事情是esformatter，但根据其网站

仍处于早期开发阶段，并且缺少对许多重要功能的支持。

当然，如果有更成熟的东西会很棒。

有什么想法吗？

Answer 1

6个月后

更新并进行大量搜索

我建议你选择 eslint 。它建立在可插拔linting规则的基础上，这就是你所要求的。您可以使用grunt-plugin grunt-eslint 指定linting规则并自动执行。它仍然是pre-alpha，但比esformatter的进展更快。它有一个定义明确的roadmap。

<强>原始

你问的问题没有简单的答案。所以，让我分解一下，然后分解回答。您需要现有IDE的功能，如Visual Studio和Resharper，在命令行上可以嵌入到Grunt中。广泛地分类您可能想要的功能：

编译器/调试器
- 在运行时之前/期间测试错误。
Lint / flag可疑代码
- 遵循编码标准，帮助发现可能存在的缺陷。
格式化/美化
- 使代码可读

制作IDE时，请记住以上所有内容。因此，在IDE中为节点找到一个同样强大的格式化器很难。

调试器

我知道可以将eclipse调试器用于节点。请检查此link

棉绒/格式化

对于grunt（基于JSLint / JSHint）：

grunt-contrib-jshint
grunt-jslint
grunt-linter
grunt-jsbeautifier

esformatter功能强大，因为它使用esprima来解析和格式化Javascript。它是格式化程序而不是lint，因此在使用之前可能需要使用lint代码。您可以查看使用esprima的其他格式化程序：

codepainter 使用ECMAscript进行JavaScript美化

从其支持的样式属性中，它具有一些您可以使用的功能：

缩进：{字符：'？'，宽度：？ }
LastEmptyLine：现在，省略
QuoteType：single，double
SpaceAfterControlStatements：现在，省略
SpaceAfterAnonymousFunctions：现在，省略
SpacesAroundOperators：现在，省略
TrailingWhitespaces：strip

esmangle ECMAScript代码mangler / minifier

esmangle正在使用esprima作为解析器并使用escodegen作为代码生成器。请参阅demo。

正在为ECMAscript开发许多软件包，您可以查看它们here

Answer 2

＆＃34; @Golo：那么你想要的是能够在各种语境中指定各种语言结构之间的空白情况吗？（例如，if-then-else如何在do循环内部与函数顶层内部进行布局）？

Golo：那是对的： - ）＆＃34;

然后你需要的是访问代码中每个点的语言结构，以及每个语言元素的精确位置信息（开始/结束行/列）。对于 linting ，您需要一种方法来针对这些事物的组合编写测试。对于 repair ，您需要一种方法来重新生成符合约束条件的文本。你显然希望所有的配置都很容易。

＆＃34;结构＆＃34;你想要的是语法树中的解析器产生的。上下文是围绕感兴趣的结构的语法结构。您不需要抽象语法树，因为它会丢失您想要检查/控制其位置的具体标记，因此您需要一个完整的具体分析树。

解析器对精确的源位置不感兴趣，但是词法分析器（需要将输入流分解为语言令牌以提供给解析器）能够收集这些精确的信息。你担心一些复杂的问题＆＃34;什么构成了列调整以及多少＆＃34;。一些例子：制表符：制表符到下一个8字符边界？ 4个字符？预先指定标签栏？在Linux上，＆＃34; LF＆＃34;推进行号，并将列数重置为1.在Windows上，它是＆＃34; CR / LF＆＃34;作为一对。在我遇到的其他操作系统上，它是＆＃34; CR＆＃34;只要;在真正的现代系统中，Unicode换行符应该这样做。所以，如果在Linux上，你应该如何对待CR？如何在文本中找到空字符？ ^ Z？其他控制字符（例如，^ L [formfeed]）？

给定一个源文件，精确地解析为具有捕获的源位置的CST，现在您要检查结构是否按照您想要的方式对齐。首先，您需要指定结构;循环？构造函数？数据申报？然后，您需要在列位置上使用谓词来为您提供精确控制。

几乎所有提供语法树的工具都没有提供任何简单的方法来引用这样的结构。几乎你不得不编写经典的编译器式程序代码，它知道语法树的形状并爬过它寻找感兴趣的树节点，然后四处查看是否存在其他相关的树节点。进入此模式后，您可以识别所需的树，然后编写更多程序代码来检查间距约定。

程序转换系统（PTS）通常提供“源到源”＃34;重写，您可以使用该语言的表面语法直接编写模式。这比在程序上爬树更方便。一些仅执行源到源模式对;有些提供了仅指定单个模式的能力。 PT系统还必须能够解析感兴趣的语言，并允许您为特定任务添加自定义检查。

例如，我们的DMS软件重组工具包解析ECMAScript，并提供此类源模式规范，以及附加自定义条件和操作的功能。举个例子：

domain ECMAScript;

pattern ideal_if_statement_layout(e:expression,s:statement):statement =
     " if (\e)
          \s"  if diagnose_not_equal(column(s),parentheses_column(e));

表达对＆＃34的兴趣;如果那么＆＃34;语句（你为＆＃34使用不同的模式;如果是那么＆＃34;），以及检查语句元素位置的自定义列比较函数的约束。＆＃34; diagnose_not_equal＆＃34;自定义功能会产生lint-complaint。引号是元引号;它们是模式匹配语言的一部分，而不是底层语言。 e 和 s 是元变量，并分别匹配任何语言结构表达式和语句。因为这些都适用于CST，所以它们不能与预期目标不匹配。自定义函数＆＃34;列＆＃34;仅获取与 s 最左边的子树相关联的起始列信息; DMS中的树管理API使得这基本上变得微不足道。＆＃34; parenthesescolumn＆＃34;需要，因为模式告诉你 e 的位置; ＆＃34;（＆＃34;位于 e 上方的树节点中，因此需要对树进行一些轻微导航才能找到＆＃34;（＆＃34;，然后提取它的最右边的列，也可以使用DMS树API轻松完成。

您可以构建任意复杂的模式;你也可以在一个模式中创造一个条件，取决于另一个模式的匹配。因此，使用适量的自定义列提取功能，您可以编写各种linting检查。

这不能让你得到的是检查＆＃34; if＆＃34;关键字是＆＃34;（＆＃34;关键字）左侧的一个空格。您可以在某种程度上表达添加自定义检查，例如＆＃34; statement_keyword_column＆＃34;等等，但这已经开始了尴尬。

你可能会注意到模式的布局;将它作为约束也很好。 DMS没有提供直接的方法来做到这一点。但是，它完全能够读取自己的模式描述作为树。使用它，可以提取模式的适当布局，并使用它来检查结构布局。这需要使用DMS的一些复杂性，但这是一个汗水，而不是理论或缺少机制。

我个人不喜欢在布局上画画;我更喜欢这个文件只是变形了。 DMS确实具有漂亮的打印规则，可以将您的CST（无论其布局如何）转换为由其漂亮打印规则控制的布局。目前，这些规则特定于树节点，并用语法编码，因此它们有些受限。人们可以写（在语法中）：

   stmt =  'if' expression stmt ';'
   <<PrettyPrinter>>:  { V(H('if,expression),I(stmt[1])) }

这将导致所有if-then语句重新生成为：

    if expresssion
       stmt

[V表示＆＃34;垂直框＆＃34;两个子盒子; H表示＆＃34;水平框＆＃34;，我的意思是＆＃34;缩进框＆＃34;]

仔细使用这种漂亮的打印规则可以很好地重新格式化代码。它并不完美，因为您无法通过这种方式控制多个语句的布局。但这是DMS的一部分，实际上很容易修改。

理想的解决方案是使用模式语言，并使用模式中的布局来控制漂亮打印。这是我们的计划，但唉，还没有在DMS中。

我认为其他PTS可以在某种程度上表达模式，如上所述，并且大多数都有某种方式来指定像DMS那样的漂亮印刷品。所以好消息是这些工具可以满足您的需求。不太好的消息是选择其中一个工具并学会使用它的努力;一个下午不会一蹴而就。

Answer 3

基本上，我想拥有像Visual Studio和Resharper这样的现代IDE可以做的所有事情，但作为可以嵌入Grunt的命令行工具。

这个怎么样：https://npmjs.org/package/grunt-jsbeautifier

基本上https://npmjs.org/package/js-beautify包含在Grunt任务中。

编辑，扩展我的原始答案：我不熟悉VS Resharper的功能，但是 - 至少根据自述文件 - 有一个让JSLint满意的选项（和我们都知道一个人可能是多么挑剔。

Answer 4

谷歌闭包lint有一个修复lint功能，它为你的代码提供了美化，并与谷歌风格指南内联。 https://developers.google.com/closure/utilities/docs/linter_howto

Answer 5

我使用Eclipse，因为我编写了java，javascript，perl（EPIC插件），shell脚本等等。 Eclipse将使用CTRL-SHIFT-F快捷方式轻松编码任何这些语言的格式。这对我来说非常适合 IDE 。

对于命令行，您可以调用eclipse的格式化工具。参见：

Eclipse command line formatting of Java code
Can the Eclipse Java formatter be used stand-alone

所有这一切，除非您或您团队中的人员已经在使用Eclipse，否则它可能比您正在寻找的开销更大。但！ Eclipse的代码格式是高度可配置的，可以处理你的一些空白/空行问题。

JavaScript中的Beautify / lint空白

5 个答案:

调试器

棉绒/格式化