11

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

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

我还想检查的是:

  • 在某些构造之前或之后是否有空行?
  • 是否有多个空行?
  • 某些事物之间是否有单个空格(由 JSLint / JSHint 部分检查)?
  • ...

基本上,我希望拥有现代 IDE(如 Visual Studio 和 Resharper)所能做的一切,但作为可以嵌入到 Grunt 中的命令行工具。

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

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

当然,如果有更成熟的东西那就太好了。

有任何想法吗?

4

5 回答 5

7

6个月后更新和大量搜索

我建议你看看eslint。它建立在可插拔 linting 规则的概念之上,这正是您所要求的。您可以使用 grunt-plugin grunt-eslint来指定 linting 规则并使其自动化。它仍然是 pre-alpha,但比 esformatter 发展得更快。它有一个明确的路线图


原来的

您提出的问题没有简单的答案。所以让我把它分解并分部分回答。您需要在命令行上嵌入现代 IDE 的功能,例如 Visual Studio 和 Resharper,您可以将其嵌入到 Grunt 中。对您(可能)想要的功能进行广泛分类:

  • 编译器/调试器
    • 在运行之前/期间测试错误。
  • 皮棉/标记可疑代码
    • 遵循编码标准,有助于发现可能的缺陷。
  • 格式化程序/美化器
    • 使代码可读

在制作 IDE 时,请牢记以上所有内容。因此,很难在 IDE 中为 node 找到一个同样强大的格式化程序。

调试器

我知道可以为节点使用 eclipse 调试器。检查此链接

棉绒/格式化程序

对于咕噜声(基于 JSLint/JSHint):

  1. grunt-contrib-jshint
  2. 咕噜声-jslint
  3. 咕哝短绒
  4. grunt-jsbeautifier

esformatter之所以强大,是因为它使用esprima来解析和格式化 Javascript。它是格式化程序而不是 lint,因此您可能必须在使用它之前对代码进行 lint。esprima您可以查看其他一些格式化程序:

使用 ECMAscript 的codepainter JavaScript 美化器

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

  1. 缩进:{字符:'?',宽度:?}
  2. LastEmptyLine:存在,省略
  3. 报价类型:单、双
  4. SpaceAfterControlStatements:存在,省略
  5. SpaceAfterAnonymousFunctions:存在,省略
  6. SpacesAroundOperators:存在,省略
  7. 尾随空格:带

esmangle ECMAScript 代码管理器/压缩器

esmangleesprima用作解析器并escodegen用作代码生成器。见演示

有许多正在为 ECMAscript 开发的包,你可以在这里查看它们

于 2013-03-14T17:07:41.947 回答
3

“@Golo:所以你想要的是能够指定在每种语言结构之间、在每种上下文中如何出现空格?(例如,if-then-else 如何在 do 循环内与顶部内布局?函数的级别)?

戈洛:没错 :-)”

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

您想要的“结构”是语法树中的解析器产生的。上下文是围绕感兴趣结构的句法结构。您不需要抽象语法树,因为这会丢失要检查/控制其位置的具体标记,因此您需要完整的具体分析树。

解析器对精确的源位置不感兴趣,但词法分析器(需要将输入流分解为语言标记以提供给解析器)可以收集这些精确信息。您担心“什么构成列调整以及调整多少”的一些复杂问题。一些例子: 制表符:制表符到下一个 8 字符边界?4个字?到预先指定的选项卡列?在 linux 上,“LF”将行号前移,并将列数重置为 1。在 Windows 上,“CR/LF”是一对。在我遇到的其他操作系统上,它只是“CR”;在真正现代的系统上,Unicode 换行符应该这样做。那么,如果在linux上,应该如何对待CR呢?在文本中找到空字符怎么样?^Z? 其他控制字符(例如,^L [formfeed])?

给定一个源文件,该文件被精确解析为具有捕获源位置的 CST,现在您要检查结构是否按照您想要的方式对齐。首先,您需要指定结构;做循环?构造函数?数据声明?然后你需要列位置的谓词来给你精确的控制。

几乎所有提供语法树的工具都没有提供任何简单的方法来引用这种结构。几乎你被困在编写经典的类似编译器的过程代码,它知道语法树的形状并爬过它寻找感兴趣的树节点,然后环顾四周看看是否存在其他相关的树节点。一旦你处于这种模式,你就可以识别你想要的树,然后编写更多的程序代码来检查间距约定。

