Home / Programming / Menjaga Kode Anda Bersih Dengan Lebih Cantik

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 di mana setiap penjepit terakhir pergi, cobalah outsourcing 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 biasanya 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 melihat taman 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’s. Anda akan melihat beberapa kode contoh pada awalnya, tetapi Anda dapat menghapus semua ini dan menempelkannya sendiri.

Misalnya, coba masukkan JavaScript berikut:

(function ()
{
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 atur, lalu lupakan, daripada tetap disibukkan dengan setiap detail pemformatan terakhir dari kode Anda. (Untuk alternatif dengan kontrol yang jauh 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 warisan — tetap ada, jadi Anda setidaknya harus memahami apa yang mereka lakukan, bahkan jika Anda menggunakan Prettier dalam keadaan defaultnya.

Cara terbaik untuk mengelola opsi Prettier adalah dengan 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, misalnya

{
"tabWidth": 8
}

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

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

$ yarn global add prettier

Dan untuk npm:

$ npm install --global prettier

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

$ prettier

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

Membersihkan File

Untuk memformat ulang file, gunakan perintah yang mirip dengan:

$ prettier --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:

$ prettier --write .

Prettier akan berjalan di semua file di bawah direktori saat ini, memformat semua 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:

$ prettier test.js > 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:

$ prettier --check .

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

Checking formatting...
[warn] .prettierrc
[warn] .prettierrc.json
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

Opsi Baris Perintah

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

$ prettier tmp.js
function example() {
console.log("hello, world");
}
$ prettier --single-quote tmp.js
function example() {
console.log('hello, world');
}

Mendapatkan bantuan

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

$ prettier --help trailing-comma
--trailing-comma <es5|none|all>
Print trailing commas wherever possible when multi-line.
Valid options:
es5 Trailing commas where valid in ES5 (objects, arrays, etc.)
none No trailing commas.
all Trailing commas wherever possible (including function arguments).
Default: es5

Menggunakan Editor Teks

Setelah Anda menginstal Prettier, Anda dapat menggunakannya dalam berbagai skenario, tergantung 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:

Sublime Text

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, kemudian buka Command Palette Sublime Text dan pilih “Package Control: Install Package”:

Tangkapan layar menunjukkan cara menginstal jsprettier dalam teks luhur

Kemudian cari “jsprettier” dan klik untuk menginstalnya:

Tangkapan layar menunjukkan cara menginstal jsprettier dalam teks luhur

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 menghasilkan JsPrettier secara otomatis membersihkan file yang kompatibel saat Anda menyimpannya di Sublime Text.

Atom

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

Tangkapan layar menunjukkan cara menginstal jsprettier di atom

Setelah diinstal, penggunaannya sudah tidak asing lagi: pintasan atau item menu memungkinkan Anda untuk 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 cukup 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-prettier

Git mungkin adalah cara termudah untuk mendownload file yang diperlukan, tetapi cara apapun untuk memasukkan vim-lebih cantik ke dalam direktori start tersebut harus melakukan pekerjaan itu.

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

Tangkapan layar menunjukkan penggunaan yang lebih cantik di vim

Yang seharusnya menghasilkan file yang dibersihkan:

Tangkapan layar menunjukkan penggunaan yang lebih cantik di vim

Integrasikan Lebih Cantik Ke Proyek Anda

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

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

komputer-malam
Meninggalkan Komputer Anda Sepanjang Waktu: Pro dan Kontra

Apakah lebih baik membiarkan PC Anda tetap menyala meskipun Anda tidak sedang menggunakannya? Atau haruskah Anda selalu mematikan PC Anda? Inilah pro dan kontra dari keduanya!


Tentang Penulis

.

About nomund

Melihat Keluaran KL cepat : Nomor KL Hari Ini Lengkap

Check Also

Cara Membuat Repositori Pertama Anda di Github

Situs Github yang populer bersama dengan alat git menjadikannya sumber yang sangat baik untuk tidak …