6 Shortcut Wajib di Visual Studio Code untuk Flutter Developer

IDE (Integrated Development Environment) merupakan aplikasi yang memberikan fasilitas lengkap kepada programmer dalam proses pengembangan software. IDE bukan hanya sekedar Text editor, namun juga dapat melakukan compiler, build, debugging, dan lainnya. Khusus untuk pengembangan aplikasi Flutter, terdapat 3 IDE yang memang disarankan oleh pihak Flutter yaitu Android Studio, IntelliJ dan Visual Studio Code (VS Code). Dalam kesempatan ini kita akan fokus membahas Tips dan trik penggunaan Visual Studio Code untuk proses pengembangan aplikasi Flutter

Kenapa harus Visual Studio Code ?

Visual Studio code untuk flutter developer memiliki beberapa keunggulan dibandingkan dengan 2 IDEs lainnya yaitu aplikasi yang cukup ringan dan memilik fiture yang sangat lengkap beserta extensions yang dapat kita pilih dan diatur sesuai kebutuhkan

Sebelum memulai, harap pastikan visual studio code anda sudah terinstall dua extensi wajib untuk flutter yaitu : DART dan FLUTTER

Berikut Tips dan Trik dalam penggunaan visual studio code saat membangun aplikasi Flutter

Gunakan Shortcuts

Terdapat banyak sekali keyboard shortcuts pada VS Code, untuk memunculkan semua pilihan shortcut yang ada bisa menekan tombol CTRL + K + S atau jika anda pengguna mac dapat menggunakan ⌘ + K + S

Vscode juga menyediakan versi untuk PDF nya apabila ingin dibuat dalam bentuk printout. https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Mirip dengan penggunaan shortcut, kita juga dapat menggunakan Command Palette CTRL + Shift + P atau ⌘ + Shift + P untuk memunculkan daftar command yang pernah kita gunakan dan yang tersedia.

Penggunaan Shortcut dan Command Palette tidak terbatas pada saat pengembangan Flutter saja tapi juga berguna untuk penggunaan umum VS Code. Berikut shortcut-shortcut pilihan yang populer dalam pengembangan aplikasi Flutter menggunakan VS Code :

# Trigger Suggest

Baik bagi pemula bahkan programmer yang berpengalaman sekalipun kadang lupa dengan pilihan opsi syntax yang tersedia. Googling mungkin akan menyelesaikan masalah tapi memerlukan waktu yang cukup lama. Disini lah kegunaan Trigger Suggest atau bisa juga disebut dengan Code Assist. Pada windows tekan CTRL + Space atau jika pada mac ^ + Space untuk memunculkan opsi yang tersedia

dengan shortcut ini kita tidak perlu pusing untuk menghafal seluruh syntax yang tersedia asalkan kita paham akan cara penggunaannya.

Kita juga dapat membuat widget statefull atau stateless dengan trigget suggest. Caranya yaitu :

1. buat file baru dengan ekstensi .dart
2. ketik stless untuk membuat Stateless Widget atau stlful unutk membuat StateFull Widget

# Quick Fix

Shortcut CTRL + . atau pada mac ⌘ + . merupakan salah satu shortcut sakit karena dapat sangat membantu dalam proses pembuatan aplikasi Flutter. Dengan shortcut tersebut kita dapat Wraping widget, Extract widget menjadi variable, extract widget menjadi method, merubah stateless widget menjadi statefull widget hanya dengan satu kali klik.

Contoh Wrap Widget dengan shortcut quick fix

Menambah padding pada widget jadi lebih mudah, kita hanya perlu menekan CTRL + . dan pilih Wrap with padding

Bagi kamu yang masih manual saat merubah Stateless widget menjadi statefull widget, maka saatnya gunakan shortcut quick fix ini. hanya dengan CTRL + . dan pilih Convert to StatefulWidget dan boom selesai 🙂

Dan masih banyak lagi, silahkan coba satu persatu sendiri di komputer masing-masing.

# Rename / Refactor

Untuk merename variable secara menyeluruh, kita dapat menggunakan F2. Caranya yaitu pilih nama varibale yang ingin dirubah, tekan F2 lalu ketikan nama variable baru dan enter.

# Merapihkan Kode Flutter

Merapihkan kodingan (Beautify code) di vs code juga sangat mudah yaitu dengan menekan tombol ALT + Shift + F maka kodingan pun akan otomatis rapih kembali

# Mencari pasangan bracket

Seperti yang kita ketahui, flutter banyak sekali menggunakan bracket seperti } atau ) Apabila kita memiliki ratusan bahkan ribuan baris kode flutter maka untuk mencari pasangan bracket secara manual akan sangat sulit. Untuk mempermudahnya kita dapat menggunakan shortcut CTRL + Shift + \ jika pada mac gunakan ⌘ + Shift + \

# Go to Line …

Kita dapat langsung menuju ke nomor baris tertentu dengan menggunakan Ctrl + g atau ^ + g pada mac dan mengetik nomor baris yang dituju.

Masih banyak lagi shortcut dan trik penggunaan visual studio code, untuk tips lainnya akan coba dibahas pada kesempatan lain.