Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter

VSCode là một trong những IDE tuyệt vời để phát triển Flutter.

Sau khi đã hoàn thành các bước set up cơ bản để lập trình Flutter trên VS Code, điều tiếp theo mà bạn nên làm đó chính là làm quen các phím tắt và cài đặt thêm 1 số extension để thúc đẩy quá trình làm việc tốt nhất cho bản thân khi lập trình Flutter.

Bạn có thể xem thêm các extension hữu ích khi làm việc với Flutter được chính mentor Flutter của 200Lab tuyển chọn ở bài viết bên dưới:

[P1] Những extension cần thiết khi làm việc với Flutter trên VS Code

VS Code là 1 text editor tuyệt vời được phát triển bởi Mircosoft. Đây là một trong các công cụ được developer trên toàn thế giới yêu thích vì sự tiện lợi, dễ dùng và nó chứa hàng ngàn, thậm chí trăm ngàn các extension phục vụ cho bạn trong quá trình bạn phát triển phần mềm.

200Lab BlogTùng Đường

Do đó, trong bài viết này, mình sẽ liệt kê cho bạn các shortcuts, extensions, setting mà bạn nên sử dụng để lập trình Flutter hàng ngày. Let's go!

1. Các Shortcut (phím tắt) trong VS Code:

1.1 Quick Fix:

• MacOS: CMD+.
• Windows: CTRL+.

Sử dụng phím tắt này để chỉnh sửa ở bất kỳ đâu với trong danh sách contextual các code action. Bạn có thể sử dụng nó để wrap, extract, remove các widget,...

Hoặc import file khi cần:

Hoặc để tạo một phương thức khởi tạo (hoặc thậm chí tất cả các phương thức của data class ) từ các thuộc tính hiện có trong một class.

1.2 Show Command Palette:

• MacOS: CMD+Shift+P
• Windows: CTRL+Shift+P

Thao tác này sẽ hiển thị hộp tìm kiếm nơi bạn có thể xem tất cả các lệnh đã sử dụng gần đây và nhập để tìm kiếm các lệnh mới:

1.3 Search files by name:

• MacOS: CMD+P
• Windows: CTRL+P

Phím tắt này rất cần để mở nhanh bất kỳ file nào trong project của bạn mà không cần phải sử dụng chuột hoặc trackpad:

1.4 Dart: Add Dependencies:

Đầu tiên, bạn mở bảng lệnh và nhập "Dart: Add Dependency" hoặc "Dart: Add Dev Dependency":

Sau đó, nó sẽ hiển thị danh sách các library có thể tìm kiếm có sẵn trên pub.dev:

Bạn gõ vào ô nhập tên thư viện bạn muốn sử dụng và nhấn chọn, nó sẽ được thêm vào file pubspec.yaml và được cài đặt tự động.

1.5 Flutter & Dart snippets:

Các Dart và Flutter plugin có sẵn các đoạn code mà bạn sẽ sử dụng thường xuyên cho nên hãy ghi nhớ các cụm keyword này để tạo nhanh các class nhé!

Bạn có thể đã quen với những cú pháp bên dưới này:

• stless: Khởi tạo class StatelessWidget.
• stful: Khởi tạo class StatefulWidget.
• stanim: Khởi tạo class StatefulWidget cùng với AnimationController.

Tuyệt vời đúng không bạn vì chúng tạo ra các code soạn sẵn và tất cả những gì bạn phải làm là đặt tên cho widget của mình:

Ngoài ra, bạn cũng có thể tạo các code block phổ biến, chẳng hạn như if / else, for loops, function definitions, v.v.:

Để xem tất cả các đoạn Dart code có sẵn, check this file.

1.6 Keyboard shortcuts list:

• MacOS: CMD+K CMD+S
• Windows: CTRL+K CTRL+S

VS Code có rất nhiều shortcut. Nếu bạn muốn xem tất cả và tùy chỉnh các key binding (tổ hợp các phím), thì đây là một trong những cách sử dụng:

2. VSCode Extensions để phát triển Flutter

Sử dụng các extension phù hợp sẽ giúp bạn tiết kiệm được rất nhiều thời gian và mang lại cho bạn superpowers. Dưới đây là những mục yêu thích của team Flutter:

2.1 Dart Data Class Generator:

Khi khởi tạo các class model, bạn thường sử dụng các phương thức như copyWith(), toString(), toJson(), fromJson(), toMap(), fromMap(), ==, hashCode đúng không? Tuy nhiên việc code tay từng function trên sẽ gây mất khá nhiều thời gian và dễ xảy ra sai sót.

Thay vào đó, bạn nên sử dụng sử dụng Dart Data Class Generator để thực hiện công việc của mình:

Đặc biệt nếu bạn có các model class với nhiều thuộc tính, thì đây là cách tiết kiệm thời gian rất nhiều!

