Visual Studio Code, yang dikenal sebagai VS Code, adalah salah satu editor kode yang paling banyak digunakan. VS Code memiliki dukungan bawaan untuk Node.js, JavaScript, dan TypeScript. Namun, Anda dapat menggunakan berbagai ekstensi untuk membuatnya dapat diakses oleh sebagian besar bahasa dan runtime lainnya.
Microsoft adalah perusahaan yang mengembangkan editor kode sumber terbuka dan gratis ini.
VS Code populer karena fitur-fitur ini;
- Intellisense: VS Code menyediakan pelengkapan otomatis kode dan penyorotan sintaks.
- Lintas platform: Anda dapat menggunakan editor kode ini di sistem operasi Linux, Windows, dan macOS.
- Ketersediaan berbagai ekstensi: Ketersediaan berbagai ekstensi juga dapat mengubah VS Code menjadi lingkungan pengembangan terintegrasi (IDE).
- Dukungan multi-bahasa: Anda dapat menggunakan alat ini dengan hampir semua bahasa pemrograman melalui ekstensi Kode VS.
- Terminal terintegrasi: Terminal bawaan di VS Code memungkinkan pengembang untuk menjalankan perintah Git langsung dari editor kode. Dengan demikian Anda dapat melakukan, mendorong dan menarik perubahan dari editor ini.
Pemformatan Otomatis dalam Kode VS
Prasyarat
- Kode VS: Editor kode ini gratis untuk diunduh. Jika Anda belum menginstalnya di mesin Anda, unduh dari situs resmi, tergantung pada sistem operasi Anda.
- Pilih bahasa yang akan digunakan: Anda harus memutuskan bahasa yang akan digunakan karena ada pemformat yang berbeda untuk bahasa yang berbeda.
- Formatter: VS Code menggunakan ekstensi untuk pemformatan kode. Kami akan menggunakan Prettier dalam artikel ini. Namun, Anda bebas menggunakan pemformat apa pun yang sesuai dengan bahasa yang Anda gunakan.
Pemformatan otomatis adalah fitur yang secara otomatis memformat blok/baris kode atau file pada editor kode berdasarkan aturan dan pedoman tertentu. Fitur ini didasarkan pada file konfigurasi yang menetapkan aturan pemformatan pada lekukan, jeda baris, dan spasi.
Saat fitur format otomatis diaktifkan, semua aturan ini akan diterapkan ke semua file di basis kode Anda saat Anda menulisnya.
Namun, Anda juga dapat menonaktifkan pemformatan otomatis untuk blok kode tertentu jika Anda ingin menonjol dari yang lain. Untuk mencapai ini, Anda bisa membungkus potongan kode di blok komentar yang menentukan aturan yang akan diterapkan.
Manfaat kode pemformatan otomatis dalam kode VS
- Menghemat waktu: Menulis kode dan memformat dapat menghabiskan waktu. Pemformatan otomatis menghemat waktu Anda, dan dengan demikian Anda dapat lebih fokus pada proses penulisan dan sintaksis.
- Konsistensi: Meskipun kode sumber tidak muncul di sisi klien, harus ada konsistensi. Pemformatan otomatis berguna, terutama untuk proyek besar dengan banyak kontributor.
- Mengamati praktik terbaik: Fitur pemformatan otomatis sangat berguna dalam menerapkan konvensi indentasi, spasi, dan penamaan yang konsisten.
- Untuk pembacaan kode yang mudah: Kode yang diformat dengan baik mudah diikuti selama peninjauan kode. Pengembang baru yang bergabung dengan organisasi Anda akan dengan mudah memahami kode yang diformat dengan baik.
Cara mengaktifkan Format Otomatis dalam kode VS dan menyesuaikannya
Ikuti langkah-langkah ini untuk mengaktifkan pemformatan otomatis:
Setelah Prettier diinstal pada VS Code Anda, Anda dapat mengaktifkan fitur format otomatis.
Kami menggunakan file HTML sederhana dari halaman login untuk mendemonstrasikan cara mengaktifkan pemformatan otomatis.
Kami akan menggunakan kode ini:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Meskipun kode di atas berfungsi, sulit untuk dibaca dan diikuti karena tidak diindentasi seperti yang diharapkan. Kami akan menggunakan Prettier untuk memformat kode secara otomatis.
Ikuti langkah ini.
3. Ketik Formatter di bilah pencarian dan pilih Prettier di tab Editor:Default Formatter.
4. Temukan Editor: Format di Simpan dan centang kotaknya.
5. Simpan file HTML Anda, pilih input pada dokumen HTML Anda, klik kanan, dan pilih Format Document.
6. Periksa apakah dokumen Anda telah diformat. Ekstensi ini akan secara otomatis memformat semua kode lain yang Anda tulis di Kode VS Anda.
6. Sesuaikan pengaturan Prettier Configuration: Prettier diatur untuk melakukan banyak hal secara default. Namun, Anda masih dapat menyesuaikannya dengan kebutuhan Anda. Buka Pengaturan di VS Code Anda, cari Prettier, dan sesuaikan pengaturan sesuai keinginan Anda.
7. Buat file Konfigurasi Lebih Cantik: Pengaturan yang telah Anda konfigurasikan pada mesin Anda dapat berbeda dari yang lain jika Anda bekerja sebagai tim. File konfigurasi yang lebih cantik akan memastikan Anda memiliki gaya kode yang konsisten untuk proyek Anda. Buat file .prettierrc dengan ekstensi .json untuk mengonfigurasi pengaturan proyek Anda. Kami dapat menambahkan kode ini ke file JSON untuk tujuan demonstrasi;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Blok kode di atas menentukan empat hal, tanda koma, lebar tab, penggunaan titik koma, dan apakah akan menggunakan tanda kutip tunggal atau ganda. Pada kasus ini;
- Tanda koma hanya akan ditambahkan saat kode diubah menjadi es5.
- Lebar tab, jumlah spasi untuk setiap tab, diatur ke 4.
- Semi menunjukkan apakah Anda harus menambahkan titik koma atau tidak ke kode Anda di akhir pernyataan. Kami telah menyetelnya sebagai salah, yang berarti titik koma tidak akan ditambahkan.
- Anda dapat menggunakan tanda kutip tunggal atau ganda dalam kode Anda. Kami telah menetapkan bahwa kami harus menggunakan tanda kutip tunggal untuk proyek ini.
Anda dapat memeriksa dokumen Prettier untuk memahami cara membuat pengaturan konfigurasi yang konsisten.
Praktik Terbaik untuk Format Otomatis dalam Kode VS
Gunakan format yang tepat
Meskipun kami telah menggunakan Prettier dalam artikel ini untuk tujuan demonstrasi, bukan berarti ini berlaku untuk semua bahasa. Ada ratusan ekstensi pemformatan untuk VS Code, dan terserah Anda untuk menentukan mana yang sesuai dengan kebutuhan Anda. Misalnya, formatter seperti Prettier dan Beautify sesuai dengan HTML dan CSS. Di sisi lain, Anda dapat menggunakan ekstensi Hitam atau Python untuk memformat kode Python Anda.
Gunakan gaya kode yang konsisten
Seperti yang telah Anda lihat, Anda dapat menyesuaikan pengaturan pemformat. Jika Anda bekerja sebagai tim, pastikan Anda memiliki konfigurasi yang sama untuk membuat gaya kode yang konsisten. Pendekatan terbaik adalah membuat file .prettierrc.extension untuk menyertakan semua konfigurasi proyek Anda.
Gunakan linter
Anda dapat menggunakan linter untuk memeriksa pelanggaran gaya, kesalahan sintaksis, dan kesalahan pemrograman dalam kode Anda. Menggabungkan linter dengan pemformatan otomatis akan menghemat banyak waktu dan tenaga Anda dalam membuat kode Anda dapat dibaca dan di-debug.
Manfaatkan pintasan keyboard
VS Code memiliki ratusan pintasan untuk menghemat waktu Anda dalam memformat. Anda bahkan dapat menyesuaikan perintah ini menjadi sesuatu yang mudah diingat.
Periksa kode Anda sebelum melakukan
Meskipun linting dan pemformatan otomatis dapat memperbaiki beberapa masalah pada kode Anda; Anda masih harus meninjau kode Anda sebelum memasukkan perintah komit.
Pintasan Pemformatan Kode
VS Code adalah editor kode multiplatform yang dapat Anda gunakan di sistem berbasis Windows, Mac, dan Linux seperti Ubuntu. Anda dapat menggunakan pintasan berikut untuk memformat seluruh dokumen atau area yang disorot khusus pada kode Anda;
Windows
- Kombinasi Shift + Alt + F memformat seluruh dokumen.
- Kombinasi Ctrl + K, Ctrl + F memformat bagian dari kode Anda yang telah Anda pilih. Misalnya, seorang div.
macOS
- Kombinasi Shift + Option + F memformat seluruh dokumen.
- Kombinasi Ctrl + K, Ctrl + F memformat bagian dari kode Anda yang telah Anda pilih. Misalnya, seorang div.
Ubuntu
- Kombinasi Ctrl + Shift + I memformat seluruh dokumen.
- Kombinasi Ctrl + K, Ctrl + F memformat bagian dari kode Anda yang telah Anda pilih. Misalnya, seorang div.
Namun, perhatikan bahwa beberapa pintasan ini mungkin gagal jika Anda telah menyesuaikan Kode VS Anda dengan berbagai pintasan.
Anda dapat memeriksa pintasan Kode VS Anda menggunakan langkah-langkah ini;
- Buka VS Code dan klik item File di pojok kiri atas.
- Gulir ke Preferensi
- Klik Pintasan Keyboard untuk melihat semua pintasan yang dapat Anda gunakan.
Kesimpulan
Pemformatan otomatis dapat menghemat banyak waktu saat Anda mengaktifkannya. Pilihan ekstensi akan berbeda tergantung pada bahasa yang Anda gunakan. Anda dapat menginstal beberapa pemformat kode tergantung pada bahasa pemrograman yang Anda gunakan untuk proyek Anda.
Selalu periksa dokumentasi pemformat yang Anda pilih untuk kode Anda. Ini akan memastikan Anda memahami bahasa yang didukungnya dan cara memanfaatkannya sebaik mungkin.
Lihat artikel kami tentang ekstensi VS Code terbaik yang harus digunakan pengembang.
