Cara Memformat Kode dengan Prettier di Visual Studio Code

Pengantar

Memformat kode secara konsisten merupakan tantangan, tetapi alat pengembang modern memungkinkan pengembang mempertahankan konsistensi secara otomatis di seluruh basis kode tim Anda.

Dalam artikel ini, Anda akan menyiapkan Prettier untuk memformat kode Anda secara otomatis di Visual Studio Code, yang juga dikenal sebagai VS Code.

Untuk keperluan demonstrasi, inilah kode sampel yang akan Anda format:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Jika sudah biasa memformat kode, Anda mungkin memperhatikan beberapa kesalahan langkah:

• Campuran tanda kutip tunggal dan ganda.
• Properti pertama objek person harus berada di barisnya sendiri.
• Pernyataan konsol di dalam fungsi harus diinden.
• Anda mungkin atau mungkin tidak suka tanda kurung opsional yang mengurung parameter fungsi panah.

Prasyarat

Untuk mengikuti tutorial ini, Anda perlu mengunduh dan menginstal Visual Studio Code.

Untuk bekerja dengan Prettier di Visual Studio Code, Anda perlu menginstal ekstensi. Caranya, cari Prettier - Code Formatter di panel ekstensi VS Code. Jika Anda menginstalnya untuk pertama kali, Anda akan melihat tombol install sebagai ganti tombol uninstall yang ditunjukkan di sini:

Langkah 1 — Menggunakan Perintah Format Document

Dengan ekstensi Prettier yang telah terinstal, kini Anda dapat memanfaatkannya untuk memformat kode. Untuk memulai, mari kita mendalami penggunaan perintah Format Document. Perintah ini akan membuat kode Anda lebih konsisten dengan pengaturan jarak yang telah diformat, pelipatan baris, dan tanda kutip.

Untuk membuka palet perintah, Anda dapat menggunakan COMMAND+ SHIFT + P di macOS atau CTRL + SHIFT + P di Windows.

Dalam palet perintah, cari format, kemudian pilih Format Document.

Nanti, Anda mungkin diminta memilih format yang akan digunakan. Caranya, klik tombol Configure:

Kemudian, pilih Prettier - Code Formatter.

Kode Anda sekarang telah diformat dengan jarak, pelipatan baris, dan tanda kutip yang konsisten:

const name = 'James';

const person = { first: name };

console.log(person);

const sayHelloLinting = (fname) => {
  console.log(`Hello linting, ${fName}`);
}

sayHelloLinting('James');

Ini juga dapat digunakan di berkas CSS. Anda dapat mengubah kode dengan indentasi, kurung kurawal, baris baru, dan titik-koma yang tidak konsisten menjadi kode yang diformat dengan baik. Misalnya:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Akan diformat menjadi:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Karena kita telah mendalami perintah ini, mari kita lihat cara mengimplementasikannya agar dijalankan secara otomatis.

Langkah 2 — Memformat Kode saat Disimpan

Sejauh ini, Anda harus menjalankan perintah secara manual untuk memformat kode. Untuk mengotomatiskan proses ini, Anda dapat memilih pengaturan di VS Code agar berkas Anda diformat secara otomatis saat disimpan. Hal ini juga memastikan bahwa kode tidak akan diperiksa karena kontrol versi yang tidak diformat.

Untuk mengubah pengaturan ini, tekan COMMAND +, di macOS atau CTRL +, di Windows untuk membuka menu Settings. Setelah menu dibuka, cari Editor: Format On Save dan pastikan opsi itu telah dicentang:

Setelah ini diatur, Anda dapat menulis kode seperti biasa dan secara otomatis akan diformat saat menyimpan berkas.

Langkah 3 — Mengubah Pengaturan Konfigurasi Prettier

Prettier melakukan banyak hal untuk Anda secara asali, tetapi Anda juga dapat menyesuaikan pengaturannya.

Buka menu Settings. Kemudian, cari Prettier. Ini akan menampilkan semua pengaturan yang dapat Anda ubah:

Berikut ini beberapa pengaturan paling umum:

• Single Quote - Memilih antara tanda kutip tunggal dan ganda.
• Semi - Memilih jika akan menyertakan atau tidak menyertakan titik-koma di akhir baris.
• Tab Width - Menentukan jumlah spasi yang Anda inginkan untuk menyisipkan tab.

Kelemahan menggunakan menu pengaturan bawaan di VS Code adalah tidak menjamin konsistensi di semua pengembang dalam tim Anda.

Langkah 4 — Membuat Berkas Konfigurasi Prettier

Jika Anda mengubah pengaturan di VS Code, orang lain mungkin memiliki konfigurasi yang sepenuhnya berbeda di mesin mereka. Anda dapat membuat pemformatan yang konsisten untuk tim dengan membuat berkas konfigurasi bagi proyek Anda.

Buat berkas baru bernama .prettierrc.extension dengan salah satu ekstensi berikut:

• yml
• yaml
• json
• js
• toml

Berikut ini contoh berkas konfigurasi sederhana yang menggunakan JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Untuk lebih spesifik mengenai berkas konfigurasi, lihat Dokumentasi Prettier. Setelah membuat dan memeriksanya di proyek, Anda dapat memastikan bahwa setiap anggota tim mengikuti aturan pemformatan yang sama.

Kesimpulan

Memiliki kode yang konsisten adalah praktik yang baik. Hal ini sangat bermanfaat saat bekerja di proyek bersama beberapa kolaborator. Menyepakati seperangkat konfigurasi akan membantu dalam kemudahan membaca dan memahami kode. Akan ada lebih banyak waktu yang dapat dicurahkan untuk memecahkan masalah teknis yang menantang, bukannya berkutat dengan masalah yang telah diselesaikan seperti indentasi kode.

Prettier menjaga konsistensi dalam pemformatan kode Anda dan mengotomatiskan prosesnya.