Plugin dan Fitur Pendukung untuk Flutter Pada Visual Studio Code

Sudah hampir setengah tahun saya mempelajari Flutter untuk pengembangan mobile app, baik untuk android ataupun iOS, terlebih lagi Flutter telah berada pada versi beta untuk pengembangan web dan desktop. Selama mempelajari fitur-fitur flutter, saya lebih memilih menggunakan Visual Studio Code sebagai editor daripada menggunakan Android Studio. Saat menggunakan Vs. Code, terdapat beberapa plugin yang mempermudah penulisan sehingga proses pengembangan aplikasi menjadi lebih lancar. Berikut adalah plugin yang harus ada untuk versi saya sendiri.

pada Visual Studio Code terdapat shortcut keyboard yang membantu pengembangan yang mungkin kamu belum tahu. Silahkan baca pada Keyboard Shortcut untuk Pengembangan Aplikasi Flutter di Visual Studio Code

Saya jugasedang membuat panduan flutter melalui website saya sendiri. Jika tertarik, silahkan kunjungi kursusflutter.com

Flutter + Dart

Ini wajib ada sih, kalau tidak menginstall plugin ini, flutter tidak akan bisa berjalan lancar di Vs. Code. Bisa dilihat pada dokumentasi resmi flutter.

Pubspec Assist (by Jeroen Meijer)

Ini yang termasuk paling membantu. Biasanya saat ingin menginstall sebuah package/dependency baru, tentunya search pada web pub.dev kemudian mengetikkan nama dependency, menuju tab install untuk menemukan versi, kemudian copy lalu paste ke pubspec.yaml. Dengan pubspec assist ini, kita tidak perlu meninggalkan editor untuk menemukan sebuah dependency. phew, waktu menjadi lebih efisien.

Dart add Dependency

Pada update terbaru, dart dan flutter sudah mendukung built-in add dependency tanpa plugin luar dengan menggunakan dartt: add dependecies yang dapat diakses melalui Command Palette > Add dependency.

Prettier — Code formatter ( By Esben Petersen )

Prettier membantu dalam menformat ulang kode yang telah dibuat agar menjadi lebih rapi. Secara default, flutter akan memformat baris yang panjangnya lebih dari 80 karakter. Bersama dengan plugin ini, ada plugin dan fitur lain yang akan sangat membantu saat menuliskan program flutter di Vs. Code, tetap baca sampai akhir ya.

Bracket Pair Colorizer 2 ( By CoenraadS )

Flutter memiliki banyak buka-tutup kurung ataupun buka-tutup kurung kurawal. Saat widget sudah dibuat bertingkat-tingkat, akan sangat sulit menemukan pasangan dari satu buah tanda kurung. Beruntungnya, ada Bracket Pair ini membuat rasa sakit untuk menemukan pasangan menjadi berkurang :D

bracket pair colorizer vs indent-rainbow by oderwat

terdapat plugin lain bernama indent-rainbow pada vs. code, kedua plugin ini sama-sama memberikan bantuan untuk menemukan item dalam sebuah bracket ( kurung ) ataupun menemukan pasangan tanda kurung. Namun dalam penggunaannya, saya merasakan indent-rainbow memberikan waktu load yang lebih lama dan sedikit merasa berat saat menggunakan. Tapi boleh dicoba salah satu dari kedua plugin ini ataupun menggunakan keduanya sekaligus.

Icon Theme

Untuk icon theme, bisa menggunakan vs-code-icon, material icon theme. fungsinya disini merubah icon folder dan file sesuai dengan ekstensinya.

Better comments (By Aaron Bond)

Better comment ini membuat beberapa versi komentar dan dapat memperlihatkan perbedaan dari setiap komentar. Sangat berguna jika sedang melakukan sebuah fitur yang akan ditunda sementara, seperti menggunakan TO DO sebagai pengingat.

Todo tree (by Gruntfuggly)

To do tree ini memberikan sebuah ruang panel navigasi sehingga semua item yang kita buat, terdaftar pada sisi navigasi. Hanya perlu klik ke judul spesifik untuk menuju ke baris kode yang kita inginkan

Color Highlight (by Sergii Naumov)

plugin ini memberikan referensi dari warna yang akan kita gunakan. pugin ini memberikan icon warna pada sisi editor. Selain plugin ini, terdapat juga plugin yang memberikan warna pada kode rgb. Namun sepertinya belum support untuk flutter yang menggunakan kode hex dengan opacity.

Image Preview (by Kiss Tamás)

Dengan menggunakan plugin ini, sebuah assets image dapat ditampilkan thumbnailnya pada sisi editor. cukup membantu jika menggunakan banyak assets agar tidak tertukar saat menuliskan nama file.

Numbered Bookmark (by Alessandro Fragnani)

