Tips nhỏ giúp bạn cảm thấy project mình ít file đi 🤣

Code generation(gen) đã trở thành một phần thiết yếu trong hệ sinh thái của Dart/Flutter, chẳng hạn như khi các bạn xài các thư viện pub bao gồm: json_serializable, retrofit_generator, auto_route_generator,... và còn rất nhiều thư viện khác nữa đều sẽ được gen ra các file tự động theo cấu hình của file gốc. Nhờ có các công cụ gen này mà bạn tiết kiệm được rất nhiều thời gian, công sức viết code. Từ đó, bạn sẽ giảm thiểu được vô số rủi ro xảy ra.

Tuy nhiên, việc sử dụng code gen cũng có vài "nhược điểm". Và cái mà bạn sẽ thấy rõ nhất đó chính là việc project bỗng nhiên phình ra rất nhiều file (các file gen). Điều đó dẫn đến trong 1 số trường hợp bạn muốn "tìm kiếm" các file trong structure project sẽ trở nên khó khăn (ví dụ hình bên dưới).

Nói thêm một chút về quy tắc chung khi sử dụng các file gen này là các bạn không được sửa code trong file gen. Nếu các bạn để ý trong mỗi file gen thì đều có cái dòng là GENERATED CODE - DO NOT MODIFY BY HAND. Cho nên nếu bạn sửa code trong file gen thì sau mỗi lần bạn (hoặc đồng đội chung team) chạy lại câu lệnh gen thì sẽ theo quy tắc ở file chính gen lại code mới, code bạn sửa trong file gen cũng mất luôn.

Ok vậy có cách nào khiến các file được group lại với nhau và trông nó đỡ "sợ" hơn không. Câu trả lời Có 😄. Bạn chỉ cần mở project Flutter của bạn lên, trong folder .vscode bạn hãy tạo thêm giúp mình file settings.json (nếu có rồi thì khỏi tạo thêm nha).

Sau đó bạn thêm đoạn json bên dưới vào file vừa khởi tạo nhé!

{
    "explorer.fileNesting.enabled": true,
    "editor.stickyScroll.enabled": true,
    "explorer.fileNesting.expand": false,
    "explorer.fileNesting.patterns": {
        "pubspec.yaml": ".flutter-plugins, .packages, .dart_tool, .flutter-plugins-dependencies, .metadata, .packages, pubspec.lock",
        "analysis_options.yaml": " all_lint_rules.yaml",
        ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
        "*.dart": "$(capture).g.dart, $(capture).freezed.dart, $(capture).gr.dart",
    }
}

Vậy là xong. Giờ bạn có thể nhìn lại các file gen đã được group theo file gốc rồi đấy 😆.

Cảm ơn bạn đã xem hết bài viết này. Mong là tip nhỏ này hữu ích với bạn.