Why does VSCode constantly mess up my Flutter code with weird identation?-CodePudding

When I save my Dart files in VSCode, it often messes their identation in weird ways, Now, I already remember it creating new lines when coding in JS, but at least that was unnoticable. But here? It looks this:

        body: screens[
            currentIndex]

and this:

class RemotePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
          body: Column(children: [
        Row(children: [
          PopupMenuButton(
              itemBuilder: (BuildContext context) => [
                    PopupMenuItem(
                        child: Row(children: [
                      Iconify(AkarIcons.youtube_fill),
                      Text("YouTube")
                    ]))
                  ])
        ])
      ]));
}

Can anybody tell me why this happens, and how can I fix it?

CodePudding user response：

Answer

It's the trailing commas and the 80 column size. In Dart, you don't have a problem if you put a trailing comma, in fact, in Flutter this is suggested that you do to fix these indentation issues. How your code would be:

Widget build(BuildContext context) => Scaffold(
        body: Column(
          children: [
            Row(
              children: [
                PopupMenuButton(
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Row(
                        children: [
                          Iconify(AkarIcons.youtube_fill),
                          Text("YouTube"),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      );

About the 80 column size, it is on the Dart settings for VSCode, but this is suggested as all Flutter/Dart projects use this.

Suggestion

Maybe try and activate the Analizer linter require_trailing_commas