程序转换系统 (PTS) 通常提供“源到源”重写,您可以在其中使用语言的表面语法直接编写模式。这比程序上绕树爬要方便得多。有些只做源到源模式对;有些提供仅指定单个模式的能力。PT 系统还必须能够解析感兴趣的语言,并使您能够为您的特定任务添加自定义检查。

例如,我们的 DMS Software Reengineering Toolkit 解析 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));

表达了对“if then”语句的兴趣(您可以对“if then else”使用不同的模式),以及对检查语句元素位置的自定义列比较函数的约束。“diagnose_not_equal”自定义函数会产生 lint-complaints。引号是元引号;它们是模式匹配语言的一部分,而不是底层语言。 es是元变量,分别匹配任何语言结构表达式语句。因为这些正在应用于 CST,所以它们不能与预期的目标不匹配。自定义函数“column”仅获取与s的最左侧子树相关联的起始列信息; DMS 中的树管理 API 使这基本上变得微不足道。需要“括号列”,因为该模式会告诉您e在哪里;“(”位于e上方的树节点中,因此需要稍微导航树以找到“(”,然后提取其最右边的列,这也很容易使用 DMS 树 API 完成。

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

这不会让您检查“if”关键字是否是“(”关键字左侧的一个空格,很容易。您可以通过添加自定义检查在某种程度上表达,例如,“statement_keyword_column”等。但这开始变得尴尬。

您可能会注意到图案的布局;也可以将其用作约束。DMS 不提供执行此操作的直接方法。但是,它完全能够将自己的模式描述读取为树。使用它,可以提取图案的明显布局,并使用它来检查结构布局。这需要对 DMS 的使用进行一些复杂的操作,但这是一个汗水问题,而不是理论或缺少机制。

我个人不太喜欢布局上的 linting。我希望文件只是被重新塑造。DMS 确实具有漂亮打印规则,可以将您的 CST(无论其布局是什么)转换为由其漂亮打印规则控制的布局。目前,这些规则是特定于树节点的,并且是用语法编码的,所以它们受到了一些限制。可以写(在语法中):

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

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

    if expresssion
       stmt

[V 表示两个子框的“垂直框”;H 表示“水平框”,I 表示“缩进框”]

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

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

我认为其他 PTS 可以在某种程度上表达上述模式,并且它们中的大多数都有某种方式来指定像 DMS 那样的漂亮打印。所以好消息是这些工具可以满足您的大部分需求。不太好的消息是选择其中一种工具并学会使用它需要付出很大的努力。一个下午并没有减少它,远射。

于 2013-03-15T15:16:51.507 回答
2

基本上,我希望拥有现代 IDE(如 Visual Studio 和 Resharper)所能做的一切,但作为可以嵌入到 Grunt 中的命令行工具。

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

它本质上是将https://npmjs.org/package/js-beautify包装到 Grunt 任务中。

编辑,扩展我原来的答案:我不熟悉 VS Resharper 的功能,但是 - 至少根据自述文件 - 有一个选项可以让 JSLint 开心(我们都知道一个可以是多么挑剔) .

于 2013-03-14T12:05:43.167 回答
2

google 闭包 lint 有一个修复 lint 功能,它可以为您优化您的代码并使其与 google 样式指南一致。 https://developers.google.com/closure/utilities/docs/linter_howto

于 2013-03-14T12:14:36.360 回答
0

我使用 Eclipse,因为我编写了 java、javascript、perl(EPIC 插件)、shell 脚本等等。CTRL-SHIFT-FEclipse 将使用快捷方式轻松地对这些语言中的任何一种以及更多语言进行编码格式化。这在IDE中对我来说效果很好。

对于命令行,可以调用eclipse的格式化工具。看:

  1. Java代码的Eclipse命令行格式化
  2. Eclipse Java 格式化程序可以单独使用吗

综上所述,除非您或您的团队中的其他人已经在使用 Eclipse,否则它可能会比您正在寻找的开销更大。但!Eclipse 的代码格式是高度可配置的,并且会处理您的一些空白/空行问题。

于 2013-03-15T12:38:08.440 回答