VSCode set width for code formatting of arrays etc

Question

If my array goes over a certain length:

const List hts = [200, 195, 190, 185, 180, 175, 170, 165, 160, 155, 150, 145];

VSCode formats it like this:

const List hts = [
  200,
  195,
  190,
  185,
  180,
  175,
  170,
  165,
  160,
  155,
  150,
  145,
  140
];

I'd rather it didn't since it makes a short array take up half the page. How can I change this?

Also I get even weirder formatting like this which means if I comment out a line it only comments out half the line:

This:

   Text('RESULTS', style: kMainText),
   Text('Additional', textAlign: TextAlign.center, style: kSmallText),

Gets formatted as this:

   Text('RESULTS', style: kMainText),
   Text('Additional',
          textAlign: TextAlign.center, style: kSmallText),

The second line is one line but I have to comment it out as two lines. It seems like there's some kind of 'length' setting somewhere that I could alter to avoid this. How can I edit all this behaviour?

Answer 1

The Dart VS Code extension uses dart_style for formatting, which ships in the Dart SDK.

There is a setting called "maximum line length" which can be configured in your VS Code settings in the Dart section which will allow lines to be longer before they wrap (though note that this applies to all lines, not just lists).

There's an issue requesting an alternative (more customisable) formatter in VS Code here:

https://github.com/Dart-Code/Dart-Code/issues/914

Please add a to the issue if it's something you'd like to see.

Answer 2

The dart formatter will preserve line breaks in an list if there's a comment line at the head of this list.

For example, to format a very long list in Dart:

[
  // yeah
  a,b,c,
  d,e,f,
];

See the test case (link) from official dart style repository (https://github.com/dart-lang/dart_style)