Cara Memformat Kode dalam Kode VS

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 kepada Anda cara memformat kode dalam VS Code bersama dengan tips bermanfaat lainnya untuk menjaga agar kode Anda tetap teratur.

Bagaimana Memformat Kode

Kode VS memiliki perintah bawaan untuk mengatur kode yang diketik saat ini 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.

    Pindahkan 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 ke bawah, tekan panah bawah.
  • Simpan file Anda dengan memilihnya dari menu File di sudut kiri atas jendela atau dengan menekan “Ctrl + S”.
  •   iMac, Mini, dan Pro: Mac Desktop Apple Dibandingkan

    Ubah lekukan satu baris:

  • Pindahkan kursor Anda ke awal baris di mana Anda ingin mengubah indentasi.
  • Tekan “Ctrl + ]” untuk menambah lekukan.
  • Tekan “Ctrl + [“ to decrease the indent.
  • Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
  • For Mac

    Format the entire document:

  • Open the file with the code that you wish to format.
  • Press “⇧ + ⌥ + F.”
  • Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
  • Formatting selected code only:

  • Highlight the part of the document that you wish to format.
  • Press “⌘ + K”.
  • Press “⌘ + F”.
  • Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
  • Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

    Move lines up or down:

  • Place your cursor at the beginning of the line you want to edit.
  • Hold down the “⌥” Key.
  • To move a line up, press the up arrow. To move it down, press the down arrow.
  • Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
  • Change indentation of a single line:

  • Move your cursor to the beginning of the line in which you want to change the indention.
  • Press “⌘ + ]” untuk menambah lekukan.
  • Tekan “⌘ +[“untukmengurangiindentasi[“todecreasetheindent
  • Simpan file dengan menekan “⌘ + S” atau dengan memilih “Simpan” dari menu File di sudut kiri atas jendela.
  • Kode Format Kode VS 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 Kode VS Anda. Yang paling populer dari ekstensi ini adalah Prettier yang menyediakan banyak fungsi pemformatan ke VS Code. Lebih cantik dapat diinstal dengan melakukan hal berikut:

      Cara Mengaktifkan Kontrol Orang Tua di iPad
  • Buka Kode VS.
  • 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 Lebih Cantik.
  • 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 mengatur ekstensi untuk mengaktifkan fitur tersebut. Ini dilakukan dengan melakukan hal berikut:

  • Buka jendela pengaturan dengan menekan “Ctrl +,” di PC atau “⌘ +,” di Mac.
  • Pada 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 opsi “Editor: Format On Save” telah dicentang. Jika tidak, alihkan 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 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 Prettier tertentu tergantung pada preferensi Anda. Setelah selesai, Anda dapat keluar dari menu ini.
  •   90Night Mengatur Siklus Tidur, Mengatur Waktu Tidur & Panggilan Bangun

    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 root proyek Anda di menu sebelah kiri.
  • Klik tombol file baru untuk membuat file konfigurasi.
  • Beri nama file ini “.prettierrc.”
  • Pada file, cukup masukkan {}.
  • Prettier sekarang akan 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, bukan kesalahan sintaks.
  • 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 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.
  • Kode Penyelenggara

    Menjaga proyek Anda diformat 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 dalam 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.