Js-beautify: خيار للاحتفاظ بـ "كائنات قصيرة" أو مضمنة في سطر واحد

تم إنشاؤها على ١٤ أغسطس ٢٠١٣  ·  109تعليقات  ·  مصدر: beautify-web/js-beautify

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

تم العثور على تفاصيل إضافية هنا: https://github.com/einars/js-beautify/pull/55

enhancement

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

بالنسبة للأشخاص مثلي الذين يأتون إلى هنا بحثًا عن طريقة لجعلها تعمل: إنها تعمل ويمكن تمكينها من خلال الخيارات الموجودة في .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

ال 109 كومينتر

+1 ... يمكن أن يبقى كائن خاص واحد على الأقل في سطر واحد حتى لا يتغير c1[key] = { $exists: true }; إلى

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

+1

طلب شعبي. :ابتسامة:

تم إجراء طلب السحب القديم لهذا قبل تغليف الخط. يجب أن يكون التفاف الخط أسهل.

نحن نكتشف عندما نكون داخل إعلان كائن ، لذلك هذا ليس سيئًا ، لكننا نكتشفه متأخرًا (انظر # 200) ، لذلك قد يتضمن بعض التتبع الخلفي لإصلاح كائن موسع.

أنا مع كل هذا ولكن لدي سؤال. ماذا لو كان الكائن الحرفي له خاصية واحدة بالضبط هي في حد ذاتها كائن حرفي بخاصية واحدة بالضبط؟ هذا يمكن أن يتكرر عدة مرات. في المثال الذي لدي أدناه ، أفضل في الواقع تنسيق الكود في سطر واحد. قد يختلف الآخرون لكني أعتقد أنه جانب مهم يجب مراعاته في هذا الأمر.

يمكن أن يؤخذ هذا إلى أقصى الحدود حيث يجب تغليف الكود نظرًا لطول السطر ولكن لدي حالات في الكود الخاص بي حيث:

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

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

@ TheLudd أنا أتفق تمامًا وكنت سأقترح هذا بنفسي. ربما خيار عمق كذلك. هناك حد لمدى إمكانية قراءته بعد عمق بعض المستويات. أود أن أقول إن ما لديك سيكون الحد الأقصى الافتراضي.

mokkabonna فكرة جيدة عن خيار العمق. هذا يزيل بعض الغموض حول كيفية تنسيق كود مثل هذا. إذا كان ذلك ممكنًا ...

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

+1

أنا أفضل فكرة الطول. إذا كان كل شيء مناسبًا لعرض النافذة ، فاتركه.

دعم قوي لهذا. تمت الإضافة إلى الإصدار 1.5.0.

: clap :: clap :: clap :: clap: تصفيق

هل سيحتفظ أيضًا بعبارات سطر واحد مثل هذا؟

if(someCondition) { return something; }

هذا هو قرار المواصفات / التنفيذ. يبدو أنه من الممكن ، ولكن قد لا يكون من الجيد ضمهم معًا.

متفق. لست متأكدًا من الطريقة التي تريد تتبعها بها ، فربما يكون هناك مشكلة أخرى "الاحتفاظ بالتعبيرات / العبارات القصيرة في سطر واحد"؟

بالتأكيد ، ولاحظ أنه مرتبط بهذه المشكلة.

لمعلوماتك ، هذا في الأساس إصدار آخر # 114. واحدة من أقدم القضايا المفتوحة.

أي تحديثات على هذا؟ يعد js-beautify أحد أفضل التنسيقات المتوفرة باستثناء هذه المشكلة المتبقية.

أعتقد أن هذا هو السبب الوحيد الذي يجعلني لا أدير تجميل js عند الحفظ.

+1

بقدر ما أريد القيام بذلك في 1.5.0 ، سأضطر إلى دفعه إلى 1.5.2.

هناك عدد كبير من التغييرات بالفعل في 1.5.0 ، وهذه ميزة مهمة ستتطلب بعض التكرار والتغذية المرتدة لتهبط بشكل نظيف.

إنه بالتأكيد أعلى أولوية التحسين لـ 1.5.2.

: +1: أرى أنه تم إصدار 1.5.1 بالأمس. هل هذا جعلها في؟ إذا كان الأمر كذلك ، فما هو الخيار؟

تحديث تعليقي أعلاه.

حسنا، شكرا. سوف نبحث عنه في الإصدار القادم بعد ذلك.

: +1:

+1

مرحبًا ، لقد اكتشفت للتو jsbeautify وقمت بإعداده باستخدام Sublime Text 3. إنه الصخور !! وأنا أيضًا واجهت هذا وبحثت في الويب ووجدت هذه المناقشة. سعيد لسماع أنه سيأتي في 1.5.2.

لقد مر ما يقرب من 5 أشهر حتى الآن منذ آخر تعليق حول 1.5.2 ... ما هو ETA؟ أتمنى أن يكون var obj = {one: property} يبقى على سطر واحد :) :)

