Js-beautify: Pemformatan baris tunggal CSS

Duplikat #330. Tetapi mengingat usia permintaan itu, saya membiarkan yang satu ini tetap terbuka.

visual studio memiliki fitur ringkas untuk file *.css, seperti yang diinginkan @Alex360hd .

kode visual studio dengan ekstensi-plugin dari js-beauty belum memiliki fitur ini.

fitur kompak membuat kode Anda 1000 baris (ringkas) vs 5000 baris (format lama), Anda dapat mengontrol file *.css Anda dengan Perspektif Tuhan.

dari pembenci kode sass/kurang panjang.

Ya, +1 untuk itu. Saya sangat suka pemformatan baris tunggal css, setiap pemilih bersebelahan dan memberikan tampilan perspektif yang sangat bagus.

Saya berharap menggunakan minifier untuk mengubah gaya multi-baris menjadi satu baris, dan beautifier untuk mengubah satu baris menjadi multi-baris.

Menindaklanjuti pendapat #330 @evocateur ("Tugas kecantikan bukan untuk mengecilkan kode, tetapi memformat ulang agar konsistensi dan keterbacaan"): cssmin yang disebutkan di sana telah ditinggalkan demi clean-css (lihat juga Bagaimana cara menggunakan clean-css dengan alat build? ). "Pemformatan satu baris" mudah didapat dengan clean-css - pengaturan paling sederhana adalah

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

Itu ternyata

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

ke dalam

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

Dari sana, sesuaikan opsi spaces

setiap pengembang muda rekan saya menulis setiap baris dengan panjang panjang kurang/sass, dan mematuhi di mana-mana.

maafkan kode pool saya -_-!!.

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

keluaran:

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

cukup padatkan kode antara{}, file .scss&.less dikecualikan.
saya ingin tahu apakah ada option.css. kompak untuk memformat *.css . :)

@evocateur

Tugas seorang beautifier bukanlah untuk mengecilkan kode, tetapi untuk memformat ulang agar konsistensi dan keterbacaan

Itu bukan minifikasi, pemformatan satu baris menyimpan beberapa spasi dan beberapa baris kembali untuk beberapa aturan pemilih.

Bagi saya, dan bagi banyak pengembang web, ini:

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

Jauh lebih mudah dibaca daripada ini:

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

Tidak.

Pada 22 Maret 2017, pukul 01:08, Alex360hd [email protected] menulis:

@evocateur

Tugas seorang beautifier bukanlah untuk mengecilkan kode, tetapi untuk memformat ulang agar konsistensi dan keterbacaan

Bagi saya, dan bagi banyak pengembang web, ini:

.btn { perbatasan:1px hitam pekat; latar belakang:#ff; perbatasan- radius:5px warna:#000; }
. btn:arahkan kursor { latar belakang:#000; warna:#ff; }
Jauh lebih mudah dibaca daripada ini:

.btn {
perbatasan: 1px hitam pekat;
latar belakang:#ff;
batas- radius:5px;
warna:#000;
}

. btn: arahkan {
latar belakang:#000;
warna:#ff;
}
—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau matikan utasnya.

Argumentasi yang indah...

Secara pribadi saya ingin memiliki gambaran yang bagus tentang pemilih CSS saya dan menggunakan sintaks "biasa", saya hampir tidak melihat lebih dari 3 atau 4 pemilih di viewport saya.

Dengan menggunakan pemformatan satu baris, saya dapat melihat 20 atau 30 penyeleksi (setidaknya) dan saya dapat dengan mudah memiliki gambaran umum tentang sekelompok elemen.

Dan ketika Anda mengetahui CSS dengan baik, menggunakan warisan dan pemilih dengan cerdas, Anda jarang memiliki lebih dari 5 atau 6 aturan untuk pemilih, dan dengan layar yang kita miliki saat ini, (sangat besar), saya dapat melihat semua aturan saya tanpa bilah gulir horizontal. (dan jika demikian, IDE saya memiliki banyak opsi untuk pengembalian jalur otomatis).

Jika Anda mencari formatter css online, Anda dapat melihat bahwa banyak dari mereka memiliki opsi baris tunggal, itu mungkin karena minat beberapa orang ...

@evocateur - Bintang emas pada kesan Kucing Pemarah Anda. 🌟 😃.

@Alex360hd @jsonchou - poin Anda diambil dengan baik. Ini berada di antara minifikasi dan kecantikan dan itulah sebabnya masalah ini tetap terbuka dan terdaftar sebagai peningkatan.

Ini adalah permintaan yang masuk akal tetapi ini adalah prioritas yang lebih rendah untuk saya dan kontributor utama lainnya untuk proyek ini (seperti @evocateur). Jika seseorang memilih untuk mengirimkan PR dengan implementasi javascript dan python dan rentang pengujian yang memadai, itu akan diterima. Tetapi kami memiliki tugas lain yang kami rasa lebih diprioritaskan untuk proyek secara keseluruhan.

@olet
Terima kasih telah menunjukkan alat css solusi dan alternatif!

@jsonchou -
Maaf, selalu ada ekspresi reguler yang akan berfungsi untuk sebagian besar input, atau setidaknya semua input yang Anda atau saya akan coba. Namun, mereka tidak pernah benar-benar berfungsi untuk semua input dan pada akhirnya mereka tidak dapat dipelihara dan rawan kesalahan - begitulah kode css-beautifier menjadi sulit dipertahankan seperti sekarang ini. Terima kasih telah memberikan solusi yang dapat diretas orang jika mereka memilih untuk mengambil risiko, tetapi saya berharap mereka menggunakan solusi @olets sebagai gantinya. 😄.

@jsonchou hati-hati dengan //inline comments di KURANG dan Sass

@Alex360hd @Zmove

Saya telah menulis plugin kompak css untuk VSCode.

https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact

Luar biasa, saya akan mencobanya.

Hai @jsonchou - Saya pikir jika Anda membawa plugin Anda ke dunia sass/scss, banyak orang akan menggunakannya. Saya terheran-heran memikirkan mengapa di zaman sekarang ini dengan monitor selebar 3000 piksel, orang-orang cenderung menggunakan 5% dari real estat layar dalam CSS!

Saya bahkan akan mengambil plugin Anda sejauh membiarkan orang menentukan ORDER di mana properti harus pergi. Hal-hal seperti posisi dan tampilan harus masuk lebih awal dalam daftar dan kemudian margin, padding, dll, dan kemudian warna, font, dll.

Bagi saya, itu terbukti sangat kuat ketika dalam tim dengan banyak orang menulis SCSS.

Maaf teman-teman, seseorang memberi saya satu alasan bagus untuk membuat vals kunci properti berada di jalur terpisah? Menulis CSS di perangkat seluler?

Steven

@tateman74 Mungkin saya akan mencoba membuat file .scss menjadi satu baris, tetapi menurut saya ORDER properties harus dilakukan dengan solusi ke-3 seperti csscomb.

menarik. CSSComb tentu saja yang saya cari untuk dipesan. Harus membuat ekstensi VSCode untuk itu, kurasa.

SCSS mungkin sedikit menantang karena baris baru sebenarnya berarti sesuatu. Untuk keterbacaan terbaik, ini selalu cara saya memformat barang:

• selalu baris baru sebelum aturan apakah bersarang atau tidak
• selalu keriting di jalurnya sendiri

Sebuah cara kembali (di hari kerja MySpace saya :)), beberapa teman css dan saya beralasan bahwa awalan vendor harus dimulai pada baris baru karena mereka pada dasarnya (diabaikan) jenis properti. Artinya, mereka berarti sesuatu, tetapi hanya ada untuk kompatibilitas. Saya kira di zaman sekarang ini, kita harus tetap menggunakan PostCSS sehingga awalan vendor tersebut seharusnya tidak pernah ada.

Terima kasih sekali lagi dan beri tahu saya jika saya dapat membantu. Berikut adalah file SCSS yang cukup khas yang saya sukai.
Seseorang katakan padaku itu tidak bisa dibaca! :)

Steven

Apakah ada di antara Anda yang merasa fitur ini berguna, bersedia mengimplementasikan fitur untuk css beautifier? Mungkin tidak akan terlalu sulit.

Ini akan membutuhkan setidaknya tokenisasi css untuk membuatnya berfungsi (#545). Bahkan setelah itu dilakukan akan membutuhkan beberapa pekerjaan untuk mewujudkannya.