Tired of re-running Flutter code generation? Here’s how to do it with a shortcut in VS Code.
Code generation is a powerful tool. I love it. It can significantly decrease amount of boilerplate code you have to write.
With it, however, we must run terminal commands in order to make our app work. And the command is big: it’s boring to write it every time.
But VS Code is here to simplify our lives.
The command that you have to run is the following:
// To build it once
dart run build_runner build// To «watch» for file changes and generate code on the go
dart run build_runner watch
And if you want to delete the previously generated files, you need to add a parameter:
dart run build_runner build --delete-conflicting-outputs
dart run build_runner watch --delete-conflicting-outputs
Pretty big, huh? I wanted to avoid typing it again and again. There were two solutions for me:
- To have this command written in a notepad. I could then open it and copy the command, then insert it to the terminal;
- In the terminal window, I could press the ↑ Up arrow and it would show me the command history. So I could “rerun” it from there. But it was not always a solution as in terminal I have been running other commands as well so sometimes the history was big.
One more problem is that, from my experience, sometimes code generation doesn’t properly work until you run two more commands. I bet you know them.
# This one not only removes the temporary dependency files, but also erases the cache that generator creates:
flutter clean# Get dependencies again:
flutter pub get
So usually I was just pressing ↑ Up arrow + Enter 3 times. It didn’t feel right.
Create a VS Code task
In VS Code, you can create so-called tasks. Those are predefined commands that can be easily executed. For example, everytime before running your app. Or on a shortcut.
Let’s create our generator task.
Press ⌘Cmnd + ⇧ Shift + P. It will open the command palette. Select Tasks: Open User Tasks.
If you don’t have any tasks configured yet, it might open another panel like this:
Select Others. It must open a file called tasks.json:
And now, we need to modify it by adding our task. Here it is. Copy it and insert it to the
tasks array. I’ll explain the config later on.
Create a VS Code shortcut
Now we need to bind that task to a shortcut.
Open Preferences → Keyboard Shortcuts → Open Keyboard Shortcuts (JSON) as in the GIF:
Now paste the following shortcut there:
And save the file.
Try it out!
Now you can press ⌘ Cmnd + G in a Flutter project opened in VS Code and observe the result!
We’ve successfully ran the generator. Now we have a watcher running. It is to the right of the terminal window. If you want to terminate it, tap on it, focus the terminal window and press ⌃ control +C.
This saves me a lot of time as I run code generation pretty often. But now it could be done in a second.
You can also configure it to run on app launch (when you press F5) before your app starts. So this way you will always regenerate the code before running the app.
Personally, I don’t find it’s convenient, so I better run it myself when I’d like to. That’s why this shortcut is a superhero for me.