الوقت المقدر للوصول هو عندما يفعلها شخص ما. من المحتمل أن يكون هذا أنا ، في وقت ما في الشهر المقبل.

مدهش!!! جيد المعرفه

في 17 سبتمبر 2014 ، في الساعة 11:49 مساءً ، كتب ليام نيومان [email protected] :

الوقت المقدر للوصول هو عندما يفعلها شخص ما. من المحتمل أن يكون هذا أنا ، في وقت ما في الشهر المقبل.

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub.

سأضطر لدفع هذا إلى v1.6.0.

لقد قمت بعمل كبير (كما هو مذكور في # 530) نحو تمكين هذه الميزة. ولكن بصراحة لا يزال هناك تعهد كبير لجعله في هذا الإصدار.

رائع...

مجرد قراءة بعض مواصفات البرنامج النصي ECMA وفتح الأخطاء في جيثب الخاص بك هذا
تبدو ضخمة!

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

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

إذا فعلت ذلك ، لسبب ما ، فلن يستغرق الأمر سوى بضع ثوانٍ إضافية يدويًا
استعادة ifs المفككة ذات السطر الواحد أو العناصر الحرفية للكائن مرة أخرى إلى سطر واحد. (لا أنا
ليس لديك regex find + replace for هؤلاء ، lol)

في يوم الأحد ، 28 سبتمبر 2014 ، كتب ليام نيومان [email protected] :

سأضطر لدفع هذا إلى 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'}")));

تضمين التغريدة
قد لا تكون هذه المشكلة قابلة للحل بالنسبة لمقدار عشوائي من التداخل (على سبيل المثال ، كمية كبيرة من التداخل) نظرًا لأن اللغة المقابلة لهذا التداخل غير منتظمة ولكن ربما يمكنك افتراض حد لأغراض عملية (على سبيل المثال ، في المستوى 10 على الأكثر تداخل أو باستخدام حجم الملف لتحديد حد تداخل معقول)

+1 لهذا الطلب.

إنها طريقة مطولة للغاية لتقسيم هذا على سبيل المثال

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

إلى خطوط متعددة.

+1

هل هناك أي ETA جديد؟

: +1:

نحن بحاجة إلى هذا!!

: +1:

: +1:

: +1:

+1

بينما لم يتم تنفيذ هذه الميزة ، أستخدم regex في البرنامج النصي الخاص بي في مكان ما هنا مثل pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
قد يكون من المفيد شخص ما.

@ لا يمكن لـ aves84 تشغيله .. لكنك جعلتني ألقي نظرة على الكود المصدري بدلاً من مجرد الانتظار الآن ، لذا شكرًا جزيلاً لك: D

schoening كتب ربما أنا محيرًا ، يجب إضافة السطر بعد "تجميل" ، وليس بدلاً من. الآن حاولت تغيير هذا البرنامج النصي المحدد:

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 ، ناه الذي فهمته ، كان منطقيًا. أنا على Linux Mint وأتصفح هذا المجلد / أغير هذا الملف:
/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 / extension / user / hirse.beautify / main.js
أو يمكنك محاولة تحرير https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 على سبيل المثال.

أعتقد أن سامية تستخدم نسخة بيثون.

mokkabonna - هذا يعتمد. تلتف بعض الإضافات الرائعة باستدعاءات node.js ، بينما تستخدم أخرى بايثون مباشرة.

: +1: plusoneplusone

+1. هل يوجد مثل هذا الخيار الآن؟

: +1: أتطلع إليه ، شكرًا.

: +1:

FrankFang تم إرجاعه إلى 1.6.0 والذي لم يهبط بعد
@ aves84 تكسر خدعتك / تصغير الدالات / من أجل الحلقات / عبارات 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 ، فسيتم إزالة فواصل الأسطر. حتى أنه سيتسبب في حدوث أخطاء في التعليمات البرمجية التي تستخدم الإدراج التلقائي للفاصلة المنقوطة في جافا سكريبت.

: +1:

: +1: أتطلع لذلك.

+1 ... أرغب في رؤية هذا ينجح قريبًا.

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

+1

+1

+1 على هذا ، يمنعني من استخدام هذا. حتى خيار تعطيل هذا فقط من شأنه أن يساعد!

+1 +1 +1

+1

1+ وشكرًا على عملك الشاق في هذا الأمر!

+1 في الوقت الحالي ، يؤدي التجميل حرفياً إلى مضاعفة شفري إلى فوضى قبيحة رهيبة بسبب هذه المشكلة. إنه خطأ معوق في بعض الظروف. خاصة وأنني أستخدم js-beautify باعتباره psedo-linter (إذا لم تكن المسافات البادئة صحيحة ، فقد فاتني قوس في مكان ما.) تحول ذاكرتي العضلية اختبارات الوحدة الجميلة الخاصة بي إلى مهمة مدتها 10 دقائق لإصلاح كل العناصر الحرفية للكائنات.

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

سيؤدي هذا السطر من التعليمات البرمجية إلى طي الأشياء غير المطوية التي يتراوح طولها بين 30 و 180 حرفًا بدون كتل مضمنة. ربما يمكن أن يكون مفيدًا لبعض الأشخاص.

1+ وشكرًا على عملك الشاق في هذا الأمر!

+1. ثلاثة أسطر بدلاً من واحد كثير جدًا.

آمل أن يتم ذلك. : +1:

إنه السلوك الوحيد لـ js-beautify الذي يجعلني مستاءً. : sweat_smile:

vekat - كما ترى ، لست وحدك. :ابتسامة:

@ nels-o - شيء مختلف تمامًا ، آسف. تم تحليل أقواس القالب مثل {{ و }} بشكل مختلف تمامًا عن أقواس جافا سكريبت. بالإضافة إلى ذلك ، عند تضمين العناصر ، فإنها ستبدو مثل { a: { b: {} } } } .