Saat UI sudah sedikit rumit, mungkin bisa mencari ratusan baris kode, untuk berpindah dari satu bagian ke bagian lain memerlukan scroll panjang, apalagi jika penempatan kode satu yang sedang dikerjakan ada diakhir, dan blok fungsinya ada di tengah. Demage jika terlewat saat scroll cukup menyakitkan. Nah dengan plugin ini, kita dapat meloncat dari baris kode satu ke kode lain dengan kombinasi tombol keyboard. Plugin ini juga bisa digunakan untuk meloncat dari satu baris kode pada file tertentu ke baris lain pada file berbeda.

Cara penggunaannya adalah dengan memasang bookmark terlebih dahulu pada satu baris dengan kombinasi tombol ( command pada mac atau ctrl pada windows/linux) + shift + ( pilihan angka 1–0 ) dan untuk berpindah langsung dengan menggunakan kombinasi command/ctrl + nomor angka yang ditetapkan. Hanya saja pada mac seperti terganggu untuk kombinasi SS atau Record screen.

GitLens — Git supercharged ( By Eric Amodio )

Gitlens ini berguna saat berkolaborasi menggunakan tools seperti git. Kita dapat mengetahui bagian kode tertentu ditulis oleh siapa dan kapan diberikan pembaruan terakhir. Mungkin bisa membantu saat melakukan merge atau tracking fitur kepada yang membuat bagian kode program. Tentunya ini tidak hanya bisa digunakan pada flutter, digunakan pada semua project yang menggunakan git.

Error Lens by Alexander

Erorr Lens dapat memberikan pesan kesalahan pada baris yang bersangkutan, meskipun terkadang pesannya adalah berdekatan dengan posisi kesalahan. Ini tergantung bagaimana cara menuliskan kode pemrograman

Version Lens by pflannery

bekerja pada project lawas dan ingin melihat apakah versi dependency sudah yang terbaru? plugin vs code untuk flutter ini mungkin bermanfaat untuk melihat apakah tersedia versi terbaru

Dart Data Class Generator by hzgood

setiap membuat class model di flutter, seringkali kita memerlukan beberapa metode seperti toJson(), fromJson, copyWith() dan method lain. terdapat ekstensi yang bisa membantu untuk generate secara otomatis diantaranya adalah Dart Data Class Generator.

Json to Dart Model by hirantha

terdapat juga ekstensi lain yang memiliki fungsi yang sama, namun mempunyai kemampuan dengan akses ke library freezed atau ke Json Serializable yang sering digunakan pada pembuat model.

BONUS

ada beberapa fitur yang berguna seperti plugin, namun fitur ini ada pada setting dari vs. code. Untuk mengaksesnya, klik icon gear pada bagian pojok kiri bawah dari navigasi vs code.

Auto Format on Save

Format on save ini mengefisienkan waktu setelah menulis kode panjang. Normalnya setelah menulis sebuah kode, kita akan klik kanan kemudian reformat dengan prettier, atau melalui kombinasi command + alt + f setelah itu menyimpan dengan command + s. Dengan mengaktifkan fitur ini, kita cukup menyimpan berkas kemudian baris kode akan terformat otomatis.

Flutter UI guides

Ini adalah yang paling saya sukai karena paling terbantu dengan fitur ini. Flutter UI Guides ini memberikan garis penunjuk pada setiap widget yang dibuat, sehingga lebih terlihat memiliki struktur dan menunjukkan child ataupun children dari setiap widget. Ini juga bermanfaar jika dipasangkan dengan bracket pair plugin. Tampilannya akan jadi seperti ini setelah diaktifkan.

Extra : Move Bottom Panel to the side.

Seperti yang dibahas sebelumnya, flutter akan memformat kode yang melebihi 80 karakter pada setiap baris. artinya, akan banyak ruang kosong pada sisi kanan editor. Nah, space ini dapat dimanfaatkan untuk tampilan terminal ataupun debug console. memang membutuhkan sedikit adaptasi untuk menggunakan bagian ini. Untuk mengaktifkannya dilakukan dengan cara dibawah ini.

Plugin diatas adalah plugin yang saya gunakan saat mempelajari dan mengembangkan aplikasi. Awalnya saya juga mendapatkan plugin tersebut dari penggunaan di bahasa lain. Ada yang merupakan saran dan rekan kantor. Ada juga yang saya dapatkan saat penasaran mencari tools yang dapat membantu mempermudah pekerjaan. Ada juga yang saya temukan saya mencari referensi untuk tulisan ini.

saat ini hal yang kurang bagi saya adalah auto format import saat melakukan rename atau memindahkan file ke folder lain seperti halnya pada android studio. Namun sepertinya pada flutter versi 1.17 sudah ditambahkan fitur ini, namun saya belum mencobanya.

Mungkin sekian sedikit sharing pada artikel ini. Semoga tulisan ini dapat membantu teman-teman dalam menggunakan vs code untuk pengembangan aplikasi mobile dengan flutter.

Happy Flutter