--- title: "[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code" description: "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." canonical: "https://200lab.io/blog/nhung-plugin-can-thiet-khi-ban-lap-trinh-voi-flutter-tren-vs-code" published: "2022-05-27T09:09:30Z" updated: "2026-08-21T07:17:57Z" authors: ["Tùng Đường"] tags: ["Flutter", "Dart", "Mobile"] reading_minutes: 3 access: "public" --- [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. Vì vậy trong bài viết này, mình sẽ cung cấp cho anh em 1 số extension mà mình thấy rất hiệu quả đối với mình trong lúc mình lập trình các ứng dụng Flutter. ## 1. Aura Theme: ![(Link: https://marketplace.visualstudio.com/items?itemName=DaltonMenezes.aura-theme)](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-14-55-21-013a3ad5de9929a8937b.webp) Đối với một đứa thích Dark Theme và màu sắc bắt mắt như mình thì mình cực thích cái extension này. Nó giúp mình highlight các biến, tên hàm, tên class khá là đẹp. Bạn có thể sử dụng với bất kỳ ngôn ngữ hoặc framework nào không chỉ riêng Flutter hoặc Dart. ![](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-14-57-46-49fd4bc9a37cb2d73a03.webp) ![](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-02-08-22bb57d146e13f6637f1.webp) À extension này mình thấy lượt cài không cao so với các Theme khác, một phần là nó chỉ mới release vào giữa năm 2020 mà thôi, mọi người cứ cài trải nghiệm thử nha! ## 2. Bracket Pair Colorizer: ![](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-08-06-b94fe785e3954ee56c71.webp) Đối với code theo dạng Tree như Flutter, phải mở ngoặc, đóng ngoặc khá nhiều chỗ, đôi khi việc phân biệt cái cặp ngoặc nào đi với nhau khá là khó chịu. Do đó, mình đánh giá extension Bracket Pair Colorizer này nó khá là "fit" để code Flutter luôn ấy 😆. Bạn chỉ cần rê chuột đến bất kỳ dấu "(", "{" bất kỳ thì chương trình sẽ tự động detect cho chúng ta cặp đóng tương ứng. ![](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-21-47-81b5dc81c2d670377c3f.webp) ## 3. Material Icon Theme: ![](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-37-09-a80d0f1b59517c02765c.webp) Với hơn 100+ icon của đa số các ngôn ngữ lập trình hoặc định dạng file phổ biến trên thế giới, sẽ thật thiếu nếu bạn không cài extension này vì mình có thể phân biệt nhanh các file, folder trong project của chúng ta. Xem ảnh ví dụ bên dưới nhé! ![](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-44-27-b24d80fa1c77d87bcde2.webp) ## 4. Dart Data Class Generator: ![(Link: https://marketplace.visualstudio.com/items?itemName=hzgood.dart-data-class-generator)](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-46-55-f954f7ae51b119c8b33f.webp) Với extension này, bạn sẽ tiết kiệm được rất nhiều thời gian trong việc phải tạo tay các function cần thiết trong quá trình khởi tạo 1 class bất kỳ ví dụ như constructor, operator ==, toString() function,.... chỉ với.....1 click. Bạn xem clip demo bên dưới để hình dung nó ra sao nhé! ![](https://assets.200lab.io/images/2024/12/05/gif-from-class-124f641d3ebcf6f4e981.webp) ## 5. vscode-faker: ![(Link: https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker)](https://assets.200lab.io/images/2024/12/05/screen-shot-2022-05-27-at-15-59-05-37d78ec16f82752c5e41.webp) Bạn đau đầu vì mất thời gian suy nghĩ ra fake data, hãy để chuyện đấy cho extension này xử lý cho bạn, việc của mình là cài đặt rồi sử dụng mà thôi 😆. Bạn để ý ở hình trên thì danh sách các category mà extension này hỗ trợ khá là nhiều và đa dạng đúng hem ^^. ### Lời kết Và ở trên là danh sách 5 extension mình sử dụng hằng ngày, còn rất nhiều extension khác nữa các bạn hãy đợi phần tiếp theo nha ^^. ## Đọc thêm - [Tự học Dart: Các Dart Operators (toán tử) bạn cần biết](https://200lab.io/blog/tu-hoc-ngon-ngu-dart-toan-tu-operator.md): Cập nhật nhanh các toán tử - operator quan trọng trong Dart để có thể sử dụng ngôn ngữ này một cách hiệu quả nhất nhé. - [Flutter cơ bản: Điều cần biết khi lập trình ứng dụng đầu tiên](https://200lab.io/blog/flutter-co-ban-xay-dung-ung-dung-dau-tien.md): Flutter là framework hữu ích khi phát triển ứng dụng đa nền tảng. Hãy bỏ túi các kiến thức Flutter cơ bản để bắt đầu hành trình học hỏi của bạn. - [Dart là gì? Giới thiệu cơ bản về ngôn ngữ lập trình Dart](https://200lab.io/blog/tu-hoc-ngon-dart-nhung-dieu-can-biet-truoc-khi-bat-dau.md): Dart là gì? Vì sao bạn cần học ngôn ngữ lập trình Dart để phát triển ứng dụng đa nền tảng? Cùng tìm hiểu những kiến thức cơ bản về Dart trong bài viết này nhé! - [Flutter là gì? Vì sao nên học công cụ lập trình Flutter?](https://200lab.io/blog/flutter-la-gi.md): Flutter là gì? Vì sao bạn cần học lập trình Flutter để phát triển ứng dụng đa nền tảng? Cùng tìm câu trả lời qua bài viết này nhé! - [Flutter cơ bản: Widget Tree, Element Tree & Render Tree](https://200lab.io/blog/flutter-co-ban-widget-tree-element-tree-render-tree.md): Flutter cơ bản đến nâng cao không khó. Để 200Lab Blog cập nhật cho bạn những thông tin mới nhất về Widget Tree, Element Tree và Render Tree nhé. - [Mọi bài viết chủ đề Flutter](https://200lab.io/blog/tags/flutter.md) Toàn bộ nội dung: https://200lab.io/llms.txt