Js-beautify: デイジーチェーンインデントはオーバーインデントにつながります

設定とともに、完全な入力と期待される出力を教えてください。 予想されるフラグメント（正直なところ、正しくないように見えます）をクロージングブロックに関連付けるのに問題があります。 ありがとう！

この分野の多くのことと同様に、これはもちろん、客観的な真実ではなく、個人的な好みや習慣の問題です。

処理後、次のように表示される場合があります。

(function () {
    'use strict';

    angular
        .module('module', [])
        .directive('appVersion', ['version',
            function (version) {
                return function (scope, elm, attrs) {
                    elm.text(version);
                };
            }
        ])
        .directive('foo', [

            function () {
                return {};
            }
        ])
        .directive('bar', [

            function () {
                return {};
            }
        ]);
})();

私はこれが欲しい：

(function () {
    'use strict';

    angular
    .module('module', [])
    .directive('appVersion', ['version',
        function (version) {
            return function (scope, elm, attrs) {
                elm.text(version);
            };
        }
    ])
    .directive('foo', [
        function () {
            return {};
        }
    ])
    .directive('bar', [
        function () {
            return {};
        }
    ]);
})();

これは私の構成です：

{
    "indent_level": 0,
    "indent_with_tabs": true,
    "preserve_newlines": true,
    "max_preserve_newlines": 5,
    "jslint_happy": true,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": true,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0,

    // jsbeautify options
    "format_on_save": true,
    "use_original_indentation": true
}

+1

あなたが話している問題は、この1つのインデントです。

    angular
        .module('module', [])

私たちはあなたが見たいものにとても近いので、私たちは素晴らしい感じを感じるのに少し時間がかかります。 過去には、私たちはどこにも近づかなかったでしょう。 ：笑顔：

そこでのインデントは、特定のステートメントの一部である要素を明確に保つことを目的としています。 一般的な場合、インデントは基本的に正しいです。 この特定のケースでは、非常に長いステートメントが1つありますが、＃200ごとに、美化者はそれがその後の重要なステートメントではないことを認識していません。 美化器は完全に構成可能なフォーマッターであることを意図していません-それは一般的なケースに対処することを意図しています

この議論に深みを加えるために、これらの例を見て、フォーマットがどのようになるべきかを教えてください。

alpha
    .cooker(function() {
        some
            .thing()
            .should()
            .happen();
        elsewhere
            .some_other_thing()
            .should()
            .happen();
    })
    .thenclose()
beta(zeta);
omega
    .cage(function() {
        random
            .things()
            .should()
            .happen();
        elsewhere
            .some_other_thing()
            .should()
            .happen();
    })
    .thendie()

私たちはあなたが見たいものにとても近いので、私たちは素晴らしい感じを感じるのに少し時間がかかります。

絶対！ =）

インデントに関しては、例は次のようになります。

alpha
.cooker(function() {
    some
        .thing()
        .should()
        .happen();
    elsewhere
        .some_other_thing()
        .should()
        .happen();
})
.thenclose()
beta(zeta);
omega
.cage(function() {
    random
        .things()
        .should()
        .happen();
    elsewhere
        .some_other_thing()
        .should()
        .happen();
})
.thendie()

ここでの格言は中括弧の場合と同じです。開始と終了は同じインデントである必要があります。 さらに、 Douglas Crockfordのコード規約では、過剰なインデントを回避するための正確な方法でswitchが規定されています。

