Js-beautify: 「短いオブジェクト」を1行に保存またはインライン化するオプション

+1 ...少なくとも1つのプロパティオブジェクトが1行にとどまる可能性があるため、 c1[key] = { $exists: true };は次のように変更されません。

                c1[key] = {
                    $exists: true
                };

+1

人気のリクエスト。 ：笑顔：

これに対する古いプルリクエストは、行の折り返しが行われる前に行われました。 行を折り返すと、簡単になります。

オブジェクト宣言内にいることを検出するので、それは悪いことではありませんが、検出が遅くなるため（＃200を参照）、拡張されたオブジェクトを修正するためのバックトラッキングが必要になる場合があります。

私はこれですべてですが、質問があります。 オブジェクトリテラルに1つのプロパティがあり、それ自体が1つのプロパティを持つオブジェクトリテラルである場合はどうなりますか？ これは数回繰り返すことができます。 以下の例では、実際にはコードを1行でフォーマットすることをお勧めします。 他の人は同意しないかもしれませんが、これを考慮することは重要な側面だと思います。

これは、行の長さのためにコードをラップする必要がある極端な場合がありますが、コードには次のような場合があります。

//I prefer this...
{ foo : { bar : { baz : 42 } } }

//... over this.
{
    foo : {
        bar : {
            baz : 42
        }
    }
}

@TheLudd私は完全に同意し、これを自分で提案するつもりでした。 おそらく深度オプションも。 いくつかのレベルの深さの後でそれがどれだけ読みやすいかには限界があります。 私はあなたが持っているものが最大のデフォルトになると言うでしょう。

@mokkabonna深度オプションについての良いアイデア。 これにより、このようなコードのフォーマット方法のあいまいさが解消されます。 それが実行可能であれば...

深さでない場合は、長さで制限することもできます... 80文字の後に折り返すと言います。 深さほどエレガントではありませんが、すばやく実行できるものは何でも。

+1

私は長さのアイデアが好きです。 すべてがウィンドウの幅に収まる場合は、それを許可します。

これに対する強力なサポート。 v1.5.0に追加されました。

：拍手::拍手::拍手::拍手：

このような1行のステートメントも保持しますか？

if(someCondition) { return something; }

それは仕様/実装の決定です。 可能だと思われますが、それらを一緒に結合するのは良い考えではないかもしれません。

同意しました。 ただし、どのように追跡したいかわからない場合は、「短い式/ステートメントを1行に保存する」という別の問題がありますか？

確かに、それはこの問題に関連していることに注意してください。

終わり。 https://github.com/einars/js-beautify/issues/338

参考までに、これは基本的に別のバージョン＃114です。 最も古い未解決の問題の1つ。

これに関する更新はありますか？ js-beautifyは、この残りの問題を除いて、世の中で最高のフォーマッターの1つです。

これが、保存時にjsbeautifierを実行していない唯一の理由だと思います。

+1

1.5.0でこれを実行したいのと同じくらい、1.5.2にパントする必要があります。

1.5.0にはすでに多数の変更があり、これは重要な機能であり、クリーンに着陸するためにいくつかの反復とフィードバックが必要になります。

これは確かに1.5.2の最優先の拡張機能です。

：+1：昨日1.5.1がリリースされたようです。 これでうまくいきましたか？ もしそうなら、オプションは何ですか？

上記の私のコメントを更新しました。

よろしくお願いします。 次のリリースでそれを探します。

：+1：

+1

ねえ、私はjsbeautifyについて知り、Sublime Text3でセットアップしました。 そして私もこれに出くわしてウェブを検索し、この議論を見つけました。 1.5.2で登場すると聞いてうれしいです。

1.5.2についての最後のコメントからほぼ5か月が経ちました... ETAとは何ですか？ var obj = {one：property}を1行に留めておきたい:) :)

ETAは誰かがそれをするときです。 それはおそらく私であり、来月のいつかです。

素晴らしい！！！ 知っておくといい

2014年9月17日午後11時49分、 LiamNewmannotifications @ github.comは次のように書いています。

ETAは誰かがそれをするときです。 それはおそらく私であり、来月のいつかです。

