Trik Membuat Struktur Code Rapi Secara Otomatis Hanya 1 Detik di Visual Studio Code
Saat kita membuat suatu program dengan kode atau skrip dalam bahasa pemrograman (coding), tak jarang struktur coding-an yang kita buat terkesan tidak rapi. Misalnya baris yang tidak sama, ada kode yang terlalu menjorok ke dalam, dan ada yang menjorok keluar. Tentu saja hal ini membuat kita risih secara psikologis dan dapat memengaruhi mood kita dalam membuat program tertentu. Bukan hanya itu, struktur coding yang tidak rapi dapat menyebabkan kita kesulitan membaca dan memahami penyusunan program yang dilakukan. Hal ini akan berdampak pada kesulitan kita menganalisis apabila ada eror yang terjadi.
Tutorial ini sangat cocok bagi yang baru memulai belajar pemrograman ataupun yang sudah expert sekalipun. Output dari tutorial ini dapat bermanfaat secara berkelanjutan dan permanen. Selain itu, dalam artikel ini terdapat beberapa pokok pembahasan. Poin-poin pokok pembahasan di artikel ini disajikan dalam daftar isi berikut.
Daftar Isi
1. Menyiapkan text editor Visual Studio Code
2. Apa itu prettier?
3. Menginstal ekstensi prettier
4. Konfigurasi ekstensi prettier di Visual Studio Code
5. Menguji ekstensi prettier
6. Penutup
Agar tutorial ini dapat berjalan dengan baik, diperlukan suatu persiapan. Persiapan tersebut dilakukan dengan menyiapkan sebuah text editor yaitu Visual Studio Code (VSCode). Pasalnya, cara ini hanya akan berlaku pada Visual Studio Code (VSCode) saja.
1. Siapkan text editor Visual Studio Code
Seperti pernyataan sebelumnya, yang harus kita persiapkan adalah aplikasi text editor untuk meng-coding nanti. Kali ini kita memakai VSCode, karena aplikasi ini cukup populer di kalangan programmer. Jika belum memiliki aplikasinya, maka harus menginstal terlebih dahulu melalui website VSCode.
Note: Saat ini VSCode tersedia untuk OS Windows, Mac, dan Linux
Pastikan saat instal VSCode nya disesuaikan dengan sistem operasi (OS) pada laptop atau Personal Computer (PC) masing-masing.
2. Apa itu Prettier?
Prettier merupakan extension code formatter yang dapat mengatur struktur coding agar terlihat rapi. Prettier berfungsi untuk merubah bentuk struktur coding yang kita buat menjadi bentuk yang mudah dipahami dan konsisten. Beberapa syntax yang support dengan ekstensi ini yaitu Javascript, JSX, Flow, Typescript, CSS, LESS, SCSS, JSON, JSX, HTML, Vue, Angular HANDLEBARS, Ember, Glimmer, YAML, GraphQL dan Markdown.
Hanya menggunakan satu ekstensi ini, kita tidak perlu merapikan struktur coding secara manual dan satu per satu. Ekstensi prettier ini juga cukup populer, sampai saat ini sudah 27 juta orang lebih yang menggunakan ekstensi ini.
3. Menginstal Ekstensi Prettier
Cara menginstal ekstensi prettier ini cukup klik tombol install berwarna biru. Terkadang ada beberapa kasus, di mana setelah diinstal, muncul perintah agar laptop atau PC di-restart melalui tulisan“reload required”. Jika menemui perintah tersebut, maka langsung restart saja. Namun, jika tidak menerima perintah tersebut, jangan khawatir, ekstensi prettier berarti sudah terinstal aman.
Setelah diinstal, ekstensi ini masih belum bisa digunakan. Pasalnya, masih ada konfigurasi yang perlu dilakukan.
4. Konfigurasi Ekstensi Prettier di Visual Studio Code
Ketika prettier sudah terinstal, selanjutnya adalah melakukan konfigurasi. Tujuannya agar ekstensi prettier ini dapat berjalan sempurna di VSCode. Berikut adalah langkah melakukan konfigurasi prettier di VSCode:
- Klik ikon gerigi (manage) di sebelah tombol uninstall. Kemudian klik extension settings.
- Lalu scroll ke bawah dan cari menu print width. Tujuannya agar ketika menyimpan code kita, formatnya tidak terlalu rapat atau dempet. Agar formatnya tidak terlalu rapat, maka nilai angkanya harus diperbesar. Sebenarnya ini sesuai selera saja. Misalnya menggunakan angka 240.
- Selanjutnya scroll ke bawah lagi, memastikan menu semi sudah tercentang dan menu space-nya bernilai 2.
- Kemudian ketik “format on save” di kolom pencarian, lalu centang kotaknya. Tujuannya, agar ketika kita klik Ctrl+S pada keyboard, coding-an kita akan otomatis rapi.
- Satu lagi, ketik “default formatter” di kolom pencarian. Scroll dan cari menu default formatter. Setelah itu klik prettier-vscode.
- Konfigurasi sudah selesai.
5. Menguji Ekstensi Prettier
Bagaimana cara memastikan bahwa konfigurasi prettier telah berhasil dan siap digunakan? Untuk menjawab pertanyaan tersebut, maka kita perlu melakukan pengujian terhadap esktensi ini. Pengujian dapat dilakukan dengan membuat atau menyalin code yang sangat banyak dan tidak rapi. Sebagai contoh, dalam artikel ini akan melakukan pengujian ekstensi menggunakan bahasa pemrograman HTML.
Selanjutnya, cukup klik Ctrl+S. Maka hasilnya, struktur code yang tidak rapi ini akan menjadi rapi dan konsisten.
Bagaimana, cukup mudah bukan? Selanjutnya, ekstensi ini bisa digunakan seterusnya dan permanen. Cukup klik Ctrl+S, maka struktur coding-an kita akan otomatis rapi.
6. Penutup
Jadi, itulah cara merapikan struktur coding-an yang ada di Visual Studio Code secara otomatis. Semoga cara ini bisa bermanfaat dan dapat diterapkan dengan mudah dan efisien saat kita membuat suatu program nanti. Sekian, terima kasih.
Tutorial ini dapat juga dilihat melalui video Youtube berikut
Referensi
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
Opinionated Code Formatterprettier.io
Penulis : Iki Adfi Nur Mohamad