js-beautifyがデフォルトでcrockfordに従わないことを除いて、jslintを介して上記を実行すると、 .cooker(が間違ったインデントにあると文句を言います。

あなたの例では、 beta(zeta);を見落とすのは簡単すぎるように思えます。
また、いくつかのデイジーチェーンのインデントとそうでないものを示しています。 インデントするロジックとインデントしないロジックを決定するために、ビューティファイアはどのロジックを使用する必要がありますか？

これは開いたままにしておきます。提供する例はAngularJSベースのように見えるため、このイディオムは時間の経過とともに広く受け入れられる可能性があります。 しかし、それは私たちがすぐに組み込むことができるものではありません。

ひどく申し訳ありません。インデントを失敗しました。 それらのどれもインデントされることになっていませんでした。 そして、 beta(zeta);を見落とさないために、次のように空の行を使用します。

alpha
.cooker(function() {
    some
    .thing()
    .should()
    .happen();

    elsewhere
    .some_other_thing()
    .should()
    .happen();
})
.thenclose();

beta(zeta);

omega
.cage(function() {
    random
    .things()
    .should()
    .happen();

    elsewhere
    .some_other_thing()
    .should()
    .happen();
})
.thendie();

最初に言ったように、それは個人的な好みの問題だと思います。 特に単線チェーンの場合、インデントを減らす傾向が少なくなります。 しかし、複数行のケースは非常に悪く、スタイルが混在していると恐ろしいので、常にインデントを少なくするという戦略に固執します。

あなたは＃485を見るかもしれません。 この今後の修正により、ビューティファイアを通過するときに以下は変更されないままになります。

(function () {
    'use strict';

    angular
        .module('module', [])
        .directive('appVersion', ['version', function (version) {
            return function (scope, elm, attrs) {
                elm.text(version);
            };
        }])
        .directive('foo', [function () {
            return {};
        }])
        .directive('bar', [function () {
            return {};
        }]);
})();

それでもあなたが望むものではありませんが、ビューティファイアは関数宣言を改行に強制しなくなります（改行を含める場合はそれを尊重します）。

このリクエストを+1する必要があります。これは、Promisesを操作するときに特に便利です。

Promise.resolve()
.then(function() {
  return foo.bar()
})
.then(function() {
  return foo.baz();
})
.then(function() {
 //...
}) //...
//...

この連鎖はしばらく続く可能性があります。特に、より複雑なAPIエンドポイントを作成する場合は、下部を見るまでに、近くにあるものと比較してインデントがどのように終了するかについて常に気が遠くなります。

すべての閉じインデントが、次に近いものから1レベルの深さの違いであることが重要だと思います。

：+1：

すべての閉じインデントが、次に近いものから1レベルの深さの違いであることが重要だと思います。

私にとって、これは余分なインデントが誤解を招き、最終的には間違いであることを証明するクリンチャーです。 ある意味があると感じる人もいるかもしれません

Promise.resolve()
  .then(function() {
    return foo.bar()
  })

then()はある意味でPromise.resolve()と親子関係にあることを反映しているようですが、それが当てはまる場合は、後続の各then()にもその関係があります。以前のthen() 。 もちろん、そのような親子関係は実際にはありません。完全に下にあるかのようにインデントすると、大混乱になるので、誰もそれをしません。 ただし、最初のthen()をインデントすると、大きな混乱ではなく_小さな混乱が発生します。これは、一部の人々がその小さな混乱に我慢することをいとわないように見える一方で、コードに_any_混乱を含まないことを好む人もいます。私たちはそれを助けることができます。

インデントが提供する視覚的な表示があると便利かもしれませんが、この場合、インデントの意味が過負荷になります。新しいスコープを示すだけでなく、連鎖メソッドも示します。 ただし、連鎖メソッドを示す. .は行のテキストの先頭にあるため、必要なすべての（疑似）インデントを実際に提供します。あなたがそれに注意を払っている限り。

したがって、それは_本当に__ただ_個人的な好みの問題ではありません。それは両方のアプローチの利点と欠点の問題です。 （もちろん、個人的な好みは関係します。一部の人は特定の欠点や特定の利点を気にしないかもしれませんが、単に「私は_x_を好む」または「私は_x_を好む」または「私は_x_を好む」または「私は_y_ "を好む。）

余分なインデントの欠点が重大であるというケースは強いと思いますが、利点は別の方法で得ることができます。

連鎖メソッドの余分なインデントの欠点：

• インデントはスコープの信頼できる指標ではなくなりました
• 句読点を閉じると、間違いを犯したと思われる可能性があります

利点：

• .だけで提供されるよりも、メソッドチェーンの視覚的な表示が大きくなります（ただし、 .だけでその表示を取得できます）。

+1

+1これにより、jslintでExpected exactly one space between '{a}' and '{b}'エラーが発生します。

例：

gulp.task('changelog', function () {
    return gulp.src('CHANGELOG.md', {
            buffer: false
        })
        .pipe(conventionalChangelog({
            preset: 'angular' // Or to any other commit message convention you use.
        }))
        .pipe(gulp.dest('./'));
});

エラー：

4   Expected 'buffer' at column 9, not column 13.    buffer: false
5   Expected '}' at column 5, not column 9.  })

正しい方法（jslintの場合）：

gulp.task('changelog', function () {
    return gulp.src('CHANGELOG.md', {
        buffer: false
    })
        .pipe(conventionalChangelog({
            preset: 'angular' // Or to any other commit message convention you use.
        }))
        .pipe(gulp.dest('./'));
});

主にプロミスチェーンで不要な余分なインデントを回避するために、これをオプションとして使用することを強くお勧めします。

  // fetch `config.json` and then set as constant
  $http.get('config.json').then(function(response) {
    angular.module('myApp').constant('CONFIG', response.data);
  })
  .then(function() {
    angular.bootstrap(document, ['myApp']);
  })
  .catch(function(err) {
    var message = (err && err.data || err && err.message);
    console.error('Unable to bootstrap application.', err);
    window.alert('Unable to bootstrap application.' + (message ? '\n\n' + message : ''));
  });

余分なインデントは次と同等だと思います。

try {
    // 4 spaces
  } // 2
  catch () {
    // 4
  }

インデントのブロックをラップする子トークンが初期変数からの新しい行にあるかどうかは理にかなっています。

    .module('module', function() {
      // .module starts on new line, so this block has 2 indents
    })

対。

  angular.module('module', function() {
    // .module is on the same line as the initial variable angular, so this block has 1 indent
  })

しかし、すべてが1行に収まる場合は、二重インデントは発生しないはずです。

（現状では、上記は次のように表示/予想されます:)

angular.module('module', function() {
    // double indent
  });

これを拡張機能としてマークしました。
私はそれが良い考えであることに反対しているのではなく、ただ時間がないだけです。

すべての「+1」-erとコメントした人は、プルリクエストを自由に投稿してください。

+1したい

このためのPRを開きました

https://github.com/beautify-web/js-beautify/pull/927

継続的インテグレーションによって最終的にPRステータスが更新される場合は、マージの準備ができているはずです。

+1これは地獄のように退屈です