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:

1. 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

1. Dart Data Class Generator
2. Flutter Riverpod Snippets
3. Error Lens
4. Better Comments
5. Remove Comment
6. Advanced New FIle
7. Github Copilot
8. Dracula Official Theme (Optional)
9. Firebase Explorer
10. Versions Lens => update package hanya dengan 1 klik

Extentions untuk bekerja dengan REST API’s

1. Rest Client (send HTTP Request)
2. Thunder Client (alternativ postman)
3. Live Server (live reload )

VSCode Settings for Flutter Development

1. Fix all errors on Save
2. Format On Save
3. Bracked Pair Colorization
4. Preview Flutter UI Guides
5. Enable Sticky Scroll
6. Enable file nesting for auto-generated Dart files

• stanim: Insert a StatefulWidget with an AnimationController