, June 27, 2022

0 kết quả được tìm thấy

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


  •   10 min reads
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.

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

Quick Fix example: wrap a widget

Hoặc import file khi cần:

Quick Fix example: import a file

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.

Quick Fix example: create a constructor for final fields

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:

Show the command palette

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:

Search files by name

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":

Add a Dart dependency to the pubspec.yaml

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:

Search packages available on 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.
"stanim" snippet to insert a StatefulWidget with an 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:

Generated boilerplate for the "stanim" snippet

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

Dart snippet to insert an if/else statement
Generated if/else statement

Để 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:

Show all the keyboard shortcuts

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:

Using the quick fix shortcut to generate a data class
Generated data class code

Đặ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:

Riverpod snippet to create a stateless consumer
Generated ConsumerWidget boilerplate

Download & documentation tại đây:

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:

Error lens extension in action

Download tại đây:

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:

Highlighted comments with the Better Comments extension

Download tại đây:

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:

Removing all single line comments with the Remove Comments extension

Download tại đây:

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:

Selecting the Advanced New File extension

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:

Advanced New File: folder selection

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

Advanced New File: choosing the file name

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

Advanced New File: file created

Download tại đây:

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:

Preferences: Open Settings via Command Palette

Những thứ mình thấy hữu ích nhất là các tùy chọn để fix all errorsformat 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:

Linter warnings due to missing const constructors

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:

Sample code with long lines

Để 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:

Formatted code after saving the 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:

Preview Flutter UI Guides in action

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? ( FlatButtonRaisedButton!)

Đừ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.

Bài viết liên quan

[Phần 1] 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....

[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code
Fix lỗi Flutter 3 không thể build app trên iOS

Cách fix lỗi Flutter 3 không thể build và run được app trên iOS với video hướng dẫn chia tiết...

Fix lỗi Flutter 3 không thể build app trên iOS
Flutter Coding UI Speed Code

Nhận bản UI siêu đẹp nhưng làm sao để phân tích rồi code ra một cách chính xác nhất? Series này 200Lab sẽ cho bạn một góc nhìn thực tế về quá trình code UI cho app Movie Ticket....

Flutter Coding UI Speed Code
Flutter 3 - Những cập nhật mới có gì hot

Bài viết này cung cấp cho bạn những thông tin cập nhật mới nhất của Flutter 3, giúp bạn có cái nhìn tổng quan về các thay đổi và tính năng bổ ích...

Flutter 3 - Những cập nhật mới có gì hot
Mọi thứ bạn cần biết về Route Transition của Flutter

Chúng ta cũng có thể kết hợp nhiều transition để tạo ra thứ gì đó tuyệt vời như scale và rotate cùng một lúc....

Mọi thứ bạn cần biết về Route Transition của Flutter
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.