how to change dart line length in vscode when formatting dart files?

Question

i'm using VS Code for flutter development and one issue i have is code formatting (styling) which is not as customizable as it is in android-studio. my problem is that each time vs code saves dart files it will break my lines very short like below:

var tuple =
       settings.arguments as Tuple3<String, int, Field>;

obviously this is what i want :

var tuple = settings.arguments as Tuple3<String, int, Field>;

how can i solve this problem?

Solution 1

To change the line length in VSCode

open settings.json and add the following lines

"dart.lineLength": 120,
"[dart]": {
    "editor.rulers": [
        120
    ],
}

SIDE NOTE: if you wish to change the dart line length for a single project that you have in VSCode create a .vscode/settings.json file and add configuration written above in that file.

to change dart line length in Android Studio go to

Settings > Editor > Code Style > Dart and change line length

Solution 2

You need to change 2 settings in settings.json:

"dart.lineLength": 150,
"[dart]": {
    "editor.rulers": [
        150
    ],
}

If you do not change the second one, you'll still see the vertical "ruler" at 80 chars width.

Solution 3

It seems like you are hitting line length limit.

Default maximum line length is classic 80 characters, so for your code you would need a lot of padding to hit the limit so formatter would break the line. If this is an issue - consider splitting your code.

This is properly formatted:

class MyApp {
  void insideclass() {
    if (true) {
      if (true) {
        if (true) {
          if (true) {
            if (true) {
              if (true) {
                if (true) {
                  if (true) {
                    var tuple =
                        settings.arguments as Tuple3<String, int, Field>;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
class MyApp2 {
  void insideclass() {
    if (true) {
      if (true) {
        if (true) {
          if (true) {
            if (true) {
              if (true) {
                if (true) {
                  var tuple = settings.arguments as Tuple3<String, int, Field>;
                }
              }
            }
          }
        }
      }
    }
  }
}

However if 80 is actually too small for you, you can also change that in VSCode in the extension's settings.

Solution 4

For Android Studio

Android Studio -> Preferences -> Editor -> Code Style -> Dart -> Line length

View more solutions

Comments

[Chris]

I've added both of these to my settings json and still not working ... it's weird, it used to work and then after reinstalling dart it no longer works no matter what

[Chris]

The " is missing before the [dart]" settings. This solution works for me. Chek for duplicates in the settings.json file too

[chemamolins]

@Chris You need a pair of curly brackets { } closing everything.

[Ansh Saini]

But how to get rid of the ruler altogether? I want the lineLength limit. I just don't want the ruler.