Js-beautify: lekukan rantai daisy menyebabkan lekukan berlebih

Bisakah Anda memberi kami input lengkap dan output yang diharapkan, bersama dengan konfigurasi Anda? Saya mengalami kesulitan menghubungkan fragmen yang Anda harapkan (yang terlihat salah, jujur) dengan blok penutup. Terima kasih!

Seperti banyak hal di bidang ini, ini tentu saja masalah preferensi dan kebiasaan pribadi daripada kebenaran objektif.

Setelah diproses, Anda mungkin melihat sesuatu seperti ini:

(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 {};
            }
        ]);
})();

Saya ingin ini:

(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 {};
        }
    ]);
})();

Ini adalah konfigurasi saya:

{
    "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

Masalah yang Anda bicarakan adalah indentasi yang satu ini:

    angular
        .module('module', [])

Saya akan meluangkan waktu sebentar untuk merasakan sentuhan yang luar biasa bahwa kami begitu dekat dengan apa yang ingin Anda lihat. Di masa lalu, kami tidak akan pernah dekat. :senyum:

Indentasi di sana dimaksudkan untuk menjaga kejelasan elemen apa yang merupakan bagian dari pernyataan tertentu. Dalam kasus umum, indentasi pada dasarnya benar. Dalam kasus khusus ini, Anda memiliki satu pernyataan yang sangat panjang, tetapi per #200 kecantikan tidak tahu bahwa tidak ada pernyataan penting setelah pernyataan itu. Beautifier tidak dimaksudkan untuk menjadi pemformat yang sepenuhnya dapat dikonfigurasi - ini dimaksudkan untuk mengatasi kasus umum

Untuk menambah kedalaman diskusi ini, silakan lihat contoh-contoh ini dan beri tahu saya seperti apa formatnya.

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()

Saya akan meluangkan waktu sebentar untuk merasakan sentuhan yang luar biasa bahwa kami begitu dekat dengan apa yang ingin Anda lihat.

Sangat! =)

Berkenaan dengan lekukan, saya pikir contoh Anda akan terlihat seperti ini:

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()

Pepatah di sini sama dengan tanda kurung kurawal: awal dan akhir harus pada lekukan yang sama. Selain itu, konvensi kode Douglas Crockford meresepkan switch cara yang mereka lakukan dengan tepat untuk menghindari indentasi berlebihan.

Kecuali bahwa js-beautify tidak mengikuti crockford secara default, dan jika Anda menjalankan yang di atas melalui jslint, ia akan mengeluh bahwa .cooker( berada pada lekukan yang salah.

Dalam contoh Anda, menurut saya terlalu mudah untuk beta(zeta); diabaikan.
Juga, Anda menunjukkan beberapa indentasi rantai daisy dan beberapa tidak. Logika apa yang harus digunakan kecantikan untuk memutuskan mana yang indentasi dan mana yang tidak?

Saya akan membiarkan ini terbuka - contoh yang Anda berikan tampaknya berbasis AngularJS, jadi idiom ini dapat memperoleh penerimaan yang lebih luas dari waktu ke waktu. Tapi itu bukan sesuatu yang bisa kami gabungkan dalam waktu dekat.

Saya sangat menyesal: Saya merusak lekukan. Tak satu pun dari mereka seharusnya menjorok. Dan agar beta(zeta); tidak diabaikan, saya akan menggunakan baris kosong, seperti:

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();

Seperti yang saya katakan di awal, saya pikir ini masalah selera pribadi. Dan khusus dengan rantai satu baris saya cenderung untuk mengurangi lekukan. Tapi saya menemukan kasus multi-garis sangat buruk dan memiliki gaya campuran akan mengerikan, jadi saya pasti akan tetap berpegang pada strategi kurang lekukan, selalu.

Anda mungkin melihat #485. Dengan perbaikan yang akan datang ini, berikut ini sekarang akan tetap tidak berubah ketika melewati beautifier:

(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 {};
        }]);
})();

Masih tidak seperti yang Anda inginkan, tetapi beautifier tidak akan lagi memaksa deklarasi fungsi ke baris baru (sambil tetap menghormati baris baru jika Anda memasukkannya).

Saya harus memberi +1 permintaan ini, ini sangat berguna saat bekerja dengan Promises.

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

