Saat mengetik perintah di VS Code, berusaha rapi terkadang menjadi hal terakhir yang ada di pikiran Anda. Meskipun pemformatan tidak diperlukan untuk menjalankan program, ini sangat membantu selama debugging dan mencoba menemukan kesalahan.
Dalam artikel ini, kami akan menunjukkan kepada Anda cara memformat kode dalam VS Code bersama dengan tips bermanfaat lainnya untuk menjaga agar kode Anda tetap tertata dengan baik.
Cara Memformat Kode
VS Code memiliki perintah bawaan untuk mengatur kode yang sedang diketik ke format standar. Tombol pintasan ini tidak memerlukan ekstensi tambahan dan dapat digunakan kapan saja. Pintasan adalah sebagai berikut:
Untuk PC
Format seluruh dokumen:
- Buka file dengan kode yang ingin Anda format.
- Tekan "Shift + Alt + F".
- Simpan perubahan dengan mengklik "File" di pojok kiri atas lalu pilih "Save", atau dengan menekan "Ctrl + S".
Memformat kode yang dipilih saja:
- Pada file dengan baris kode yang ingin Anda format, pilih baris dengan menyorotnya dengan mouse Anda.
- Tekan "Ctrl + K".
- Tekan "Ctrl + F".
- Simpan perubahan baik dengan memilih "Simpan" pada menu File di pojok kiri atas atau dengan menekan "Ctrl + S".
Perhatikan bahwa jika Anda menekan "Ctrl + F" tanpa terlebih dahulu menekan "Ctrl + K", Anda akan membuka Menu Temukan. Jika ini terjadi, tutup saja dengan mengklik tombol "x" atau menekan Esc.
Memindahkan baris ke atas atau ke bawah:
- Pindahkan kursor Anda ke awal baris yang ingin Anda pindahkan.
- Tahan tombol Alt.
- Untuk memindahkan garis ke atas, tekan panah atas. Untuk memindahkannya, tekan panah bawah.
- Simpan file Anda dengan memilihnya dari menu File di sudut kiri atas jendela atau dengan menekan "Ctrl + S".
Ubah lekukan satu baris:
- Pindahkan kursor Anda ke awal baris yang indentasinya ingin Anda ubah.
- Tekan "Ctrl + ]" untuk menambah lekukan.
- Tekan "Ctrl + [" untuk mengurangi indentasi.
- Simpan perubahan dengan memilih Simpan dari menu File atau dengan menekan "Ctrl + S".
Untuk Mac
Format seluruh dokumen:
- Buka file dengan kode yang ingin Anda format.
- Tekan “⇧ + ⌥ + F.”
- Simpan perubahan Anda dengan mengklik "File" di kiri atas lalu pilih "Simpan" atau tekan "⌘ + S".
Memformat kode yang dipilih saja:
- Sorot bagian dokumen yang ingin Anda format.
- Tekan “⌘ + K”.
- Tekan “⌘ + F”.
- Simpan file Anda dengan menekan “⌘ + S” atau dengan memilih “Simpan” dari menu File di pojok kiri atas jendela.
Perhatikan bahwa menggunakan “⌘ + F” tanpa menekan “⌘ + K” sebelumnya hanya akan membuka Menu Temukan. Untuk menutup Menu Temukan cukup tekan "x" di sisi kanan atau tekan Esc.
Memindahkan baris ke atas atau ke bawah:
- Tempatkan kursor Anda di awal baris yang ingin Anda edit.
- Tahan tombol “⌥”.
- Untuk memindahkan garis ke atas, tekan panah atas. Untuk memindahkannya, tekan panah bawah.
- Simpan perubahan Anda dengan memilih "Simpan" dari menu File atau dengan menekan "⌘ + S".
Ubah lekukan satu baris:
- Pindahkan kursor Anda ke awal baris yang indentasinya ingin Anda ubah.
- Tekan “⌘ + ]” untuk menambah lekukan.
- Tekan “⌘ + [“ untuk mengurangi indentasi.
- Simpan file dengan menekan “⌘ + S” atau dengan memilih “Simpan” dari menu File di pojok kiri atas jendela.
VS Kode Format Kode di Simpan
VS Code tidak memiliki perintah asli yang memformat dokumen Anda saat disimpan. Sebagai gantinya, ini dapat dilakukan dengan menginstal ekstensi pemformatan ke aplikasi VS Code Anda. Ekstensi yang paling populer adalah Prettier yang menyediakan banyak fungsi pemformatan ke VS Code. Prettier dapat diinstal dengan melakukan hal berikut:
- Buka Kode VS.
- Klik tombol Ekstensi yang terletak di menu sebelah kiri. Ini adalah ikon yang terlihat seperti empat kotak. Atau, Anda dapat menekan "Ctrl + Shit + x" untuk PC atau "⌘ + ⇧ + x" di Mac.
- Di bilah pencarian di bagian atas menu, ketik Prettier.
- Klik tombol Instal di sudut kanan bawah ikon Prettier.
- Tunggu ekstensi untuk menyelesaikan instalasi.
Sebelum Prettier dapat mulai memformat dokumen Anda secara otomatis saat disimpan, Anda harus menyiapkan ekstensi untuk mengaktifkan fitur tersebut. Ini dilakukan dengan melakukan hal berikut:
- Buka jendela pengaturan dengan menekan "Ctrl +," di PC atau "⌘ +," di Mac.
- Di bilah pencarian ketik formatter. Ini akan memunculkan beberapa pengaturan pemformatan.
- Pada pengaturan Editor: Default Formatter, pastikan ekstensi yang dipilih Prettier. Jika tidak ada formatter default atau VS Code menggunakan formatter lain secara default, tekan panah dropdown. Pilih “Prettier – Code Formatter” dari daftar. Alternatifnya, Prettier mungkin muncul di daftar sebagai “esbenp.prettier-vscode”.
- Pastikan opsi "Editor: Format On Save" telah dicentang. Jika tidak, aktifkan tanda centang.
- Ketik "Lebih cantik" di bilah pencarian pengaturan.
- Gulir ke bawah hingga Anda menemukan baris “Prettier: Require Config”. Pastikan bahwa kotak centang telah dicentang. Pengaturan ini mencegah Prettier memformat dokumen tanpa file konfigurasi. Ini berguna saat Anda melihat kode unduhan yang mungkin memiliki aturan pemformatannya sendiri. Ini mencegah Anda menimpa opsi pemformatan secara tidak sengaja. Perhatikan bahwa file tanpa judul akan tetap diformat secara otomatis meskipun pengaturan ini dicentang.
- Anda dapat mengedit pengaturan Prettier tertentu tergantung pada preferensi Anda. Setelah selesai, Anda dapat keluar dari menu ini.
Karena Anda telah mengonfigurasi Prettier untuk memformat secara otomatis hanya jika ada file konfigurasi, Anda harus membuatnya untuk setiap proyek. Ini dilakukan dengan mengikuti langkah-langkah berikut:
- Pilih akar proyek Anda di menu sebelah kiri.
- Klik pada tombol file baru untuk membuat file konfigurasi.
- Beri nama file ini ".prettierrc."
- Pada file, cukup masukkan {}.
- Prettier sekarang akan secara otomatis memformat dokumen Anda kapan pun Anda menyimpannya.
Tip untuk Menjaga Kode Tetap Teratur
- Meskipun lekukan tidak diperlukan untuk menjalankan program, indentasi dapat membantu proses debug dengan mengelompokkan kode ke dalam modul yang dapat dikelola. Pernyataan If-Then atau kasus bersarang, misalnya, dapat memanfaatkan hal ini dengan membuat setiap opsi alternatif dapat dibedakan satu sama lain secara visual. Ini sangat berguna saat Anda berurusan dengan kesalahan logika, bukan kesalahan sintaksis.
- Jika Anda menamai modul atau baris kode pendek, biasakan menggunakan judul deskriptif daripada hanya menyebutnya modul 1, modul 2, dll. Ini membuatnya lebih mudah untuk mengetahui bagian mana dari kode yang melakukan fungsi tertentu.
- Itu selalu ide yang baik untuk menggunakan komentar untuk keuntungan Anda. Apakah Anda menyertakan deskripsi singkat, atau hanya menambahkan catatan untuk Anda sendiri, komentar sangat membantu selama proses debug.
Kode Pengorganisasian
Menjaga proyek Anda diformat dengan benar tidak hanya membuatnya lebih mudah dibaca, tetapi juga membantu mengidentifikasi kesalahan dan menjaga kode Anda tetap teratur. Meskipun tidak diperlukan untuk menjalankan program, mengetahui cara memformat file Anda dalam VS Code adalah keuntungan yang pasti.
Apakah Anda tahu cara lain untuk memformat file Anda dalam VS Code? Jangan ragu untuk membagikan pemikiran Anda di bagian komentar di bawah ini.