—
このメールに直接返信するか、GitHubで表示してください。

これをv1.6.0にプッシュする必要があります。

私はこの機能を有効にするために（＃530に記載されているように）重要な作業を行いました。 しかし、率直に言って、このリリースにするのはまだ大きな仕事です。

わお...

ECMAスクリプトの仕様をいくつか読んで、GitHubのバグを開いてください。
巨大なようです！

幸いなことに、私のユースケースでは、ファイルごとに1回だけJSを美化する必要があります。

自動正規表現の検索と置換のパターンの2番目のセットを作成しました
ファイルを保存するときに実行します。通常、beautifyを再度実行する必要はありません。
そのファイル。

なんらかの理由で、手動で行うのはほんの数秒です。
分割された1行のifまたはオブジェクトリテラルを1行に復元します。 （いいえ私は
正規表現の検索と置換はありません、笑）

2014年9月28日日曜日、 LiamNewmannotifications @ github.comは次のように書いています。

これをv1.6.0にプッシュする必要があります。

私は重要な仕事をしました（＃530に記載されているように）
https://github.com/beautify-web/js-beautify/pull/530）有効化に向けて
この機能。 しかし、率直に言って、それを実現することはまだ大きな仕事です
このリリース。

—
このメールに直接返信するか、GitHubで表示してください
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
。

：+1：この機能にとても興奮しています:)

+1利用可能になりたいです！

+ 1-どこでも保存を美化できるようにこれが必要

+1

：+1：

+ 1-このため、事前保存では使用しません

：+1：

また、Escodegenはこれを正しく実行します。そのコードは、インスピレーションの源である可能性があります。

var esprima = require("esprima"),
    esgen = require("escodegen").generate;

console.log(esgen(esprima.parse("var a = {code: 'code'}")));
console.log(esgen(esprima.parse("var a = {code: 'code', more: 'code'}")));

@bitwiseman
このネスティングに対応する言語は不規則であるため、この問題は任意の量のネスティング（たとえば、非常に大量のネスティング）では解決できない場合がありますが、実用的な目的（たとえば、最大レベル10のネスティングまたはファイルサイズを使用して適切なネスト制限を決定する）

このリクエストには+1。

たとえば、これを分割するには冗長すぎる方法です

view.on('post', {action: 'removeTask'}, function(next) {

複数行に。

+1

新しいETAはありますか？

：+1：

これが必要です!!

：+1：

：+1：

：+1：

+1

この機能は実装されていませんが、 pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })のように、ここのどこかで自分の実行スクリプトで正規表現を使用しています。
誰か役に立つかもしれません。

@ aves84はそれを動作させることができません..しかし、あなたは私に今待っているのではなく、ソースコードを見てもらいましたので、どうもありがとうございました：D

@schoeningおそらく私は混乱していると書いていますが、行は「beautify」の代わりではなく、「beautify」の後に追加する必要があります。 今、私はこの特定のスクリプトを変更しようとしました：

var pretty = beautify[fileType](code, config);
if (fileType == 'js') pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) {
            return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s
        });

そしてそれはきちんと働きます。

@ aves84 、いや、私は理解しました、それは理にかなっています。 私はLinuxMintを使用していて、このフォルダーを参照しています/このファイルを変更しています：
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify / scripts / node_modules / js-beautify / js / lib / cli.js

この機能の変更：

function makePretty( code, config, outfile, callback ) {
  try {
    var fileType = getOutputType( outfile, config.type );
    var pretty = beautify[ fileType ]( code, config );
    if ( fileType == 'js' ) pretty = pretty.replace( /{([^{}]*?)}/g, function ( s, p ) {
      return ( s.length < 100 && !/;/.test( p ) ) ? s.replace( /\n\s*/g, ' ' ) : s
    } );

    callback( null, pretty, outfile, config );
  } catch ( ex ) {
    callback( ex );
  }

}

そして、このようなことを試してみると、オブジェクトが分割されます。

var foo = {
  bar: "Hello world!"
};

質問している仲間全員に申し訳ありません。

