Seting Visual Studio Code, Shortcuts dan Extension Untuk Flutter Development
Dalam membuat sebuah baris code, kita pasti membutuhkan code editor. Ada banyak code editor diluar sana diantaranya seperti Visual Studio Code, Android Studio, Sublime Text, dan masih banyak yang lainnya. Sebagai alternatif, kita bisa menggunakan visual Studio Code untuk ngoding flutter karena menurut saya pribadi text editor ini ringan dan dilengkapi beberapa extentions yang bisa kita download.
Shortlist yang biasa deveoper flutter gunakan:
- Quick Fix
⏺ ️MacOs : CMD + .
⏺ ️Windows : CTRL + .
Kita bisa menggunakan shortlist tersebut supaya memunculkan daftar code action, kita bisa wrap, extract, remove widget
atau bisa import file jika dibutuhkan:
2. Menampilkan Command Palette
⏺ ️MacOs : CMD + Shift + P
⏺ ️Windows : CTRL + Shift + P
Untuk menampilkan kotak pencarian yang bisa kita gunakan tiap perintahnya,
3. Cari file berdasarkan nama
⏺ ️MacOs : CMD + P
⏺ ️Windows : CTRL + P
Shortcut ini digunakan untuk membukan file di dalam project kita dengan cara mengetikan nama yang ingin anda cari
4. Dart: Menambahkan Dependenciest
Pertama, buka command pallete dan ketikan “Dart:Add Dependency” or “Dart:Add Dev Dependency
Seteleh itu akan menampilkan list pencarian dari package yang sesuai pada pub.dev
Jika kita pilih salah satu dependency diatas, makan secara otomatis keinstall dan ditambahhkan ke pubspec.yaml
5. Flutter & Dart Snippets
The Dart and Flutter Plugin berisi banyak snippert yang bisa kita gunakan untuk menambhakan beberapa widget flutter dengan mudah
Kita pasti famiiar menggunakan ini:
stless: Insert a StatelessWidget
stful: Insert a StatefulWidget
stanim: Insert a StatefulWidget with an AnimationController
6. Keyboard Shortcuts list
⏺ ️MacOs : CMD+K CMD+S
⏺ ️Windows : CTRL+K CTRL+S
Kita bisa juga custom shortcut sesuai yang kita inginkan
Extentions Visual Studio Code Untuk Flutter Development
- Dart Data Class Generator
- Flutter Riverpod Snippets
- Error Lens
- Better Comments
- Remove Comment
- Advanced New FIle
- Github Copilot
- Dracula Official Theme (Optional)
- Firebase Explorer
- Versions Lens => update package hanya dengan 1 klik
Extentions untuk bekerja dengan REST API’s
- Rest Client (send HTTP Request)
- Thunder Client (alternativ postman)
- Live Server (live reload )
VSCode Settings for Flutter Development
- Fix all errors on Save
- Format On Save
- Bracked Pair Colorization
- Preview Flutter UI Guides
- Enable Sticky Scroll
- Enable file nesting for auto-generated Dart files
stanim
: Insert aStatefulWidget
with anAnimationController