Skip to content

Latest commit

 

History

History
415 lines (242 loc) · 12.3 KB

File metadata and controls

415 lines (242 loc) · 12.3 KB

GitHub Copilot Tips for Flutter Devs

Did you know?

GitHub Copilot was recently updated to GPT-4.

The VSCode extension has been upgraded too, making your life easier as a Flutter dev.

But how good is it? And where does it fall short?

Here's a tour of the new Copilot AI features. 🧵


GitHub Copilot: Chat Panel

The chat panel is a new feature that lets you have a dialogue with Copilot, just like with ChatGPT.

Add the @workspace keyword to your prompt, and Copilot will use the entire project as context when answering your questions.

Quite useful when exploring a new codebase. 👍


Ask questions with @workspace

To test this, I opened a Flutter e-commerce app and asked Copilot where is the product reviews feature.

In the answer, Copilot told me which files to look at.

Quite handy when exploring a new codebase. 👍


@workspace /explain selected code

Another helpful feature is /explain.

Just select some code in the editor, then enter /explain in the prompt.

After explaining the code, Copilot even gives you a suggestion for the next prompt, so you can iteratively learn about the codebase.


Write /tests for existing code

Next up: writing tests!

You can open any file in your project and ask Copilot to write tests for it.

In this example, it generated widget tests for my AsyncValueWidget helper class.

But are the tests any good?


Write Tests: Output

In my example, Copilot generated 6 test cases covering all the various use cases.

So, code coverage was good. ✅

However, the generated code has a couple of compile errors. 👇


Fixed Tests (After Minor Tweaks ⏱️)

The errors were so simple that I fixed them in 10 seconds (no kidding!) 💪

And it would have taken me much longer to write the tests by hand (without Copilot).

I still need to test this feature with more complex scenarios, but so far, I'm impressed!


Inline Chat: Add New Code

Next Up: Inline Chat

From the editor, you can hit CMD+I to open the inline chat and ask Copilot to write some code.

This time, Copilot managed to add a simple method to a class, based on the surrounding code.

But other times, the output was incorrect and required some tweaks.


Inline Chat: Edit Existing Code

Copilot can edit existing code, too.

When asked to modify a button callback to add some conditional logic, Copilot showed a side-by-side code diff.

And in this particular task, it did well!


Fix using Copilot

Quick Fix is a well-known IDE assist for fixing issues with your code, and we now have an additional "Fix with Copilot" option.

I used it to fix a switch statement with a missing case, but Copilot failed to produce valid code.

So, for now, I'll stick with the old IDE assist.


Resolve @terminal errors

Ever got stuck with the dreaded "version solving failed" error when updating an old Flutter project?

In this case, the Flutter CLI already suggested which dependency to update, but I missed it. 😅

But what's cool is that when a command fails, a ✨ icon will be waiting for you.


Resolve @terminal errors: Suggestion

Once the ✨ is clicked, the Copilot chat pops up with a suggestion to fix the problem.

In this case, the answer was the same as what the Flutter CLI had suggested (just more chatty).

But other times, you may get cryptic error messages, and this feature could be a lifesaver!


Generate Commit Message

If you pay attention, you'll see the ✨ icon appearing in many different places.

One of them is in the source control tab, where Copilot can generate a commit message for your changes.

Handy!


What else can Copilot do?

Just hit SHIFT+CMD+P and enter "copilot" in the command palette to reveal all the options.


So, what's my opinion of the updated Copilot?

As an AI assistant, it has improved a lot compared to two years ago.

If you want to write tests or documentation, it can save you a lot of time.


Sometimes, I already know what code I want to write.

And when that's the case, I'd rather write the code myself than play ball with Copilot and correct its mistakes.

With that said, I see myself using it more and more, and I can't wait to see how it will evolve.


BONUS: You can install the VS Code Speech extension to talk to Copilot and tell it what to do.

Here's a video of me using it (sound on!):


Here's another attempt, where I asked Copilot to create a sliver version of a pre-existing widget class.

Though, as I'm not a native English speaker, Copilot often gets my words wrong and messes up the result. 😅

Still, speech-to-text is a great addition for accessibility.


Found this useful? Show some love and share the original tweet 🙏


Previous Next
Opening URLs with xcrun / adb Toggle Inlay Hints in VSCode