(بتات نموذج WRT مثل {{}} و {{!}}) هل هي كذلك؟ إذا كانت في علامات البرنامج النصي ، يبدو أنها منسقة. على سبيل المثال هذا:

image

يصبح هذا بعد تشغيل برنامج تجميل.

image

آه :) شكرا bitwiseman

ربما كان ما كان يجب أن أقوله هو ، إذا كان يجب التعامل معهم ، فسيتم التعامل معهم بشكل منفصل تمامًا. : ابتسم: ما زلت ، آسف.

+1. أي فكرة عن ETA؟ هذا يجعلني حزينا جدا :(

+1. سوف أحب هذه الميزة أيضا! لسوء الحظ ، ليس لدي الوقت في الواقع للمساعدة بطريقة ما :(

+1 ، ما زلنا ننتظر بصبر. ستكون هذه إضافة رائعة

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

إذا كان هذا يعمل كما فهمت ، أعتقد أن هذا بالفعل تحسن كبير للوضع الحالي. في معظم الحالات ، هذا كافٍ.

+1

+1 نأمل أن يتم ذلك قريبًا

NerdPad - تم _is_.

هل يمكننا استخدامه مع الأقواس؟ o_O

@ C-Weinstein - ربما يمكنك فتح إصدار جديد بمثال على المدخلات والمخرجات المرغوبة؟

بالنسبة للأشخاص مثلي الذين يأتون إلى هنا بحثًا عن طريقة لجعلها تعمل: إنها تعمل ويمكن تمكينها من خلال الخيارات الموجودة في .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

لسوء الحظ ، لم ينجح ذلك: (لكن شكرًا على المحاولة.

Ceyaje - كيف لم تنجح؟ أين لم تنجح؟ ماذا كانت مدخلاتك ومخرجاتك؟

كان الإدخال

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

انها "تجمل" ل

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

Ceyaje ، أنت بحاجة إلى ضبط الخيار "brace-style" على "collapse -keeping-inline"

@ aves84 - شكرا! استمرار المناقشة في # 995.

@ aves84 فعلت ذلك. كنت أقول إن ذلك لا يزال يحدث ، لذلك فتحت رقم 995 لكنني أستخدم Brackets ولم أكن أدرك أنه كان رمزًا مختلفًا

Kutsan - الرجاء فتح عدد جديد.

لم أتمكن من العثور على خيار التوسيع والمحافظة على السطر مع ملف html في atom. أكتب جافا سكريبت في كل من ملف html وملف js.

ضع "keep-inline" بعد الإعداد الذي تريد استخدامه (طي ، توسيع ، إلخ.)

"brace_style": "تصغير ، تحفظ مضمنة"

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

يحدث ما ورد أعلاه ، لكن أسلوب الدعامة الخاص بي هو الانهيار - المحافظة - المضمنة. قرأت الموضوع بالكامل ، ولا أعتقد أنني أفعل أي شيء بشكل غير صحيح. بالفعل إعادة تشغيل Atom ، فقط في حالة ، لا شيء.

أي تحديث على هذا؟ لا يزال الطي - التحفظ - المضمن يوسع وظيفة السهم على عدة أسطر.

grandslammer - يُرجى إلقاء نظرة على المشكلات المفتوحة التي تتضمن كلمة "سهم". إذا كنت لا ترى مشكلة تغطي ما تتحدث عنه ، فيرجى فتح عدد جديد.

عذرًا: الموضوع الأصلي هو "خيار الاحتفاظ بـ" كائنات قصيرة "أو مضمنة في سطر واحد # 315؟
لقد انحرفت هذه المناقشة كثيرًا ، فهل يمكن لأي شخص أن يشير إلى الإعدادات الصحيحة لأحدث إصدار من js-beautify لتحقيق التنسيق المطلوب؟ ثانكس

ainthek إنه "brace_style": "collapse,preserve-inline"

ماذا عن الإعدادات في أحدث إصدار من التعليمات البرمجية لإصلاح هذه المشكلة؟

في مقابل الكود 1.20.1 ، لا يمكنني الحصول على النمط "brace_style": "توسيع ، الحفاظ على السطر" ، للعمل.

مدخل :

مقدار ثابت
 {
 الحوار
 } = تتطلب ("إلكترون").

الإخراج (بعد تحديد هذه المنطقة والنقر فوق F1 ---> تجميل التحديد): لا تغيير :(

الناتج المتوقع: const {dialog} = require("electron").remote;

ملاحظة ----> تم الحصول على الإدخال المشوه بعد تجميل الملف بالكامل. لا أحد يكتب التعليمات البرمجية بهذه الطريقة المشوهة: P.

بالنسبة لـ vscode ، عملت إضافة ما يلي في إعدادات المستخدم بالنسبة لي:
"beautify.config": {"brace_style": "collapse، save-inline"}

شكرا لكم على الدعم يا رفاق.

sulkhanp - الرجاء تقديم مشكلة تصف السلوك.

يعمل حل vipingoel !
لماذا لا يعمل هذا الخيار إلا في تفضيلات مستخدم vscode ، وليس في ملف .jsbeautifyrc الخاص بي؟

"brace_style": "توسيع ، الحفاظ على السطر" لا يعمل.

توقع السلوك:

  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 إنه يعمل. أنا سعيد حقا. شكرا!!!

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