Rantai ini dapat berlanjut untuk sementara waktu, terutama ketika menulis titik akhir api yang lebih terlibat, dan pada saat Anda melihat bagian bawah, Anda terus-menerus dibuat lengah dengan bagaimana lekukan selesai relatif terhadap sesuatu yang dekat.

Saya percaya penting bahwa semua lekukan penutup menjadi satu tingkat perbedaan kedalaman dari yang terdekat berikutnya.

:+1:

Saya percaya penting bahwa semua lekukan penutup menjadi satu tingkat perbedaan kedalaman dari yang terdekat berikutnya.

Bagi saya ini adalah penentu yang membuktikan bahwa lekukan ekstra menyesatkan dan pada akhirnya merupakan kesalahan. Saya menyadari beberapa mungkin merasa bahwa ada beberapa pengertian di mana

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

tampaknya mencerminkan bahwa then() dalam beberapa hal memiliki hubungan induk-anak dengan Promise.resolve() , tetapi jika itu benar, maka setiap then() berikutnya memiliki hubungan itu dengan sebelumnya then() . Tentu saja benar-benar ada _tidak_ hubungan orangtua-anak seperti itu, dan indentasi seolah-olah ada semua jalan ke bawah akan membuat kekacauan besar, jadi tidak ada yang melakukannya. Tetapi indentasi then() pertama hanya membuat _small_ berantakan daripada yang besar—hanya saja beberapa orang tampaknya bersedia menerima kekacauan kecil itu, sementara beberapa dari kita memilih untuk tidak memiliki _any_ kekacauan dalam kode kita jika kami dapat membantunya.

Mungkin bagus untuk memiliki indikasi visual yang disediakan oleh lekukan, tetapi dalam kasus ini, ini membebani makna lekukan—tidak hanya menunjukkan ruang lingkup baru, tetapi juga menunjukkan metode yang dirantai. Namun kita sudah memiliki . untuk menunjukkan metode berantai, dan karena . berada di awal teks pada baris, itu benar-benar menyediakan semua lekukan (pseudo-) yang diperlukan selama Anda memperhatikannya.

Jadi ini bukan _benar-benar_ _hanya _ masalah preferensi pribadi—ini masalah keuntungan & kerugian dari kedua pendekatan. (Preferensi pribadi _tentu saja terlibat, karena beberapa mungkin tidak peduli dengan kekurangan tertentu atau tentang manfaat tertentu, tetapi diskusi dapat lebih bermanfaat jika kita membahas apa manfaat dan kekurangan _are_, daripada hanya mengatakan "Saya lebih suka _x_" atau "Saya lebih suka _y_".)

Saya pikir kasusnya kuat bahwa kelemahan lekukan ekstra signifikan, sedangkan manfaatnya bisa didapat dengan cara lain.

Kelemahan dari lekukan ekstra untuk metode berantai:

• lekukan Anda tidak lagi menjadi indikator cakupan yang andal
• tanda baca penutup Anda kemungkinan akan membuat Anda berpikir bahwa Anda telah melakukan kesalahan

Manfaat:

• anda mendapatkan indikasi visual yang lebih besar dari metode chaining daripada hanya . dengan sendirinya menyediakan (TAPI Anda _do_ mendapatkan indikasi itu hanya dengan . )

+1

+1 Ini menyebabkan kesalahan Expected exactly one space between '{a}' and '{b}' di jslint.

Contoh:

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('./'));
});

Kesalahan:

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

Cara yang benar (untuk 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('./'));
});

Saya lebih suka memiliki ini sebagai opsi, terutama untuk menghindari lekukan tambahan yang tidak perlu dalam rantai janji:

  // 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 : ''));
  });

Saya pikir lekukan tambahan setara dengan:

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

Masuk akal jika token anak yang membungkus blok lekukan berada di baris baru dari variabel awal:

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

vs.

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

Tetapi jika semuanya bisa muat dalam satu baris maka lekukan ganda seharusnya tidak terjadi.

(Seperti berdiri, di atas akan berserat/diharapkan sebagai :)

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

Saya telah menandai ini sebagai peningkatan.
Saya tidak menentangnya sebagai ide yang bagus, saya hanya tidak punya waktu.

Semua Anda "+1"-ers dan mereka yang telah berkomentar, jangan ragu untuk berkontribusi permintaan tarik.

+1 ingin

Saya sudah membuka PR untuk ini

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

jika integrasi berkelanjutan akhirnya akan memperbarui status PR, itu harus siap untuk digabungkan.

+1 Ini membosankan sekali