Flutter — Tổng hợp phím tắt Visual Studio để lập trình nhanh và hiệu quả hơn
Có thể nói, phím tắt giúp đỡ chúng ta rất nhiều trong quá trình lập trình, đặc biệt là khi bạn phải làm việc với rất nhiều code và bạn phải tìm dấu mở ngoặc, đóng ngoặc, hoặc bạn phải thêm một widget mới hoặc xóa một widget. Thời gian là quý giá và tôi thấy những phím tắt này giúp tôi rất nhiều. Tôi trở thành fan hâm mộ của VS Code chủ yếu vì nó nhẹ và nhanh hơn nhiều so với các IDE khác mà tôi đã làm việc, và VS code cũng có rất nhiều tính năng và tùy chỉnh cùng với các tiện ích mở rộng có thể làm nên điều kỳ diệu (Đây chỉ là ý kiến cá nhân của tôi).
Nếu bạn sử dụng Android Studio và IntelliJ trong Windows, bạn nên xem qua bài viết tuyệt vời này, hay nếu bạn sử dụng mac, tôi khuyên bạn nên đọc bài viết này.
Trước hết tôi hy vọng bạn đã bật Dart và Flutter Extensions, nếu không bạn có thể tải chúng từ đây: Dart và Flutter
Bây giờ, hãy để nhảy vào các phím tắt và xem tất cả những điều kỳ diệu chúng ta có thể làm.
Keyboard Shortcut List
Trước tiên, tôi sẽ cung cấp cho các bạn phím tắt để có được tất cả các phím tắt.
Tôi không thể giải thích tất cả các phím tắt mặc định trong bài viết này vì danh sách rất lớn. Bạn có thể tìm thấy danh sách các phím tắt mặc định và cũng có thể tìm kiếm các phím tắt bằng cách sử dụng CTRL + K + S như bên dưới:
Hoặc bạn cũng có thể dùng Ctrl+Shift+P để hiển thị Bảng lệnh với các lệnh được sử dụng gần đây hoặc cũng để tìm kiếm các lệnh.
Hoặc bạn có thể in ra tất cả các phím tắt bàn phím VS Code mặc định từ đây. Bạn có thể lấy danh sách chính thức phím tắt tùy chỉnh của Dart từ đây và flutter vs code extension documentation.
Code Assist hoặc hoàn thiện code
Khi code, một công cụ quan trọng, đặc biệt cho người mới bắt đầu hoặc là khi bạn gặp khó khăn ở đâu đó và muốn kiểm tra các sự lựa chọn, bạn có thể dùng phím tắt Ctrl+Space để có danh sách có gợi ý tùy chọn hoàn thành code.
Quick fix hay “chiếc đũa thần kỳ”
Để code nhanh hơn trong Flutter, bạn có thể sử dụng công cụ sửa lỗi nhanh với Ctrl+., nó giúp sửa code với một số yêu cầu bổ sung mà không làm rối code của bạn hoặc cấu trúc widget của bạn và giúp bạn bớt đau đầu hơn trong việc sửa thủ công mọi thứ. Hãy cùng xem một số ví dụ.
Quick Fix Options
Như bạn có thể thấy bên dưới, khi trên bất kỳ widget nào, bạn có thể nhấp Ctrl+.để tìm các tùy chọn sửa chữa nhanh chóng.
Hãy khám phá từng menu item một:
1. Trích xuất biến cục bộ
Bạn có thể trích xuất một widget hiện có và biến nó thành một biến cục bộ và thật kỳ diệu, widget sẽ được thay thế bởi biến đó, bất cứ nơi nào nó được sử dụng.
2. Phương pháp trích xuất
Điều gì sẽ xảy ra nếu bạn có rất nhiều code và bạn muốn chia thành các phương pháp khác nhau. Nó thậm chí sẽ cung cấp cho bạn một tên được tạo cho bất kỳ đoạn code nào bạn muốn tách.
Nhưng tôi sẽ khuyên bạn không nên chia các widget thành các method, thay vào đó bạn nên tạo một class mới vì nó có nhiều ảnh hưởng đến hiệu năng, bạn có thể tham khảo bài viết này để biết sâu về lý do tại sao các widget không nên được chia thành các method. Bạn có thể làm điều này dễ dàng bằng cách sử dụng menu tiếp theo.
3. Trích xuất Widget
Điều này có thể rất có ích nếu bạn muốn chia các widget của mình thành các widget nhỏ hơn. Hy vọng bây giờ bạn biết về tầm quan trọng của việc chia nhỏ các widget thành các widget nhỏ hơn và nó ảnh hưởng đến hiệu suất.
Chỉ cần nhấp vào bất kỳ widget nào và sau đó nhấp Ctrl+.và nhấp vào Extract Widget ,đặt tên cho widget mới và nhấp vào Enter.
4. Từ StatelessWidget đến StatefulWidget
Nói thế này, bạn muốn một StatefulWidget, nhưng quy trình chỉ đem đến cho bạn mộtStatelessWidget, tuy nhiên có một cách cực ngầu để chuyển một StatelessWidget thành mộtStatefulWidget, có thế nói đến đây thì bạn đã đoán ra rồi…
Vâng, bạn chỉ cần click vào StatelessWidget và click Ctrl+. Và… Tada~ bạn sẽ nhận được một optionConvert to StatefulWidget Click vào nó và đó là cách mà bạn sẽ phải làm.
5. Thêm padding
Thêm padding vào môt widget đang có dễ hơn nhiều với việc dùng quick assist tool. Chỉ cần chọn Add padding và bạn sẽ có thể lấy padding xung quanh widget mà không làm hỏng cấu trúc của widget của bạn.
6. Center Widget
6. Wrap một widget với Column, Container, Row, StreamBuilder, hay một Widget mới
Bạn có thể sử dụng kỹ thuật tương tự này wrap một widget mà bạn muốn với một column, container, row, stream builder hay bất kỳ widget nào khác hoặc thậm chí là widget tùy chỉnh, để biến nó thành widget mẹ của widget mà bạn muốn.
Nhưng không giống như cùng một công cụ trong studio android, bạn không thể chọn nhiều widget để theo một cột, vì hiện tại tính năng này không có sẵn.
Bạn cũng có thể wrap widget với widget khác hoặc một widget tùy chỉnh
Phím tắt riêng của Flutter — Tạo Stateful hoặc Stateless Widget
Cũng có một số phím tắt của riêng Flutter, có thể cung cấp cho bạn một số đoạn code soạn sẵn để có thể làm việc trên đó. Bạn có thể gọi chúng bằng cách gõ các tiền tố, nếu menu không hiển thị popup, hãy gõ Ctrl+space sau khi gõ tiền tố.
- Tiền tố
stless: Tạo ra một subclass mới củaStatelessWidget.
- Tiền tố
stful: Tạo một subclass mới của mộtStatefulWidgetvà liên quan đến State Subclass
- Tiền tố
stanim: Tạo một subclass mới củaStatefulWidget,và nó liên quan đến State subclass bao gồm một trường được khởi tạo với mộtAnimationController.
Hierarchy (hệ thống cấp bậc)
Để nhìn hệ thống cấp bậc của các class, ấn F4 trên bất kỳ widget nào và chỉ trong vài giây bạn có thể nhìn được hệ thống cấp bậc của widget đó.
Phím tắt trong khi code
Lựa chọn nhấp chuột
Điều này rất phổ biến và thường được sử dụng trong bất kỳ trình soạn thảo nào, bạn có thể chọn bất kỳ từ nào bằng cách nhấp đúp vào nút chuột trái trên từ đó và bạn có thể chọn toàn bộ dòng bằng cách nhấp vào nút chuột trái 3 lần liên tiếp
Xem Source Code
Bạn có thể dễ dàng nhìn thấy phía sau tấm màn của bất kỳ widget nào và biết nó đang hoạt động hoặc thậm chí tìm ra lý do của lỗi mà bạn đang gặp hoặc tìm được các tham số bắt buộc bằng các truy cập vào Source Code của widget và đọc, Flutte cung cấp tài liệu chi tiết dưới dạng comment trong source code và có thể giúp bạn giải quyết vấn đề nhanh hơn. Rất dễ để có thể xem source code, bạn chỉ cần nhấn vào nút ctrl vàClick chuột trái vào bất kỳ widget nào để đến file source của nó. Hoặc bạn có thể dùngF12 khi trỏ chuột đến widget
Cut hoặc Copy & paste một dòng lệnh
Bạn có thể cắt 1 dòng bằng phím Ctrl+x hoặc copy 1 dòng bằng phím Ctrl+c khi trỏ chuột vào bất kỳ điểm nào của dòng lệnh đó. Sau đó bạn có thể dùng phímCtrl+v để paste
Đi đến một dòng với số thứ tự
Bạn có thể đi đến một dòng bất kỳ bằng phímCtrl+g và gõ số thứ tự của dòng
Di chuyển một dòng/ đoạn đã chọn đi lên hoặc đi xuống
Bạn có thể di chuyển một dòng đơn bằng cách click bất kỳ vào dòng đó, sau đó clickAlt+↑ hoặcAlt+↓ bạn có thể di chuyển dòng đã chọn xuống hoặc lên từng hàng từng hàng một.
Hoặc bạn có thể di chuyển một đoạn đã chọn theo cách tương tự:
Tương tự, bạn có thể sử dụng tổ hợp phímShift+Alt+↑ hoặcShift+Alt+↓ để copy một dòng/ đoạn của các dòng lên hoặc xuống.
Mở rộng/ thu hẹp khoảng bôi đen
Chúng tôi luôn bắt gặp những đoạn code dài, để bôi đen hết đoạn code, ta có những phím tắt như sau. Đầu tiên, nhấp vào một trong hai dấu ngoặc bắt đầu hoặc dấu ngoặc nhọn kết thúc, sau đó nhấp Shift+Alt+→ và tất cả những thứ bên trong các dấu ngoặc đó sẽ được chọn, bạn có thể tiếp tục nhấn Shift+Alt+→ để mở rộng vùng chọn hơn và bạn cũng có thể thu nhỏ lựa chọn bằng cách sử dụng Shift+Alt+←
Tìm dấu mở ngoặc, đóng ngoặc tương ứng
Bạn có thể tìm thấy dấu mở ngoặc/đóng ngoặc tương ứng trong một cặp dấu bằng cách dùng phím tắtCtrl+Shift+\
Dễ dàng theo dõi các bước của bạn
Khi phải code trên nhiều file khác nhau, đôi khi chúng ta có thể quên mất cách ta đã làm để có được đoạn code như hiện tại. Bạn có thể dễ dàng theo dõi các bước của mình bằng cách sử dụng Alt+← để xem tất cả code bạn đã đi qua để đến được bước này, bạn cũng có thể sử dụng Alt+→ để xem theo chiều đi tới.
Chuyển file/tab
Bạn có thể dễ dàng chuyển đổi giữa các file/tab bằng cách sử dụngCtrl+Tab và sau đó bạn giữ phímCtrl và tiếp túc nhấn phímTab bạn có thể chọn được file/tab mà bạn muốn chuyển đến.
Rename/Refactor
Bạn có thể dễ dàng đổi tên bất kỳ widget nào bằng cách ấnF2 khi đang ở trên widget đó, sau đó nhập tên mới và nhấnEnter
Mở workspace mới
Nhờ Chase Adams mà tôi đã biết phím tắt tuyệt với này, bạn cần click vào terminal và đi đến vị trí có workspace, sau đó gõcode -r. và sau đó workspace đó sẽ được mở trên cửa sổ của bạn. Nếu bạn muốn mở một cửa sổ mới, dùng command code -n. và workspace sẽ được mở trên một cửa sổ VS code mới.
Code cleaning Shortcut
Để có thể viết được những đoạn code hiệu quả thường khó, và code của bạn thương hay lộn xộn do ràng buộc về thời gian, và do đó trước khi đẩy code sang git hoặc bất kỳ versioning tool nào khác, bạn sẽ muốn clean code và làm cho nó trông ổn với lượng bình luận tốt để nó có thể được bảo trì tốt và đây là một số phím tắt sẽ có ích.
Format/ Beautify code
Trong khi mã hóa, cách tốt nhất là tuân theo một formar, nhưng đôi khi chúng ta thường code theo một dòng ý tưởng và trong trường hợp không may thì chúng ta cho ra những đoạn code kiểu như thế này:
Bạn có thể dễ dàng format lại code bằng phím tắtAlt+Shift+f để sửa lỗi thụt lề và format lại code của bạn.
P.s: đừng quên dấu chấm phẩy để phím tắt này có thể hoạt động hiệu quả.
Thêm comment
Bạn có thể thêm comment của mình vào bất cứ line nào bằng cách dùngCtrl+/ , bạn cũng có thể dùng phím tắt này để hủy bỏ những comment bạn đã viết.
Bạn có thể chọn một số hàng và ấnCtrl+/ để comment trên tất cả các dòng có tiền t//hoặc Alt+Shift+a để comment lên các dòng đã chọn bằng các đặt nó vào biểu tượng /* Your — Code */ , bạn cũng có thể dùng phím tắt này để hủy bỏ những comment bạn đã viết.
Bỏ những import không sử dụng
Loại bỏ những import không sự dùng đến một phần lớn của việc dọn dẹp code và thay vì xóa từng cái một, bạn có thể trực tiếp sử dụng phím tắt để làm điều đó cho bạn. Bạn có thể dễ dàng xóa các mục nhập không sử dụng bằng Alt+Shift+o
Debugging Shortcuts
Một số debugging shortcuts có thể sẽ hữu ích:
F5- Bắt đầu DebugCtrl+F5- Bắt đầu mà không debugShift+F5- Kết thúc DebugCtrl+Shift+F5(macOS:Cmd+Shift+F5) - Restart Debugg (Hot Reload khi debug flutter app)Ctrl+F5- Hot Restart (khi debug flutter app trong phiên bản debug)F9- Chuyển đổi điểm ngắtF10- Đi quaF11- Đi vàoShift+F11- Đi ra
Tôi hy vọng tôi đã trình bày tất cả các phím tắt mà tôi có thể tìm thấy và nghĩ rằng hầu hết đều hữu ích, hãy làm theo tôi để biết thêm mẹo, thủ thuận và công cụ của Flutter. Có rất nhiều phím tắt hoặc mẹo nếu bạn đang sử dụng các tiện ích mở rộng và tôi sẽ đề cập đến nó ở những bài viết sau. Stay tuned.
Nguồn: Flutter Community
Dịch: Lecle Vietnam
ABOUT LECLE VIETNAM
LECLE is a global software — blockchain technology house headquartered in South Korea with offices in the USA, Singapore, and Vietnam.
Founded in 2014, we received an initial investment from The Ventures and went through Plug and Play’s accelerating program. Up to now, we have offered innovative solutions that are best suited to various customers in Korea. Since 2018, we have decided to shift our focus onto blockchain business while continuing to develop our outsourcing projects. Now we have been creating a blockchain platform for communities based EOS.
- Website: http://vn.lecle.co.kr/
- Facebook: https://www.facebook.com/LecleVietnam/
- Twitter: https://twitter.com/leclevn
- Linkedin: https://www.linkedin.com/company/lecle/
Please follow Lecle VietNam Blog for more information
