Saat mengetikkan perintah di VS Code, berusaha rapi terkadang bisa menjadi hal terakhir 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 cara memformat kode dalam Kode VS bersama dengan tip bermanfaat lainnya untuk menjaga kode Anda terorganisir dengan baik .

Cara Memformat Kode

VS Kode memiliki perintah bawaan untuk mengatur kode yang sedang diketik ke format standar. Tombol pintas ini tidak memerlukan ekstensi tambahan dan dapat digunakan kapan saja. Cara pintasnya 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 sudut kiri atas lalu pilih " Simpan,” 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 sudut kiri atas atau dengan menekan "Ctrl + S".
Perhatikan bahwa jika Anda menekan "Ctrl + F" tanpa terlebih dahulu menekan "Ctrl + K" Anda akan membuka Find Menu. 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 baris ke atas, tekan panah atas. Untuk memindahkannya ke bawah, 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 ke awal dari baris di mana Anda ingin mengubah indentasi.Tekan "Ctrl + ]" untuk menambah indentasi.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 sudut kiri atas jendela.
Perhatikan bahwa menggunakan “⌘ + F” tanpa menekan “⌘ + K” sebelumnya hanya akan membuka Find Menu. Untuk menutup Find Menu cukup tekan “x” di sisi kanan atau tekan Esc.

Pindahkan baris ke atas atau ke bawah:
Tempatkan kursor Anda di awal baris yang ingin Anda edit.Tahan tombol “⌥”.Untuk memindahkan baris atas, tekan panah atas. Untuk memindahkannya ke bawah, tekan panah bawah.Simpan perubahan Anda dengan memilih "Simpan" dari menu File atau dengan menekan "⌘ + S".
Ubah indentasi satu baris:
Pindahkan kursor Anda ke awal baris di mana Anda ingin mengubah indentasi.Tekan “⌘ + ]” untuk menambah indentasi.Tekan “⌘ + [“ untuk mengurangi indentasi.Simpan file dengan menekan “⌘ + S” atau dengan memilih “Simpan” dari menu File pada pojok kiri atas jendela.
VS Code Format Code on Save

VS Code tidak memiliki perintah asli yang memformat dokumen Anda di save. Sebagai gantinya, ini dapat dilakukan dengan menginstal ekstensi pemformatan ke aplikasi Kode VS Anda. Yang paling populer dari ekstensi ini adalah Prettier yang menyediakan banyak fungsi pemformatan ke VS Code. Prettier dapat diinstal dengan melakukan hal berikut:
Buka VS Code.Klik tombol Extensions 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 dari ikon Prettier.Tunggu ekstensi untuk menyelesaikan instalasi.
Sebelum Prettier dapat mulai memformat dokumen Anda secara otomatis saat disimpan, Anda harus mengatur 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 adalah Prettier. Jika tidak ada formatter default atau VS Code menggunakan formatter lain secara default, tekan panah dropdown. Pilih “Prettier – Code Formatter” dari daftar. Atau, Prettier mungkin muncul di daftar sebagai “esbenp.prettier-vscode”. Pastikan bahwa opsi “Editor: Format Saat Simpan” telah dicentang. Jika tidak, aktifkan tanda centang. Ketik "Lebih Cantik" di bilah pencarian pengaturan. Gulir ke bawah hingga Anda menemukan baris "Lebih Cantik: Perlu Konfigurasi". Pastikan bahwa kotak centang telah dicentang. Pengaturan ini mencegah Prettier memformat dokumen tanpa file konfigurasi. Ini berguna saat Anda melihat kode yang diunduh yang mungkin memiliki aturan pemformatan 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 Lebih Cantik tertentu tergantung pada preferensi Anda. Setelah selesai, Anda dapat keluar dari menu ini.
Karena Anda telah mengonfigurasi Prettier untuk memformat secara otomatis hanya ketika 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 tombol file baru untuk membuat file konfigurasi.Beri nama file ini “.prettierrc.”Pada file, masukkan saja {}.Prettier will sekarang secara otomatis memformat dokumen Anda setiap kali Anda menyimpannya.
Tips untuk Menjaga Kode Terorganisir
Meskipun lekukan tidak diperlukan untuk menjalankan program, ini dapat membantu debugging dengan mengelompokkan kode ke dalam modul yang dapat dikelola. Pernyataan If-then atau kasus bersarang, misalnya, dapat mengambil manfaat dari ini dengan membuat setiap opsi alternatif dapat dibedakan secara visual satu sama lain. Ini berguna ketika Anda berurusan dengan kesalahan logika daripada kesalahan sintaksis. Jika Anda menamai modul atau baris kode pendek, biasakan menggunakan judul deskriptif daripada hanya menyebutnya modul 1, modul 2, dll. Hal ini memudahkan untuk mengetahui bagian kode mana yang melakukan fungsi tertentu. Itu selalu merupakan ide yang baik untuk menggunakan komentar untuk keuntungan Anda. Baik Anda menyertakan deskripsi singkat, atau hanya menambahkan catatan untuk diri sendiri, komentar sangat membantu selama proses debug.
Mengatur Kode

Mempertahankan format proyek Anda dengan benar tidak hanya membuatnya lebih mudah dibaca, tetapi juga membantu dalam mengidentifikasi kesalahan dan menjaga kode Anda tetap teratur. Meskipun tidak diperlukan untuk menjalankan program, mengetahui cara memformat file Anda di VS Code adalah keuntungan yang pasti.

Apakah Anda tahu cara lain untuk memformat file Anda di VS Code? Jangan ragu untuk membagikan pemikiran Anda di bagian komentar di bawah.