Js-beautify: تؤدي المسافة البادئة لسلسلة الأقحوان إلى زيادة المسافة البادئة

تم إنشاؤها على ٢٠ يونيو ٢٠١٤  ·  18تعليقات  ·  مصدر: beautify-web/js-beautify

باستخدام هذا عبر https://github.com/enginespot/js-beautify-sublime

متوقع:

.foo()
.bar();

فعلي:

  .foo()
  .bar();

لتوضيح المشكلة: يمكن أن تؤدي المسافة البادئة الحالية إلى EOFs مثل هذا:

      });
    });
})();

يبدو هذا خطأ بالنسبة لي ، وسيحثني على البحث عن السبب - أو ما هو أسوأ من ذلك ، يجعلني أعمى عن الأسباب الحقيقية = (

enhancement

التعليق الأكثر فائدة

لا بد لي من إجراء 1+ لهذا الطلب ، وهذا مفيد بشكل خاص عند العمل مع Promises.

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

يمكن أن يستمر هذا التسلسل لفترة من الوقت ، خاصةً عند كتابة نقطة نهاية API أكثر تعقيدًا ، وبحلول الوقت الذي تنظر فيه إلى الجزء السفلي ، تتفاجأ باستمرار بكيفية انتهاء المسافة البادئة بالنسبة إلى شيء قريب منك.

أعتقد أنه من المهم أن تكون جميع المسافات البادئة للإغلاق مستوى واحد من فرق العمق من أقرب أقرب.

ال 18 كومينتر

هل يمكن أن تعطينا المدخلات الكاملة والمخرجات المتوقعة ، جنبًا إلى جنب مع التكوين الخاص بك؟ أواجه صعوبة في ربط الجزء المتوقع (الذي يبدو غير صحيح ، بصراحة) بالكتل الختامية. شكرا!

مثل العديد من الأشياء في هذا المجال ، فهذه بالطبع مسألة تفضيل شخصي وعادات وليست حقيقة موضوعية.

بعد المعالجة ، قد ترى شيئًا مثل هذا:

(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

المشكلة التي تتحدث عنها هي هذه المسافة البادئة:

    angular
        .module('module', [])

سأستغرق دقيقة واحدة لأشعر بلمسة رائعة لأننا قريبون جدًا مما تريد رؤيته. في الماضي ، لم نكن لنقترب من أي مكان. :ابتسامة:

المسافة البادئة هناك تهدف إلى الحفاظ على وضوح العناصر التي تشكل جزءًا من بيان معين. في الحالة العامة ، فإن المسافة البادئة صحيحة بشكل أساسي. في هذه الحالة بالذات ، لديك عبارة واحدة طويلة جدًا ، ولكن في # 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()

المبدأ هنا هو نفسه بالنسبة للأقواس المتعرجة: يجب أن تكون البداية والنهاية بنفس المسافة البادئة. بالإضافة إلى ذلك ، تصف اتفاقيات كود دوجلاس كروكفورد 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:

أعتقد أنه من المهم أن تكون جميع المسافات البادئة للإغلاق مستوى واحد من فرق العمق من أقرب أقرب.

بالنسبة لي ، هذه هي النقطة الفاصلة التي تثبت أن المسافة البادئة الإضافية مضللة وفي النهاية خطأ. أدرك أن البعض قد يشعر أن هناك بعض المعنى في ذلك

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

يبدو أنه يعكس أن then() بشكل ما له علاقة بين الوالدين والطفل مع Promise.resolve() ، ولكن إذا كان هذا صحيحًا ، فإن كل then() التالي له علاقة مع السابق then() . بالطبع لا توجد بالفعل علاقة بين الوالدين والطفل ، كما أن المسافة البادئة كما لو كانت هناك فوضى كبيرة ، لذلك لا أحد يفعل ذلك. لكن وضع مسافة بادئة لأول then() يؤدي فقط إلى حدوث فوضى صغيرة بدلاً من فوضى ضخمة - يبدو أن بعض الأشخاص على استعداد لتحمل هذه الفوضى الصغيرة ، بينما يفضل البعض منا عدم وجود _ أي _ فوضى في التعليمات البرمجية الخاصة بنا إذا يمكننا مساعدته.

قد يكون من الجيد الحصول على المؤشر المرئي الذي توفره المسافة البادئة ، ولكن في هذه الحالة يؤدي إلى زيادة التحميل على معنى المسافة البادئة - لا يشير فقط إلى نطاق جديد ، ولكن يشير أيضًا إلى طريقة متسلسلة. ومع ذلك ، لدينا بالفعل . للإشارة إلى طريقة متسلسلة ، ولأن . موجود في بداية النص على السطر ، فإنه يوفر حقًا كل المسافة البادئة (الزائفة) المطلوبة طالما أنك مهتم بها.

لذلك فهي ليست _ حقًا _ _ مجرد _ مسألة تفضيل شخصي — إنها مسألة مزايا وعيوب كلا النهجين. (التفضيل الشخصي _ is_ بالطبع متضمن ، لأن البعض قد لا يهتم ببعض العيوب أو بفوائد معينة ، ولكن المناقشة يمكن أن تكون أكثر فائدة إذا ناقشنا ماهية هذه الفوائد والعيوب _are_ ، بدلاً من مجرد قول "أنا أفضل _x_" أو "أنا تفضل _y_ ".)

أعتقد أن الحالة قوية لأن عيوب المسافة البادئة الإضافية كبيرة ، في حين يمكن الحصول على الفوائد بطريقة أخرى.

عيوب المسافة البادئة الإضافية للطرق المتسلسلة:

  • المسافة البادئة الخاصة بك لم تعد مؤشرًا موثوقًا للنطاق
  • من المحتمل أن تجعلك علامات الترقيم الختامية تعتقد أنك قد ارتكبت خطأ

فوائد:

  • تحصل على مؤشر مرئي أكبر لتسلسل الطريقة أكثر من مجرد . الذي يوفره بنفسه (لكنك _do_ تحصل على هذا المؤشر بـ . فقط)

+1

+1 هذا يؤدي إلى أخطاء Expected exactly one space between '{a}' and '{b}' في 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('./'));
});

الأخطاء:

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

ولكن إذا كان يمكن احتواؤها جميعًا في سطر واحد ، فلا ينبغي أن تحدث المسافة البادئة المزدوجة.

(كما هو الحال ، فإن ما ورد أعلاه سوف يتم فحصه / توقعه على النحو التالي :)

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

لقد حددت هذا كتعزيز.
أنا لا أجادل ضد كونها فكرة جيدة ، ليس لدي الوقت.

لا تتردد في المساهمة في طلب سحب جميع أعضاء "+1" وأولئك الذين علقوا.

+1 تريد

لقد فتحت العلاقات العامة لهذا

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

إذا كان التكامل المستمر سيؤدي في النهاية إلى تحديث حالة العلاقات العامة ، فيجب أن يكون جاهزًا للدمج.

+1 هذا ممل مثل الجحيم

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات