Js-beautify: Opsi untuk mempertahankan atau menyejajarkan "objek pendek" pada satu baris

+1 ... setidaknya satu objek properti dapat tetap berada di satu baris sehingga c1[key] = { $exists: true }; tidak akan berubah menjadi

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

+1

Permintaan populer. :senyum:

Permintaan tarikan lama untuk ini dilakukan sebelum kami memiliki pembungkus garis. Memiliki bungkus garis akan membuatnya lebih mudah.

Kami mendeteksi ketika kami berada di dalam deklarasi objek, jadi itu tidak buruk, tetapi kami mendeteksinya terlambat (lihat #200), jadi mungkin melibatkan beberapa pelacakan kembali untuk memperbaiki objek yang diperluas.

Saya semua untuk ini tetapi saya punya pertanyaan. Bagaimana jika literal objek memiliki tepat satu properti yang dengan sendirinya merupakan objek literal dengan tepat satu properti? Ini bisa diulang beberapa kali. Dalam contoh yang saya miliki di bawah ini, saya sebenarnya lebih suka kode diformat pada satu baris. Orang lain mungkin tidak setuju tetapi saya pikir ini adalah aspek penting untuk dipertimbangkan dalam hal ini.

Ini dapat dianggap ekstrem di mana kode harus dibungkus karena panjang garis tetapi saya memiliki kasus dalam kode saya di mana:

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

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

@TheLudd Saya sangat setuju dan akan menyarankan ini sendiri. Mungkin opsi kedalaman juga. Ada batas seberapa mudah dibaca setelah beberapa level. Saya akan mengatakan apa yang Anda miliki di sana akan menjadi default maksimal.

@mokkabonna Ide bagus tentang opsi kedalaman. Itu menghilangkan beberapa ambiguitas tentang bagaimana kode seperti ini harus diformat. Jika itu bisa dilakukan ...

Jika tidak mendalam, mungkin batasi panjangnya ... katakan itu membungkus setelah 80 karakter. Tidak seanggun kedalaman tetapi apa pun bisa dilakukan dengan cepat.

+1

Saya lebih suka ide panjang. Jika semua bisa muat di lebar jendela, biarkan.

Dukungan kuat untuk ini. Ditambahkan ke v1.5.0.

: tepuk :: tepuk :: tepuk :: tepuk:

Apakah itu juga akan mempertahankan pernyataan satu baris seperti ini?

if(someCondition) { return something; }

Itu adalah sebagai keputusan spesifikasi/implementasi. Tampaknya mungkin, tetapi mungkin bukan ide yang baik untuk menggabungkan mereka bersama.

Sepakat. Tidak yakin bagaimana Anda ingin melacaknya, mungkin masalah lain "Pertahankan ekspresi/pernyataan singkat pada satu baris"?

Tentu, dan perhatikan bahwa ini terkait dengan masalah ini.

Selesai. https://github.com/einars/js-beautify/issues/338

FYI, Ini pada dasarnya adalah versi lain #114 . Salah satu masalah terbuka tertua.

Ada pembaruan tentang ini? js-beautify adalah salah satu pemformat terbaik di luar sana kecuali untuk masalah yang tersisa ini.

Saya pikir ini adalah satu-satunya alasan saya tidak menjalankan js beautifier saat disimpan.

+1

Sebanyak saya ingin melakukan ini di 1.5.0, saya harus menyepaknya ke 1.5.2.

Sudah ada sejumlah besar perubahan di 1.5.0, dan ini adalah fitur signifikan yang akan membutuhkan beberapa iterasi dan umpan balik untuk mendarat dengan bersih.

Ini tentu saja merupakan peningkatan prioritas tertinggi untuk 1.5.2.

:+1: Saya melihat 1.5.1 dirilis kemarin. Apakah ini berhasil masuk? Jika demikian, apa pilihannya?

Diperbarui komentar saya di atas.

Ok terima kasih. Akan mencarinya di rilis berikutnya.

:+1:

+1

Hei, saya baru tahu tentang jsbeautify dan mengaturnya dengan Sublime Text 3. Ini keren!! Dan saya juga menemukan ini dan mencari di web, dan menemukan diskusi ini. Senang mendengar itu datang di 1.5.2.

Sudah hampir 5 bulan sejak komentar terakhir tentang 1.5.2 ... apa ETA? Ingin memiliki var obj = { one: property } tetap pada satu baris :) :)

ETA adalah ketika seseorang melakukannya. Itu mungkin saya, beberapa waktu di bulan depan.

Luar biasa!!! Sangat bagus untuk diketahui

Pada 17 Sep 2014, pukul 23:49, Liam Newman [email protected] menulis:

ETA adalah ketika seseorang melakukannya. Itu mungkin saya, beberapa waktu di bulan depan.

—
Balas email ini secara langsung atau lihat di GitHub.

Saya harus mendorong ini ke v1.6.0.

Saya telah melakukan pekerjaan yang signifikan (seperti yang disebutkan di #530) untuk mengaktifkan fitur ini. tapi terus terang masih terlalu besar usaha untuk membuatnya menjadi rilis ini.

Wow...

Hanya membaca beberapa spesifikasi skrip ECMA dan membuka bug di github Anda ini
tampaknya besar!

Untungnya dalam kasus penggunaan saya, saya biasanya hanya perlu mempercantik JS saya sekali per file.

Saya membuat set kedua regex sederhana, temukan dan ganti pola yang otomatis
jalankan ketika saya menyimpan file saya, dan saya biasanya tidak perlu menjalankan beautify lagi pada
file itu.

Jika saya pernah melakukannya, untuk beberapa alasan, hanya beberapa detik ekstra untuk secara manual
mengembalikan ifs satu baris yang terputus atau literal objek kembali ke satu baris. (No I
tidak memiliki regex find + replace untuk itu, lol)

Pada hari Minggu, 28 September 2014, Liam Newman [email protected] menulis:

Saya harus mendorong ini ke v1.6.0.

Saya telah melakukan pekerjaan yang signifikan (seperti yang disebutkan di #530
https://github.com/beautify-web/js-beautify/pull/530) untuk mengaktifkan
fitur ini. tapi terus terang masih terlalu besar usaha untuk membuatnya menjadi
rilis ini.

—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/beautify-web/js-beautify/issues/315#issuecomment -57132532
.

:+1: Saya sangat senang dengan fitur ini :)

+1 Saya berharap itu bisa tersedia!

+1 - Butuh ini agar kami bisa mempercantik di simpan di mana-mana

+1

:+1:

+1 - juga tidak menggunakan dengan pra-simpan karena ini

:+1:

Juga, Escodegen melakukan ini dengan benar, kodenya mungkin menjadi sumber inspirasi:

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

@bitwiseman
Masalah ini mungkin tidak dapat dipecahkan untuk jumlah sarang yang sewenang-wenang (misalnya, jumlah sarang yang sangat besar) karena bahasa yang sesuai dengan sarang ini tidak teratur tetapi mungkin Anda dapat mengasumsikan batas untuk tujuan praktis (misalnya, paling banyak level-10 bersarang atau menggunakan ukuran file untuk menentukan batas bersarang yang masuk akal)

+1 untuk permintaan ini.

Ini terlalu bertele-tele untuk dipisah misalnya ini

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

ke beberapa baris.

+1

Apakah ada ETA baru?

:+1:

Kami membutuhkan ini!!

:+1:

:+1:

:+1:

+1

Meskipun fitur ini tidak diimplementasikan, saya menggunakan regex di skrip run saya sendiri di suatu tempat di sekitar sini seperti pretty = pretty.replace(/{([^{}]*?)}/g, function(s, p) { return (s.length < 100 && !/;/.test(p)) ? s.replace(/\n\s*/g, ' ') : s })
Mungkin itu akan berguna seseorang.

@aves84 tidak bisa membuatnya bekerja .. Tapi Anda membuat saya melihat kode sumber daripada hanya menunggu sekarang jadi terima kasih banyak :D

@schoening mungkin saya bingung aja, barisnya harus ditambahkan setelah "mempercantik", bukan. Sekarang saya mencoba mengubah skrip khusus ini:

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

Dan itu bekerja dengan benar.

@aves84 , nah yang saya mengerti, itu masuk akal. Saya menggunakan Linux Mint dan saya menjelajahi folder ini/mengubah file ini:
/home/username/.config/sublime-text-3/Packages/HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/cli.js

Mengubah fungsi ini:

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

}

Dan kemudian ketika saya mencoba sesuatu seperti ini masih membuat objek terpecah:

var foo = {
  bar: "Hello world!"
};

Maaf untuk semua pertanyaan sobat.

@schoening kemungkinan besar ekstensi tidak menggunakan cli.js dan menggantinya dengan filenya sendiri dengan require('js-beautify') . Di Brackets saya membuat perubahan pada ~/.config/Brackets/extensions/user/hirse.beautify/main.js
Atau Anda dapat mencoba mengedit https://github.com/beautify-web/js-beautify/blob/master/js/lib/beautify.js#L369 misalnya.

Saya pikir luhur menggunakan versi python.

@mokkabonna - itu tergantung. Beberapa plugin luhur membungkus panggilan node.js, yang lain menggunakan python secara langsung.

:+1: plusoneplusone

+1. Apakah ada opsi seperti itu untuk saat ini?

:+1: ditunggu ya, terima kasih.

:+1:

@FrankFang Itu didorong kembali ke 1.6.0 yang belum mendarat
@aves84 Trik Anda terkadang merusak/menghancurkan fungsi/pernyataan for-of-loop/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 Nah, metode ini jauh dari ideal, itu bergantung pada titik koma dalam definisi objek pendek dan blok kode: jika tidak ada titik koma dan jumlah karakter kurang dari 100, jeda baris dihapus. Bahkan akan menyebabkan kesalahan dalam kode yang menggunakan penyisipan titik koma otomatis javascript.

:+1:

:+1: Menantikan itu.

+1 ... saya ingin melihat ini segera.

itulah satu-satunya alasan mengapa kami tidak dapat menggunakan plugin ini saat ini.

+1

+1

Memberi +1 pada ini, memblokir saya dari menggunakan ini. Bahkan opsi untuk menonaktifkan ini saja akan membantu!

+1 +1 +1

+1

+1 dan terima kasih atas semua kerja keras Anda dalam hal ini!

+1 Saat ini, mempercantik benar-benar menggandakan kode saya menjadi kekacauan jelek yang mengerikan karena masalah ini. Ini adalah bug yang cukup melumpuhkan dalam beberapa keadaan. Terutama karena saya menggunakan js-beautify sebagai psedo-linter (Jika indentasi tidak benar, saya melewatkan tanda kurung di suatu tempat.) Memori otot saya mengubah pengujian unit saya yang indah menjadi tugas 10 menit untuk memperbaiki semua literal objek saya.

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

baris kode ini akan melipat kembali hal-hal yang tidak dilipat antara 30 hingga 180 karakter tanpa blok yang disematkan. mungkin bisa bermanfaat bagi sebagian orang.

+1 dan terima kasih atas semua kerja keras Anda dalam hal ini!

+1. Tiga baris bukannya satu terlalu banyak.

Saya harap ini bisa dilakukan. :+1:

Ini adalah satu-satunya perilaku js-beautify yang membuat saya tidak senang. :keringat_senyum:

@vekat - Seperti yang Anda lihat, Anda tidak sendirian. :senyum:

@nels-o - hal yang sama sekali berbeda, maaf. Kurung kerangka seperti {{ dan }} diurai sama sekali berbeda dari kurung kurawal javascript. Selain itu, saat menyejajarkan objek, mereka akan terlihat seperti { a: { b: {} } } } .

(Bit template WRT seperti {{}} dan {{!}} ) Benarkah? Jika mereka ada di tag skrip, itu sepertinya diformat. Misalnya ini:

menjadi ini setelah menjalankan cantik.

Ah :) Terima kasih @bitwiseman

Mungkin yang seharusnya saya katakan adalah, _jika_ mereka harus ditangani, mereka _akan_ ditangani sepenuhnya secara terpisah. :senyum: Tetap saja, maaf.

+1. Ada ide tentang ETA? Ini membuatku sangat sedih :(

+1. Akan menyukai fitur itu juga! Sayangnya saya tidak punya waktu untuk membantu entah bagaimana :(

+1, kita semua masih sabar menunggu. Ini akan menjadi tambahan yang luar biasa

Perubahan yang saya buat tidak benar-benar memahami objek "pendek" - itu hanya mencoba untuk mempertahankan objek yang disediakan input yang tidak memiliki baris baru di dalamnya. Setelah pembungkusan garis terjadi, objek membalik ke format "runtuh". Jadi, ini masih merupakan solusi yang tidak sempurna, tetapi perbaikan.

Jika ini berhasil seperti yang saya pahami, saya pikir ini sudah merupakan peningkatan besar untuk situasi saat ini. Dalam kebanyakan kasus, ini sudah cukup.

+1

+1 semoga ini segera selesai

@NerdPad - sudah _is_ selesai.

Bisakah kita menggunakannya dengan Bracket? o_O

@C-Weinstein - Mungkin Anda bisa membuka masalah baru dengan contoh input dan output yang diinginkan?

Untuk orang-orang seperti saya yang datang ke sini mencari cara untuk membuatnya berfungsi: ini berfungsi dan dapat diaktifkan dengan opsi di .jsbeautifyrc

   "brace_style": "collapse-preserve-inline"

Sayangnya, itu tidak berhasil :( Tapi terima kasih sudah mencoba.

@Ceyaje - Bagaimana tidak berhasil? Di mana itu tidak berhasil? Apa input dan output Anda?

Masukan adalah

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

Ini "mempercantik" untuk

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

@Ceyaje Anda perlu mengatur opsi "brace-style" ke "collapse-preserve-inline"

@aves84 - terima kasih! Melanjutkan diskusi di #995.

@aves84 saya melakukan itu. Saya mengatakan itu masih terjadi, jadi saya membuka #995 tetapi saya menggunakan Kurung dan tidak menyadari bahwa itu adalah kode yang berbeda

@Kutsan - Silakan buka edisi baru.

Saya tidak dapat menemukan opsi expand-preserve-inline dengan file html di atom. Saya menulis javascript di file html dan file js.

Tempatkan "preserve-inline" setelah pengaturan yang ingin Anda gunakan (ciutkan, perluas, dll.)

"brace_style": "ciutkan, pertahankan-sebaris"

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

Hal di atas terjadi, namun gaya brace saya adalah collapse-preserve-inline. Saya membaca utas lengkapnya, saya tidak percaya saya melakukan sesuatu yang salah. Sudah restart Atom, untuk jaga-jaga, tidak ada.

Ada pembaruan tentang ini? collapse-preserve-inline masih memperluas fungsi panah ke beberapa baris.

@grandslammer - Silakan lihat masalah terbuka yang menyertakan kata "panah". Jika Anda tidak melihat masalah yang mencakup apa yang Anda bicarakan, silakan buka edisi baru.

Maaf: Topik asli adalah "Opsi untuk mempertahankan atau memasukkan "objek pendek" pada satu baris #315?
diskusi ini telah menyimpang banyak, dapatkah SIAPAPUN menunjukkan pengaturan yang benar untuk versi terbaru js-beautify untuk mencapai pemformatan yang diminta? terima kasih

@ainthek itu "brace_style": "collapse,preserve-inline"

Bagaimana dengan pengaturan di vs code versi terbaru untuk memperbaiki masalah ini?

Dalam kode vs 1.20.1 , saya tidak bisa membuat gaya "brace_style": "expand,preserve-inline", berfungsi.

Memasukkan :

konstan
 {
 dialog
 } = membutuhkan("elektron").jarak jauh;

Output (Setelah memilih area ini dan mengklik F1 ---> Mempercantik Pilihan) : NO CHANGE :(

Keluaran yang Diharapkan : const {dialog} = require("electron").remote;

PS ----> input yang terdistorsi diperoleh setelah Mempercantik seluruh file. Tidak ada yang menulis kode dengan cara yang menyimpang itu :P

Untuk vscode, menambahkan di bawah ini dalam pengaturan pengguna berfungsi untuk saya:
"beautify.config": { "brace_style": "collapse,preserve-inline" }

Terima kasih atas dukungan teman-teman.

@sulkhanp - Harap ajukan masalah yang menjelaskan perilaku tersebut.

Solusi @vipingoel berfungsi!
Mengapa opsi ini hanya berfungsi di preferensi pengguna vscode, bukan di file .jsbeautifyrc saya?

"brace_style": "perluas, pertahankan-inline" tidak berfungsi.

mengharapkan perilaku:

  let $w = $(window),  w = $w.width(),  h = $w.height();
  constructor()
  {
    this.setupData(); this.setupMenus(); this.setupUser(); this.setupUI();
  }

perilaku saat ini:

    let $w = $(window),
      w = $w.width(),
      h = $w.height();

  constructor()
  {
    this.setupData();
    this.setupMenus();
    this.setupUser();
    this.setupUI();
  }

@SiJinmin ini bukan objek pendek dan karena itu tidak terkait dengan masalah ini.

@vipingoel Berhasil . Saya sangat senang. Terima kasih!!!