@schoeningは、ほとんどの場合、拡張機能がcli.jsを使用せず、 require('js-beautify')の独自のファイルに置き換えます。 ブラケットで、〜/ .config / Brackets / extends / user / hirse.beautify /main.jsに変更を加えました
または、たとえばhttps://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369を編集してみてください。

sublimeはpythonバージョンを使用していると思います。

@ mokkabonna-状況によって異なります。 一部の崇高なプラグインはnode.js呼び出しをラップし、その他はpythonを直接使用します。

：+1：plusoneplusone

+1。 今のところそのようなオプションはありますか？

：+1：楽しみにしています、ありがとう。

：+1：

@FrankFangまだ着陸していない1.6.0にプッシュバックされました
@ aves84あなたのトリックは時々関数を壊す/折りたたむ/ for-of-loops / ifステートメント

for (var data of columnData) { ctx.drawImage(data.img, data.options.x, data.options.y) }

img.onerror = function() { reject() }

if (index >= rows.length) { return }

@ dani-hええと、この方法は理想からはほど遠いです。短いオブジェクトとコードブロックの定義でセミコロンに依存しています。セミコロンがなく、文字数が100未満の場合、改行は削除されます。 また、JavaScriptの自動セミコロン挿入を使用するコードでエラーが発生することもあります。

：+1：

：+1：それを楽しみにしています。

+1 ...これがすぐに実現するのを見たいです。

現時点でこのプラグインを使用できない唯一の理由です。

+1

+1

これに+1すると、これを使用できなくなります。 これを無効にするオプションでも役立ちます！

+1 +1 +1

+1

+1とこれにあなたのすべてのハードワークに感謝します！

+1現在、この問題のために、美化することでコードが文字通り2倍になり、ひどい醜い混乱に陥ります。 状況によっては、これは非常に重大なバグです。 特に私はjs-beautifyを疑似リンターとして使用しているので（インデントが正しくない場合、どこかでブラケットを見逃しました）、私の筋肉の記憶は私の美しいユニットテストをすべてのオブジェクトリテラルを修正する10分のタスクに変えます。

js-beautify -pX <filename> | perl -0777 -i -pe 's/\{\s*([^{}]{30,180}?)\s*\}/\{ $1 \}/mg'

このコード行は、ブロックが埋め込まれていない状態で、展開されたものを30〜180文字の長さで折り返します。 おそらくそれは何人かの人々にとって役に立つかもしれません。

+1とこれにあなたのすべてのハードワークに感謝します！

+1。 1行ではなく3行では多すぎます。

これができることを願っています。 ：+1：

私を不快にさせるのはjs-beautifyの唯一の振る舞いです。 ：sweat_smile：

@ vekat-ご覧のとおり、あなたは一人ではありません。 ：笑顔：

@ nels-o-まったく違うこと、ごめんなさい。 {{や}}のようなテンプレート中括弧は、JavaScriptの中括弧とはまったく異なる方法で解析されます。 それに加えて、オブジェクトをインライン化すると、 { a: { b: {} } } }のようになります。

（{{}}や{{！}}などのWRTテンプレートビット）そうですか？ それらがスクリプトタグにある場合、それらはフォーマットされているようです。 例：これ：

prettifierを実行した後にこれになります。

ああ:)ありがとう@bitwiseman

おそらく私が言うべきだったのは、それらが処理される場合、それらは完全に別々に処理されるということです。 ：smile：それでも、ごめんなさい。

