幫助 Flutter 縮排程式的 trailing-commas

撰寫 Flutter 程式時，trailing-commas 可以讓 IDE 自動幫我們縮排程式，讓程式有更好的可讀性。

trailing-commas 指的是在 function、method、constructor、list 的最後一個參數或成員之後加逗號。有了這個小小的逗號，IDE 會聰明地將程式縮排換行，將每個參數或成員放在新的一行。

以下我們以 VS Code / Project IDX 為例，先介紹手動縮排，再介紹更方便的存檔時自動縮排。

• 手動點選 Format Document 縮排。
• 存檔時自動縮排。

手動點選 Format Document 縮排

以下是沒有 trailing-commas 的例子，雖然只是簡單的 Hello, SwiftUI，全部擠在一行的 return const Scaffold(body: Center(child: Text('Hello, SwiftUI!'))); 還是讓人看得有點辛苦。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('Hello, SwiftUI!')));
  }
}

加上 trailing-commas 的程式如下，我們在最後一個參數的結尾加上逗號，因此 Scaffold，Center 和 Text 的 ( ) 裡都多了一個逗號。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('Hello, SwiftUI!',),),);
  }
}

叫出 Command Palette(cmd + shift + p)，點選 Format Document，原本擠在一行的程式聰明地換行縮排，程式可讀性大大提高了 !

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Hello, SwiftUI!',
        ),
      ),
    );
  }
}

以下是另一個複雜一點加上參數 style 的例子，透過 trailing-commas 和 Format Document 實現更好的程式可讀性。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Hello, SwiftUI!',
          style: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

存檔時自動縮排

如果不想每次縮排時麻煩地點選 Format Document，我們也可以設定 IDE 存檔時自動縮排，方法如下。

從 command palette 點選 Open Settings。

切換到 Text Editor > Formatting 頁面，勾選 Format on Save。

之後想要縮排時，我們只要按下 cmd + s 即可讓檔案裡的程式自動縮排換行。

One more thing，請 AI 加入 trailing commas

我們也可以請 AI 幫忙加入 trailing commas。

以下是沒有 trailing commas 的版本，程式的縮排有點凌亂。

class SteveJobsPage extends StatelessWidget {
  const SteveJobsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Steve Jobs')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset('assets/steve_jobs.jpg'),
          const Text('Steve Jobs', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          const Text('Co-founder of Apple Inc.', style: TextStyle(fontSize: 18)),
          const Padding(padding: EdgeInsets.all(8.0), child: Text('"Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do." - Steve Jobs', style: TextStyle(fontSize: 16, fontStyle: FontStyle.italic)))
        ]));
  }
}

以下是 AI 加上 trailing commas 的版本，搭配自動縮排後程式的可讀性大大提升。

class SteveJobsPage extends StatelessWidget {
  const SteveJobsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Steve Jobs'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset('assets/steve_jobs.jpg'),
          const Text(
            'Steve Jobs', 
            style: TextStyle(
              fontSize: 24, 
              fontWeight: FontWeight.bold,
            ),
          ),
          const Text(
            'Co-founder of Apple Inc.', 
            style: TextStyle(fontSize: 18),
          ),
          const Padding(
            padding: EdgeInsets.all(8.0), 
            child: Text(
              '"Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do." - Steve Jobs', 
              style: TextStyle(
                fontSize: 16, 
                fontStyle: FontStyle.italic,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

參考連結

Code formatting