Launch Club

Auto Format Flutter & Dart Code on Save in VSCode

Dart VSCode

Published Nov 29, 2023

Marcus Ng

Marcus Ng

Formatting your Flutter and Dart code on save is a huge time saver, and it’s super easy to do in VSCode!

  1. Open the Command Palette (Ctrl/Cmd + Shift + P)
  2. Search for “Open Settings” and select “Preferences: Open User Settings”
Open user settings
  1. Search for format and make sure “Editor: Format on Save” is checked
Format on save toggle

Now if you paste the following code into a dart file and hit save, it should auto format immediately.

// Before
void main() { print('Hello, world!'); }

// After
void main() {
  print('Hello, world!');
}

If it’s not working, first double check that you have the Flutter & Dart VSCode extensions installed.

You can also open “Preferences: Open User Settings (JSON)” from the Command Palette and make sure that "editor.formatOnSave" is set to true.

// settings.json
{
  ...
  "editor.formatOnSave": true
}

Flutter and Dart

made simple.

Everything you need to build production ready apps.

No spam. Just updates. Unsubscribe whenever.