标签: js-beautify

我已经看到了几个关于如何格式化HTML和javascript代码的问题.一个常见的答案似乎是jsbeautify(以及jsbeautify.js的GitHub页面)是一个很好的解决方案.

但是,我似乎无法正确格式化我的任何代码,我想知道是否有一些需要更改的默认参数,或者我只是误解了美化应该做什么.我期待的是每个嵌套标签都将在新线上缩进到适当的级别.但相反,我所看到的(这似乎不是jsbeautifier独有的)是有时几个标签在同一行上串起来,并且忽略断行的指令.

例1:

我直接从这个问题中得到了这个例子.

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC</div>

当我去jsbeautifer.org并输入上面的代码并点击"Beautify Javascript或HTML"时,它什么也没做!我希望输出看起来像这样:

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC
</div>

这是另一个例子.我选择了"80个字符附近的换行".

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
</script></div></span>

输出结果如下.请注意,没有包装.

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
<
/script></div > < /span>

为什么不<span>,<div> …

js-beautify,从命令行使用(最新版本,在Windows和Linux上)缩进大小写标签,导致大小写缩进.我在github上发布了这个问题:

https://github.com/einars/js-beautify/issues/367

作为回复,有人正确地指出,当你通过网络界面使用它时,它实际上正常工作,这表明它可能是一个配置问题,而不是代码中的实际错误.

有谁知道是什么导致了这一点,以及是否有办法通过配置调整修复它？

我正在尝试使用 ESLint 在项目中强制执行一种编码风格，但我有很多Irregular whitespace not allowed由这样的代码引起的错误：

var a = b ||  10; //note the 2 spaces between || and 10
if (a === 10)  {  // again, 2 spaces between ) and {

我没有找到任何方法可以轻松地为我的所有文件解决这个问题。我认为基本的正则表达式不起作用，因为在某些情况下双空格可能有效（JSON 对象的列缩进、软制表符缩进、字符串）。

我尝试了诸如 js-beautify 之类的工具，但没有找到解决此问题的任何选项。有什么工具可以帮助我吗？

我使用时收到此错误 npm -g install js-beautify

npm ERR! path /home/developer/software/nodejs/lib/node_modules/js-
beautify/js/bin/css-beautify.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod 
'/home/developer/software/nodejs/lib/node_modules/js-
beautify/js/bin/css-beautify.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/developer/.npm/_logs/2017-09-18T07_52_38_910Z-
debug.log

可以做些什么来解决这个问题？

我使用节点8.5.0和npm 5.3.0

Sublime Text 3的JsFormat符合大多数ES6标准,但是,在自动格式化import语句时,它会向对象导入添加一个新行.以下是预格式化的行:

import {func1, func2, func3} from 'some-module';

自动格式化时,它变为:

import {
    func1, func2, func3
}
from 'some-module';

有没有办法禁用这种格式？

我使用atom-beautify来格式化html,但总是将所有属性放在一行中.如何设置atom-beautify以保持属性在不同的行中.

<!--What I want-->
<a class="btn btn-default" 
   ng-click="history.more=!history.more">
   More
</a>

<!--The current format result-->
<a class="btn btn-default" ng-click="history.more=!history.more">
   More
</a>

在VS Code中，我广泛使用Beautify。但是令我不安的是，结束标记始终与“浮动”文本或自动闭合标记位于同一行。例如，在Beautify之前：

<div class="wrap">
    <img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
    <strong>but it needs to be emphasized</strong>! And then some...
</div>

在Beautify之后：

<div class="wrap">
    <img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
    <strong>but it needs to be emphasized</strong>! And then some... </div>

是否有设置或其他扩展名可以帮助使代码更接近第一个示例中的外观？或者我只是做错了什么？

在大多数时候，这并不重要，除了让我感到有点丑陋外，但是昨天我看到它实际上在Wordpress中造成了问题，我只是不能再使用Beautify，否则就有可能破坏格式。

是否有一个选项可以为所有或特定标签（如 i、span 或 img）创建换行符？

给定以下 HTML 输入：

<button><i>span>Copy</span></i></button>
<div><img src="img1.png" alt="" /></div>
<div><img src="img2.png" alt="" /></div>

这是我想要的结果：

<button>
  <i>
    <span>Copy</span>
  </i>
</button>
<div>
  <img src="img1.png" alt="" />
</div>
<div>
  <img src="img2.png" alt="" />
</div>

我已经尝试了 extra_liners 的不同设置：

"extra_liners" : ["img", "i", "span", "button"]

没有取得预期的成功。

我喜欢在 Atom 中自定义 JS-Beautify 以更好地格式化我的刀片文件。

我们的手动样式如下所示：

{{--
  Template Name: Full Width Template
--}}
<!-- template-fullwidth -->

@extends('layouts.app')

@section('content')
  @while(have_posts()) 
    @php the_post() @endphp
    @include('sections.content-page')
  @endwhile
@endsection

JS-Beautify 给了我们这个：

{{-- Template Name: Full Width Template
--}}
<!-- template-fullwidth -->
@extends('layouts.app')
@section('content')
@while(have_posts())
@php the_post()
@endphp
@include('sections.content-page')
@endwhile
@endsection

我试过配置 .jsbeautifyrc 文件，但没有成功。

我想：

1. 保留注释行
2. 在选择指令前添加一个空行 [@extends, @section]
3. @section 指令中的缩进行
4. 缩进@while 和@if 中的项目
5. 将@php 代码和@endphp 放在一行

或者，如果所有这些都失败了，则需要某种可读的、格式良好的代码，而不仅仅是一长串指令。

这能做到吗？

我痴迷于使用 Beautify 来保持我的 CSS 漂亮和干净。

但是，我希望它可以对单属性样式使用单行格式，对多属性样式使用多行格式。

一处房产：

\xe2\x9d\x8c 它给了我什么：

#slidebox {\n        background-color: #000000;\n    }\n

\xe2\x9c\x85 我想要什么：

#slidebox {background-color: #000000;}\n

多个属性：

\xe2\x9c\x85 它给了我什么以及我想要什么：

#slidebox {\n        background-color: #000000;\n        width: 360px;\n        height: 475px;\n        left: 568px;\n    }\n

是否可以在某处调整设置来做到这一点？我已经搜索了很多，但没有找到任何东西。

感谢您的帮助！