Menjaga Kode Anda Bersih Dengan Lebih Cantik

Pemformatan kode tampak seperti subjek yang sepele, tetapi itu adalah sesuatu yang dapat memengaruhi kualitas dan kebenaran kode Anda, cara mengontrol versi, dan cara Anda berkolaborasi dengan orang lain. Namun, jika Anda tidak ingin terjebak dalam detail tentang ke mana setiap penjepit terakhir, cobalah mengalihkan masalah ke alat sumber terbuka, Prettier.

Memformat Masalah

Tim pengembang perangkat lunak telah menghabiskan waktu berjam-jam yang tak terhitung jumlahnya sepanjang sejarah berdebat tentang panjang baris maksimum atau pada baris mana brace harus dipasang. Apa pun preferensi pribadi, kebanyakan orang setuju pada setidaknya satu hal: pemformatan kode harus konsisten di seluruh proyek.

Lebih cantik adalah alat yang dirancang untuk mencapai ini. Berikan beberapa kode dan itu akan mengembalikan kode yang sama, diformat secara konsisten. Prettier memiliki integrasi editor teks, alat baris perintah, dan demo online.

Berbicara dengan Bahasa yang Benar

Pertama-tama, Anda pasti ingin tahu apakah Prettier kompatibel dengan bahasa, atau bahasa yang biasa Anda gunakan. Prettier saat ini berfokus pada sekumpulan bahasa inti yang terutama ditujukan untuk pengembangan web front-end, termasuk:

• JavaScript
• HTML
• CSS
• Kelancangan
• Penurunan harga
• YAML

Ada juga dukungan terbuka untuk bahasa tambahan melalui plugin.

Cobalah Lebih Cantik Menggunakan Playground Online

Bahkan sebelum mencoba menginstal Prettier, Anda mungkin ingin memeriksanya tempat bermain. Dengan menggunakan antarmuka web, Anda dapat menempelkan beberapa kode contoh dan mengamati bagaimana Prettier akan mengubahnya. Ini adalah cara yang bagus untuk mendapatkan kesan tentang apa yang sebenarnya dilakukan alat tersebut, tetapi juga dapat bertindak sebagai metode utama Anda untuk menggunakan Prettier, jika persyaratan Anda lebih ringan.

Secara default, taman bermain akan terlihat seperti dua panel editor teks dasar, satu di sebelah kiri untuk masukan Anda, satu di sebelah kanan menampilkan keluaran Prettier. Anda akan melihat beberapa kode contoh pada awalnya, tetapi Anda dapat menghapus semua ini dan menempelkannya sendiri.

Misalnya, coba masukkan JavaScript berikut:

(fungsi ()
{
window.alert ('ok')
}())

Lebih cantik harus mengubahnya menjadi:

(function () {
window.alert ("ok");
})();

Perhatikan, secara default, perubahan yang dibuat oleh Prettier meliputi:

• Mengonversi string yang dikutip tunggal menjadi yang dikutip ganda
• Menambahkan titik koma
• Mengubah indentasi menjadi dua spasi

Di kiri bawah adalah tombol yang memungkinkan Anda melihat opsi. Dengan contoh sebelumnya, coba sesuaikan lebar tab, alihkan --satu-kutipan bendera di bawah Umum, atau mengubah --tidak-semi bendera di bawah JavaScript.

Opsi konfigurasi

Prettier mendeskripsikan dirinya sendiri sebagai "beropini", pilihan desain yang disengaja yang berarti kontrol dari hal-hal spesifik dikorbankan untuk kesederhanaan dan konsistensi. Ini dirancang untuk Anda siapkan, lalu lupakan, alih-alih terus sibuk dengan setiap detail pemformatan terakhir dari kode Anda. (Untuk alternatif dengan kontrol yang lebih baik atas setiap detail pemformatan terakhir, coba eslint.)

Namun, penulis juga menyadari bahwa beberapa keputusan memiliki dampak fungsional di luar tampilan kode. Beberapa opsi — termasuk beberapa untuk tujuan lama — tetap ada, jadi Anda setidaknya harus memahami apa yang mereka lakukan, bahkan jika Anda menggunakan Prettier dalam keadaan default-nya.

Cara terbaik untuk mengelola Opsi yang lebih cantik adalah menyimpannya dalam file konfigurasi. Ada banyak cara untuk mengatur ini, tetapi mulailah dengan membuat file bernama .prettierrc.json di direktori proyek lokal Anda. Ini dapat berisi salah satu opsi yang didukung dalam objek JSON standar, mis.

{
"tabWidth": 8
}

File konfigurasi yang sama akan dibaca oleh Prettier baik Anda menjalankannya melalui baris perintah atau editor teks yang didukung.

Menggunakan benang atau npm, pemasangan harus mudah. Untuk benang:

$ benang global tambahkan lebih cantik

Dan untuk npm:

$ npm install --lobal lebih cantik

Setelah Anda menginstal Prettier secara global, Anda seharusnya dapat mengetik:

$ lebih cantik

Secara default, Anda akan mendapatkan layar teks bantuan yang akan mengonfirmasi bahwa alat tersebut dipasang dan beroperasi dengan benar.

Membersihkan File

Untuk memformat ulang file, gunakan perintah yang mirip dengan:

$ lebih cantik --write filename.js

