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.

Gambar 1. Struktur Coding HTML

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.

Visual Studio Code - Code Editing. Redefined

Gambar 2. User Interface code.visualstudio.com

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.

Gambar 3. Ekstensi Prettier — Code Formatter

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.

Gambar 4. Instal Prettier

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:

1. Klik ikon gerigi (manage) di sebelah tombol uninstall. Kemudian klik extension settings.
2. 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.
3. Selanjutnya scroll ke bawah lagi, memastikan menu semi sudah tercentang dan menu space-nya bernilai 2.
4. 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.
5. Satu lagi, ketik “default formatter” di kolom pencarian. Scroll dan cari menu default formatter. Setelah itu klik prettier-vscode.
6. Konfigurasi sudah selesai.

Gambar 5. Konfigurasi Prettier — Langkah 1

Gambar 6. Konfigurasi Prettier — Langkah 2

Gambar 7. Konfigurasi Prettier — Langkah 3

Gambar 7. Konfigurasi Prettier — Langkah 4

Gambar 8. Konfigurasi Prettier — Langkah 5

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.

Gambar 8. Struktur Code HTML yang Belum Rapi

Selanjutnya, cukup klik Ctrl+S. Maka hasilnya, struktur code yang tidak rapi ini akan menjadi rapi dan konsisten.

Gambar 9. Struktur Code HTML yang Sudah Rapi oleh Prettier

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

Video Tutorial — Trik Membuat Struktur Code Rapi Secara Otomatis Hanya 1 Detik di Visual Studio Code

Referensi

Prettier · Opinionated Code Formatter

Visual Studio Code - Code Editing. Redefined

Penulis : Iki Adfi Nur Mohamad