CODEWITHSUNDEEP
flutterdartvisual-studio-code
Fabio Dias
Fabio Dias

Reputation: 1406

Is there a way to auto-format flutter with vscode?

I was wondering if there is a library like Eslint for Flutter/Dart that will automatically insert semicolons and trailing commas when I save the file.

Upvotes: 59

Views: 100128

Answers (13)

martinseal1987
martinseal1987

Reputation: 2429

You can format every flutter file with one command like this...

dart format . -l 120

It sets the line length I believe, which as a side effect formats all your code its brilliant

Upvotes: 26

FreakyAli
FreakyAli

Reputation: 16479

On VS code for mac you can try this:

Go to Settings>Settings>

enter image description here

Then Text Editor>Formatting

enter image description here

Turn on Format on Save and you are done

Upvotes: 3

Yash
Yash

Reputation: 2033

You can use the dart format . to format all folder. Depcreated flutter format .

Also, you can install flutter vs code extension and enable format on save to format a particular file

Upvotes: 4

Rahul Raj
Rahul Raj

Reputation: 1493

Open VS Code settings

  • File-> Preferences->Settings

Open VS Code settings

Text editor->Formatting

Format settings

  • Enable Format on paste
  • Enable Format on save

Upvotes: 18

Nisha Jain
Nisha Jain

Reputation: 757

A simple shortcut for format the flutter code (Dart)

  Ctrl + ALT + L

Your code will be formatted.

Upvotes: 2

Akash Lilhare
Akash Lilhare

Reputation: 555

you can use this command as mentioned in the official documentation https://flutter.dev/docs/development/tools/formatting

flutter format .

Upvotes: 5

mLstudent33
mLstudent33

Reputation: 1175

I was briefly on VSCode now back trying out Intellij but remember the hot key combination being: ctrl + shift + i. I could not tell if it was ctrl+shift+L or i but pretty sure it was i. Also trailing commas helps the formatter do its job as the Flutter.dev documentation says.

Upvotes: 0

Zchary
Zchary

Reputation: 1246

  1. install the flutter extension.
  2. append or modify these lines in the settings.json file:
"[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
}

after this, you can format your dart file with the save (ctrl+s) action.

Upvotes: 77

Leonardo Ferreira
Leonardo Ferreira

Reputation: 11

if this image appears without a bar from vs code bar vs code

go in Preferences -> Settings and look for -> Default Formatter

setting and change to Dart and you're done

Upvotes: 1

Msmkt
Msmkt

Reputation: 1611

With VS Code version 1.53 ( I am sure previous have this too) you don't need to install any special extension. Just navigate to:

Preferences -> Settings -> Text Editor -> Formatting

make sure "Format on save" is enabled

enter image description here

with every time you hit Ctrl + S your file will be saved as well as code formatted.

Upvotes: 102

gbaccetta
gbaccetta

Reputation: 4577

actually optional colons are what allow automatic formatting... I'm not sure it is really helpful to automatically have a colon or semicolon at the end of a line as it may varies and also I do not things there is an extension that effectively do that (except having some sort of other shortcuts)...

So although it does not answer exactly your question, it may help other users looking on how to format their flutter code: if you have all the optional colons the best way is to run the command included in the flutter plugin. From the terminal just run flutter format lib and it will format all the dart files in the lib directory and subdirectory. You can change lib with whatever directory you like.

Finally you could add some extension and activate few plugins to get a much readeable file. But that is a matter of personal appreciation. I personally use: Bracket Pair Colorizer 2, Indent-Rainbow and activate the two dart option for flutter outline to get this result :

enter image description here

Upvotes: 8

Mohamed Abdulhalim
Mohamed Abdulhalim

Reputation: 68

In Extensions, search for [Prettier - Code formatter]

It formats your code once you click ctrl+S

Upvotes: 2

KangarooRIOT
KangarooRIOT

Reputation: 631

There is a Code Formatting help area in the documentation.There is a section for VsCode Here. It explains that

To automatically format the code in the current source code window, right-click in the code window and select Format Document. You can add a keyboard shortcut to this VS Code Preferences.

After installing the Flutter extension.

I also found another Stack Overflow post Here that may be able to help you with a few extension suggestions and a way to make your own bindings for/in VsCode.

Upvotes: 6

Related Questions