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?

Backslide

Answer 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

Backslide

Is it possible to customize that for a single file? – Monson

@MarwinLebensky I don't think so – Backslide

Answer 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.

Metamorphism

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 – Music

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

@Music You need a pair of curly brackets { } closing everything. – Antre

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

There is User & Workspace setting in vscode, make sure you set both, workspace setting overrides user setting – Kakaaba

To completely remove it use the value 0, to remove the ruler you can just remove all values from editor.rulers. – Vernverna

Answer 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.

Mogador

Answer 4

For Android Studio

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

Miscall

Answer 5

For VSCode in settings: photo

For Android Studio: photo

Saddlery

Welcome to SO! Though we thank you for your answer, it would be better if it provided additional value on top of the other answers. In this case, your answer does not provide additional value, since another user already posted that solution. If a previous answer was helpful to you, you should vote it up once you have enough reputation – Yvette

Answer 6

Your settings.json should be like so,

{

 "dart.lineLength": 150,
    "[dart]": {
        "editor.defaultFormatter": "Dart-Code.dart-code",
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.tabSize": 2,
        "editor.rulers": [
            220
        ],
        "editor.detectIndentation": false,
        "editor.selectionHighlight": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggestSelection": "first",
        "editor.tabCompletion": "onlySnippets",
        "editor.wordBasedSuggestions": false
    },}

and after saving your settings you need to reload your project or reformat by:

1. right click

2. select format

Lesbian

Answer 7

It's worth noting there is also a linting rule for enforcing LESS THAN 80 characters: lines_longer_than_80_chars

As other people said, you have to customize this value in the IDE settings, since there isn't any way to enforce another value. But if you want to enforce less than 80 characters, you can use the lint rule above.

I wanted to allow more than 80 characters, but I won't change it because of this interesting statement from this lint rule documentation:

If you really find yourself wanting lines longer than 80 characters, our experience is that your code is likely too verbose and could be a little more compact.

Notebook

Answer 8

Its a line kind of to show you where you should cut your code just change the "editor.rulers: [ 150 ]" in setting.json which you can find if you go to setting and search for example font ligature then click the edit in settings text which is underlined but there are many ways to find it of course then it will disappear. Its so annoying to look at.

Logy