在JavaScript美化/皮棉空白

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

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

我想要检查的是：

  • 在某些结构之前或之后是否有空行？
  • 是否有不止一个空行？
  • 某些东西之间是单个空格（这是通过JSLint / JSHint部分检查的）？
  • …

基本上，我想拥有一些像Visual Studio plus Resharper这样的现代化IDE，但是作为一个可以embedded到Grunt中的命令行工具。

我发现的唯一的东西在这个方向是esformatter ，但根据它的网站

仍处于早期发展阶段，缺less对许多重要function的支持。

如果有更成熟的东西，那当然会好的。

有任何想法吗？

6个月后更新 ，大量search

我build议你看看eslint 。 它是build立在可插拔短线规则的基础上的，这就是你所要求的。 您可以使用grunt-plugin grunt-eslint指定linting规则并自动执行。 它仍然是前alpha，但进步比esformatter更快。 它有一个明确的路线图 。

原版的

你所问的问题没有简单的答案。 所以让我把它分解并分解。 您可以在命令行上使用Visual Studio和Resharper等现代IDE的特性，您可以将它们embedded到Grunt中。 大致分类您可能需要的function：

  • 编译器/debugging器
    • 在运行之前/期间testing错误。
  • 皮特/国旗可疑代码
    • 遵循编码标准，有助于发现可能的缺陷。
  • 格式化/美化
    • 使代码可读

以上所有内容都是在制作IDE时牢记的。 所以在IDE中find一个格式化程序是非常困难的。

debugging器

我知道有可能使用eclipsedebugging器为节点。 检查这个链接

棉绒/格式化

咕噜（基于JSLint / JSHint）：

  1. 咕噜-的contrib-jshint
  2. 咕噜-的JSLint
  3. 咕噜棉短绒
  4. 咕噜，jsbeautifier

esformatter是强大的，因为它使用esprima来parsing和格式化Javascript。 这是一个格式化程序，而不是一个皮棉，所以你可能不得不在使用它之前的代码。 还有其他一些使用esprima格式化esprima你可以看看：

使用ECMAscript的codepainter JavaScript美化工具

从其支持的样式属性中，您可以使用一些function：

  1. 缩进：{character：'？'，width：？ }
  2. LastEmptyLine：存在，省略
  3. QuoteType：单，双
  4. SpaceAfterControlStatements：存在，省略
  5. SpaceAfterAnonymousFunctions：存在，省略
  6. SpacesAroundOperators：目前，省略
  7. 尾随空白：带

esmangle ECMAScript代码修改器/缩小器

esmangle使用esprima作为parsing器并使用escodegen作为代码生成器。 看演示 。

有很多软件包正在为ECMAscript开发，你可以在这里查看

“@Golo：所以你想要的是能够指定每种语言结构之间在各种语境之间是如何产生空白的（例如，如果if-then-else在do循环内部与top一个函数的级别）？

Golo：这是正确的:-)“

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

你想要的“结构”是语法树中parsing器产生的。 上下文是围绕感兴趣的结构的句法结构。 你不需要一个抽象的语法树，因为它丢失了你想要检查/控制位置的具体标记，所以你需要一个完整的具体的parsing树。

parsing器对精确的源位置不感兴趣，但是词法分析器（需要将inputstream分解为语言标记以供给parsing器）才能收集这些准确的信息。 你担心一些复杂的问题，“什么是列调整和多less”。 一些例子：制表符：制表符到下8个字符的边界？ 4个字符？ 预先指定的标签列？ 在Linux上，“LF”提前行号，并将列数重置为1.在Windows上，它是“CR / LF”。 在我遇到的其他操作系统上，它只是“CR” 在真正的现代系统上，Unicode换行符应该这样做。 那么，如果在linux上，你应该如何对待CR呢？ 如何在文本中find空字符？ ^ Z？ 其他控制字符（例如^ L [formfeed]）？

给定一个源文件，用捕获的源位置精确地parsing成CST，现在你想检查一个结构是否按照你想要的方式alignment。 首先，你需要指定结构; 做循环？ 构造函数？ 数据声明？ 然后你需要列位置上的谓词来给你精确的控制。

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

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

例如，我们的DMS Software Reengineering ToolkitparsingECMAScript，并提供这些源码型规范，以及附加自定义条件和操作的能力。 举个例子： 

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

expression了对“if then”语句的兴趣（对“if then else”使用不同的模式）以及对检查语句元素位置的自定义列比较函数的约束。 “diagnose_not_equal”自定义函数会产生lint投诉。 引号是元引号; 它们是模式匹配语言的一部分，而不是基础语言。 e和s是元variables，分别匹配任何语言结构expression式和语句 。 由于这些标准正在适用于科技委，因此不能与其预期的目标不匹配。 自定义函数“列”只是选取与s的最左侧子树相关的起始列信息; 在DMS中的树pipe理API使得这基本上微不足道。 “括号列”是必要的，因为该模式告诉你在哪里， “（”是在e上面的树节点中，所以需要树的轻微导航来find“（”，然后提取它的最右边的列，也很容易用DMS树API来完成。

你可以构build任意复杂的模式; 你也可以在一个模式中做出一个条件，取决于另一个模式的匹配。 所以，通过适量的自定义列提取function，您可以编写各种检查。

这不会得到你是一个检查，“if”关键字是“（”关键字左侧的一个空格，你可以在一定程度上表示join自定义检查，例如，“statement_keyword_column”等。但是这开始变得尴尬。

您可能会注意到该模式的布局 ; 将它作为约束条件也不错。 DMS不提供直接的方法来做到这一点。 但是，它完全能够将自己的模式描述作为树来阅读。 使用这个，可以提取图案的显示布局，并使用它来检查结构布局。 这需要一些复杂的使用DMS，但是是一个汗水，而不是理论或缺less机制的问题。

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

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

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

  if expresssion stmt

[V表示两个子盒的“垂直框” H的意思是“水平方块”，我的意思是“缩进方块”]

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

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

我认为其他PTS可以像上面那样在一定程度上expression模式，其中大多数可以指定像DMS那样的漂亮打印。 所以好消息是这些工具可以做你想做的事情。 不太好的消息是，select一种工具并学会使用它是相当费力的; 一个下午不会削减它，通过一个远射。

基本上，我想拥有一些像Visual Studio plus Resharper这样的现代化IDE，但是作为一个可以embedded到Grunt中的命令行工具。

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

它本质上是https://npmjs.org/package/js-beautify包装成一个Grunt任务&#x3002;

编辑，扩展我的原始答案：我不熟悉VS Resharper的function，但根据自述至less – 有一个选项，使JSLint高兴（我们都知道是多么挑剔，可以） 。

谷歌closureslint有一个固定的lint函数，它为您的代码和您的代码，并获得与谷歌风格指南内联。 https://developers.google.com/closure/utilities/docs/linter_howto

我使用Eclipse，因为我写了Java，JavaScript，Perl（EPIC插件），shell脚本等等。 Eclipse将使用CTRL-SHIFT-F快捷方式轻松编写任何这些语言的格式。 这在IDE中适用于我。

对于命令行 ，你可以调用eclipse的格式化工具。 看到：

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

尽pipe如此，除非您或团队中的人员已经在使用Eclipse，否则可能会比您所寻找的开销更大。 但！ Eclipse的代码格式是高度可configuration的，并且会处理一些空白/空行问题。

Interesting Posts