Lưu ý : cũng có một số giải pháp thay thế được gọi là Json to Dart Model - nó có cấu hình khá dễ và cũng có thể tận dụng các thư viện tạo code như Freezed và Json Serializable :

2.2 Flutter Riverpod Snippets:

Nếu bạn đang sử dụng Riverpod, thì có thể bạn sẽ nhanh chóng cảm thấy mệt mỏi khi phải tự mình gõ tất cả các provider và consumer bằng tay.

Bằng cách sử dụng extension Flutter Riverpod Snippets của Robert Brunhage, công việc này sẽ trở nên dễ dàng hơn nhiều:

Download & documentation tại đây:

• Flutter Riverpod Snippets

2.3 Error Lens:

Bạn có bao giờ thắc mắc việc mắc lỗi khi nhập cụ thể là gì không?

Error Lens chính là extension để cải thiện việc đánh dấu lỗi, đưa ra cảnh báo cho bạn:

Download tại đây:

• Error Lens

2.4 Better Comments:

Cải thiện comment code của bạn bằng cách đánh dấu các cảnh báo, ghi chú, TODO và nhiều hơn thế nữa:

Download tại đây:

• Better Comments

2.5 Remove comments:

Khá hữu ích để loại bỏ tất cả các comment mặc định khi bạn tạo một dự án Flutter mới:

Download tại đây:

• Remove Comments

6. Advanced New File

Cách thông thường để tạo file là chọn thư mục bạn muốn trong sidebar, sau đó nhấp vào "New File". Việc này quá chậm vì nó buộc bạn phải sử dụng đến chuột. Đối với các dự án lớn, việc tìm đúng thư mục có thể sẽ là một thách thức.

Advanced New File extension cho phép bạn tạo file ở bất kỳ đâu trong workspace, chỉ bằng bàn phím. Bạn có thể thực hiện điều này từ command palette sau:

Sau đó, extension sẽ sử dụng pattern matching để giúp bạn tìm thấy thư mục bạn cần khi nhập:

Cuối cùng, là nhập tên của file vào thư mục đã chọn:

Kết quà là extension sẽ tạo một file trống ở đúng vị trí và mở nó cho bạn:

Download tại đây:

• Advanced New File

3. Một số thiết lập (Settings) thêm:

Ngoài tất cả các shortcut và extension ở trên, thì ở đây mình sẽ cung cấp thêm cho bạn biết Flutter-specific setting! Chúng được thiết lập bằng cách mở Preferences: Open Settings (JSON) trong command palette:

Những thứ mình thấy hữu ích nhất là các tùy chọn để fix all errors và format code khi lưu.

3.1 Fix all errors on Save:

Chắc bạn cũng khó chịu khi sử dụng constlặp đi lặp lại:

Thay vì sửa tất cả những cảnh báo này bằng thủ công, thì chỉ cần thêm cái này vào file cài đặt của bạn:

"editor.codeActionsOnSave": {
    "source.fixAll": true
}

Và tất cả các lỗi const (cùng với nhiều lỗi khác) sẽ biến mất khi bạn sao lưu!

3.2 Format code khi Save:

Khi mình thiết lập layout trong Flutter bằng cách sử dụng các Widget, đôi khi các dòng sẽ rất dài như hình dưới:

Để khắc phục điều này, tất cả những gì chúng ta phải làm là thêm tất cả các dấu phẩy vào đúng vị trí , sau đó lưu file:

Để bật format khi lưu, hãy thêm đoạn dưới đây vào cài đặt:

{
   "editor.formatOnSave": true
}

3.3 Preview Flutter UI Guides:

Một cài đặt khác rất hay đó là previewFlutterUiGuides, nó có thể được bật lên như thế này:

{
    "dart.previewFlutterUiGuides": true
}

Với điều này, trình chỉnh sửa sẽ hiển thị một số hướng dẫn UI bên cạnh các tiện ích của team Flutter:

4. Bonus: Dart Fix

Có bao giờ bạn quay trở lại dự án Flutter mà bạn đã không động đến trong một đến hai năm và nhận thấy một loạt các cảnh báo không được dùng nữa không? ( FlatButtonvà RaisedButton!)

Đừng lo lắng, vì bạn không cần phải sửa tất cả chúng bằng thủ công. Thay vào đó, tất cả những gì bạn phải làm là chạy dart fix:

dart fix --dry-run # preview of the proposed changes
dart fix --apply # apply the changes

Xem thêm thông tin tại đây.

Kết luận

Team Flutter hy vọng tất cả các shortcut, extension và setting ở trên sẽ giúp tăng năng suất làm việc của bạn! Tất nhiên, vẫn còn có rất nhiều mẹo và thủ thuật khác mà bạn có thể tìm hiểu về VS Code.