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

आप जिस मुद्दे के बारे में बात कर रहे हैं वह यह एक इंडेंट है:

    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 डिफ़ॉल्ट रूप से क्रॉकफोर्ड का पालन नहीं करता है, और यदि आप उपरोक्त को jslint के माध्यम से चलाते हैं, तो यह शिकायत करेगा कि .cooker( गलत इंडेंटेशन पर है।

आपके उदाहरण में, मुझे ऐसा लगता है कि beta(zeta); की अनदेखी करना बहुत आसान है।
इसके अलावा, आप कुछ डेज़ी-चेन इंडेंटिंग दिखाते हैं और कुछ नहीं। ब्यूटिफायर को यह तय करने के लिए किस तर्क का उपयोग करना चाहिए कि कौन सा इंडेंट करें और कौन सा नहीं?

मैं इसे खुला छोड़ने जा रहा हूं - आपके द्वारा प्रदान किया गया उदाहरण एंगुलरजेएस-आधारित प्रतीत होता है, इसलिए यह मुहावरा समय के साथ व्यापक स्वीकृति प्राप्त कर सकता है। लेकिन यह ऐसा कुछ नहीं है जिसे हम जल्द ही किसी भी समय शामिल कर पाएंगे।

मुझे बहुत खेद है: मैंने इंडेंटेशन को विफल कर दिया। उनमें से कोई भी इंडेंट नहीं होना चाहिए था। और 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 करना है, वादों के साथ काम करते समय यह विशेष रूप से आसान है।

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

यह श्रृखंला कुछ समय के लिए जारी रह सकती है, विशेष रूप से एक अधिक सम्मिलित एपीआई अंत बिंदु लिखते समय, और जब तक आप नीचे की ओर देख रहे होते हैं, तब तक आप लगातार इस बात से सावधान रहते हैं कि इंडेंटेशन किसी पास की चीज़ के सापेक्ष कैसे समाप्त होता है।

मेरा मानना ​​​​है कि यह महत्वपूर्ण है कि सभी समापन इंडेंटेशन अगले निकटतम से गहराई के अंतर का एक स्तर हो।

:+1:

मेरा मानना ​​​​है कि यह महत्वपूर्ण है कि सभी समापन इंडेंटेशन अगले निकटतम से गहराई के अंतर का एक स्तर हो।

मेरे लिए यह क्लिंचर है जो साबित करता है कि अतिरिक्त इंडेंटेशन भ्रामक है और अंततः एक गलती है। मुझे एहसास है कि कुछ लोग महसूस कर सकते हैं कि कुछ अर्थ है जिसमें

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

ऐसा लगता है कि then() का किसी अर्थ में Promise.resolve() के साथ माता-पिता-बच्चे का संबंध है, लेकिन अगर यह सच है, तो प्रत्येक बाद के then() के साथ वह संबंध है पिछला then() । बेशक वहाँ वास्तव में _no_ ऐसे माता-पिता-बाल संबंध हैं, और इंडेंटिंग जैसे कि सभी तरह से नीचे थे, एक बड़ी गड़बड़ी होगी, इसलिए कोई भी ऐसा नहीं करता है। लेकिन पहले then() को इंडेंट करने से सिर्फ एक विशाल के बजाय एक _small_ गड़बड़ हो जाती है - यह सिर्फ इतना है कि कुछ लोग उस छोटी सी गड़बड़ी को दूर करने के लिए तैयार हैं, जबकि हम में से कुछ हमारे कोड में _any_ गड़बड़ नहीं करना पसंद करते हैं यदि हम इसकी मदद कर सकते हैं।

इंडेंटेशन द्वारा प्रदान किए जाने वाले दृश्य संकेत होना अच्छा हो सकता है, लेकिन इस मामले में यह इंडेंटेशन के अर्थ को ओवरलोड कर रहा है - न केवल एक नए दायरे का संकेत दे रहा है, बल्कि एक जंजीर विधि का भी संकेत दे रहा है। हालांकि हमारे पास पहले से ही . एक जंजीर विधि को इंगित करने के लिए है, और क्योंकि . लाइन पर पाठ की शुरुआत में है, यह वास्तव में आवश्यक सभी (छद्म-) इंडेंटेशन प्रदान करता है जब तक आप इस पर ध्यान दे रहे हैं।

तो यह _really_ _just _ व्यक्तिगत वरीयता का मामला नहीं है - यह दोनों दृष्टिकोणों के लाभ और कमियों का मामला है। (निजी वरीयता _is_ निश्चित रूप से शामिल है, क्योंकि कुछ कुछ कमियों या कुछ लाभों के बारे में परवाह नहीं कर सकते हैं, लेकिन चर्चा अधिक उपयोगी हो सकती है यदि हम केवल "मैं _x_ पसंद करता हूं" या "मैं पसंद करता हूं" कहने के बजाय उन लाभों और कमियों पर चर्चा करें। पसंद _y_"।)

मुझे लगता है कि मामला मजबूत है कि अतिरिक्त इंडेंटेशन की कमियां महत्वपूर्ण हैं, जबकि लाभ दूसरे तरीके से हो सकते हैं।

जंजीर विधियों के लिए अतिरिक्त इंडेंटेशन की कमियां:

• आपका इंडेंटेशन अब दायरे का विश्वसनीय संकेतक नहीं है
• आपका समापन विराम चिह्न आपको यह सोचने पर मजबूर कर सकता है कि आपने गलती की है

लाभ:

• आपको केवल . की तुलना में विधि श्रृंखला का एक बड़ा दृश्य संकेत मिलता है (लेकिन आप _do_ उस संकेत को केवल . के साथ प्राप्त करते हैं)

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

लेकिन अगर यह सब एक लाइन पर फिट हो सकता है तो डबल इंडेंटेशन नहीं होना चाहिए।

(जैसा कि यह खड़ा है, उपरोक्त पंक्तिबद्ध/अपेक्षित होगा :)

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

मैंने इसे एक एन्हांसमेंट के रूप में चिह्नित किया है।
मैं इसके खिलाफ बहस नहीं कर रहा हूं कि यह एक अच्छा विचार है, मेरे पास अभी समय नहीं है।

आप सभी "+1" - और जिन्होंने टिप्पणी की है, एक पुल अनुरोध में योगदान करने के लिए स्वतंत्र महसूस करें।

+1 चाहते हैं

मैंने इसके लिए एक जनसंपर्क खोला है

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

यदि निरंतर एकीकरण अंततः पीआर स्थिति को अद्यतन करेगा, तो इसे विलय के लिए तैयार होना चाहिए।

+1 यह नरक के रूप में उबाऊ है