Ini akan menimpa file asli, yang seringkali merupakan pendekatan yang paling nyaman. Atau, Anda mungkin ingin lebih cantik untuk bertindak pada setiap file dalam sebuah proyek:

$ lebih cantik --write.

Prettier akan berjalan di semua file di bawah direktori saat ini, memformat semua file yang dikenali.

Anda juga dapat mencetak hasilnya ke keluaran standar, daripada mengubah file asli, yang memungkinkan Anda menyimpan keluaran ke file lain, atau mengarahkannya ke tempat lain:

$ test.js lebih cantik> test2.js

Memeriksa File

Untuk mendapatkan laporan Prettier tentang kebersihan kode Anda tanpa benar-benar membuat perubahan apa pun, gunakan --memeriksa tandai dengan satu nama file atau banyak:

$ lebih cantik - periksa.

Anda akan mendapatkan baris keluaran untuk setiap file yang tidak sesuai dengan format yang diharapkan, sesuai dengan konfigurasi Prettier:

Memeriksa pemformatan ...
[memperingatkan] .prettierrc
[memperingatkan] .prettierrc.json
[memperingatkan] Masalah gaya kode ditemukan di file di atas. Lupa menjalankan Prettier?

Opsi Baris Perintah

Opsi standar Prettier tersedia sebagai opsi baris perintah, jika Anda membutuhkannya. Berikut adalah contoh bagaimana --satu-kutipan bendera mempengaruhi keluaran:

$ tmp.js yang lebih cantik
contoh fungsi () {
console.log ("halo, dunia");
}
$ lebih cantik --single-quote tmp.js
contoh fungsi () {
console.log ('halo, dunia');
}

Mendapatkan bantuan

Alat Baris Perintah memberikan bantuan informatif tentang opsi apa pun melalui --Tolong bendera:

$ prettier --help trailing-comma
--trailing-koma 
Cetak tanda koma jika memungkinkan jika banyak baris.
Opsi yang valid:
es5 Tanda koma jika valid di ES5 (objek, array, dll.)
none Tidak ada tanda koma di belakangnya.
semua Trailing koma jika memungkinkan (termasuk argumen fungsi).
Default: es5

Menggunakan Editor Teks

Setelah Anda memasang Prettier, Anda dapat menggunakannya dalam berbagai skenario, bergantung pada perangkat apa yang sudah Anda gunakan. Kemungkinannya adalah, Anda menggunakan editor teks. Prettier memiliki binding untuk sebagian besar yang populer, jadi berikut ini cara menyiapkan tiga di antaranya:

Teks Sublim

JsPrettier adalah plugin Sublime Text yang membuat Prettier tersedia di editor. Meskipun ada beberapa cara berbeda untuk menginstal JsPrettier, kami merekomendasikan penggunaan metode Kontrol Paket. Anda harus sudah menginstal Prettier, lalu buka Command Palette Sublime Text dan pilih "Package Control: Install Package":

Kemudian cari "jsprettier" dan klik untuk menginstalnya:

Setelah JsPrettier diinstal, Anda dapat mengklik kanan file yang terbuka untuk memformatnya. Anda juga dapat mengatur nilai auto_format_on_save untuk benar dalam pengaturan JsPrettier yang akan membuat JsPrettier secara otomatis membersihkan file yang kompatibel saat Anda menyimpannya di Sublime Text.

Atom

Penginstalan untuk Atom sangat mirip dengan Sublime Text: cukup gunakan pengelola paket bawaan editor untuk menginstal lebih cantik-atom:

Setelah terinstal, penggunaannya sudah tidak asing lagi: pintasan atau item menu memungkinkan Anda memformat file sesuai permintaan, sementara pengaturan Atom memungkinkan Anda menjalankan Prettier secara otomatis setiap kali file disimpan.

Vim

Vim adalah editor berbasis baris perintah yang sangat kuat yang tidak cocok untuk pemula. Menjadi Lebih Cantik untuk bekerja dengan vim memang rumit, tetapi itu masih hanya beberapa langkah:

mkdir -p ~ / .vim / pack / plugins / start
git clone https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-lebih cantik

Git mungkin adalah cara termudah untuk mengunduh file yang diperlukan, tetapi cara apa pun untuk mendapatkan vim-lebih cantik ke direktori awal itu harus melakukan pekerjaan itu.

Setelah terinstal, Prettier akan secara otomatis berjalan saat file disimpan di vi. Ini juga dapat dijalankan secara manual kapan saja melalui Lebih cantik perintah:

Yang seharusnya menghasilkan file yang dibersihkan:

Integrasikan Lebih Cantik Ke Proyek Anda

Menggunakan pemformat kode seperti Prettier dapat membantu mempertahankan basis kode yang lebih mudah dibaca. Ini juga dapat membantu menghindari perdebatan tentang gaya tertentu yang akan digunakan saat membuat kode — cukup alihkan keputusan tersebut ke Prettier!

Terakhir, git hook dapat disiapkan untuk memastikan kode selalu dibersihkan saat dimasukkan ke repositori proyek Anda. Pengembang individu dapat bebas memformat kode mereka sesuka mereka, tetapi salinan pusat akan selalu bersih dan konsisten.

nano vs. Vim: Editor Teks Terminal Terbaik, Dibandingkan

Mencari editor teks terminal untuk Linux? Pilihan utama adalah antara Vim dan nano! Begini cara mereka membandingkan.

Tentang Penulis