+1。 ETAのアイデアはありますか？ これは私をとても悲しくさせています:(

+1。 その機能も気に入っていただけません！ 残念ながら、私は実際に何とかして助ける時間がありません:(

+1、私たちはまだ辛抱強く待っています。 これは素晴らしい追加になります

私が行った変更は、「短い」オブジェクトを実際には理解していません。入力が提供する、改行のないオブジェクトを保持しようとするだけです。 行の折り返しが発生すると、オブジェクトは「折りたたみ」フォーマットに切り替わります。 したがって、これはまだ不完全な解決策ですが、改善されています。

これが私が理解したように機能する場合、これはすでに現在の状況に大きな改善をもたらしていると思います。 ほとんどの場合、これで十分です。

+1

+1これがすぐに行われることを願っています

@ NerdPad-完了しました。

ブラケットで使用できますか？ o_O

@ C-ワインスタイン-おそらく、入力と目的の出力の例で新しい問題を開くことができますか？

それを機能させる方法を探してここに来る私のような人々のために：それは機能し、.jsbeautifyrcのオプションで有効にすることができます

   "brace_style": "collapse-preserve-inline"

残念ながら、それはうまくいきませんでした:(しかし、試してくれてありがとう。

@ Ceyaje-どうしてうまくいかなかったの？ どこで機能しませんでしたか？ あなたのインプットとアウトプットは何でしたか？

入力は

var q = { x: "a", b: "c" }

それは「美化」します

var q = {
    x: "a",
    b: "c"
}

@Ceyajeオプション「brace-style」を「collapse-preserve-inline」に設定する必要があります

@ aves84-ありがとう！ ＃995で議論を続けます。

@ aves84私はそれをしました。 まだ起こっていると言っていたので、＃995を開きましたが、ブラケットを使用していて、それが別のコードであることに気づいていませんでした。

@ Kutsan-新しい号を開いてください。

アトムにhtmlファイルがあるexpand-preserve-inlineオプションが見つかりませんでした。 私はhtmlファイルとjsファイルの両方でjavascriptを書きます。

使用したい設定（折りたたみ、展開など）の後に「preserve-inline」を配置します

"brace_style"： "collapse、preserve-inline"

https://i.gyazo.com/2831254cc47d08c879c7d36a7f1a30d0.png

上記は起こりますが、私のブレーススタイルはcollapse-preserve-inlineです。 私は完全なスレッドを読みました、私は私が何か間違ったことをしているとは思いません。 念のため、Atomはすでに再起動しています。

これに関する更新はありますか？ Collapse-preserve-inlineは、矢印関数を複数の行に展開します。

@ grandslammer- 「矢印」という単語を含む未解決の問題を見てください。 話している内容をカバーする問題が見つからない場合は、新しい問題を開いてください。

申し訳ありませんが、元のトピックは「「短いオブジェクト」を1行に保存またはインライン化するオプション＃315？
この議論はさまざまな方向に進んでいます。要求されたフォーマットを実現するために、最新バージョンのjs-beautifyの正しい設定を誰かに教えてもらえますか？ ありがとう

@ainthekそれ"brace_style": "collapse,preserve-inline"です

この問題を修正するためのvscode最新バージョンの設定はどうですか？

vs code 1.20.1では、スタイル「brace_style」：「expand、preserve-inline」を機能させることができません。

入力：

const
 {{
 ダイアログ
 } = require（ "electron"）。remote;

出力（この領域を選択してF1 --->選択の美化をクリックした後）：変更なし:(

期待される出力： const {dialog} = require("electron").remote;

PS ---->歪んだ入力は、ファイル全体を美化した後に取得されました。 誰もその歪んだ方法でコードを書くことはありません：P

vscodeの場合、ユーザー設定に以下を追加するとうまくいきました。
"beautify.config"：{"brace_style"： "collapse、preserve-inline"}

サポートしてくれてありがとう。

@ sulkhanp-動作を説明する問題を提出してください。

@vipingoelのソリューションは機能します！
このオプションが.jsbeautifyrcファイルではなく、vscodeユーザー設定でのみ機能するのはなぜですか？

"brace_style"： "expand、preserve-inline"は機能しません。

動作を期待する：

  let $w = $(window),  w = $w.width(),  h = $w.height();
  constructor()
  {
    this.setupData(); this.setupMenus(); this.setupUser(); this.setupUI();
  }

現在の動作：

    let $w = $(window),
      w = $w.width(),
      h = $w.height();

  constructor()
  {
    this.setupData();
    this.setupMenus();
    this.setupUser();
    this.setupUI();
  }

@SiJinminこれらは短いオブジェクトではないため、この問題とは関係ありません。

@vipingoel動作します。 私は本当に幸せだよ。 ありがとう！！！