バッテラが如く

いつもお世話になっております。

【Flutter】コードフォーマットをしても綺麗に保つ方法  (VSCode Formatter, Auto Formatter)

この記事の情報は次のバージョンで動作確認しています。

  • MacOS Monterey (12.1)
  • Flutter (v2.10.4)
  • VSCode (v1.67.2)
  • Flutter

    はじめに

    以前Flutterの自動フォーマッターを解除する方法についての記事を書きました。

    www.m2game.net

    今回は自動フォーマットは使い綺麗に表示するにはどうしたらいいか?

    を深ぼっていく記事となります。

    コードフォーマットによる嫌な点をピックアップしてそれぞれの対策を書いています。

    文字数が長いと分割されてしまう

    1行の文字数制限があります

    このLine Lengh1行の最大文字数になります。

    文字数がこの数値を超えると2行に分割されます。
    ※デフォルトは80に設定されています

    強制改行が嫌な場合はLine Lengh を多めに取ればいいと思います。

    丸括弧の対になっている部分が分かりづらい

    結論先言うと、行の終わりにカンマ(,)を置くといいという話です

    これをするとこうなります。

    ↑↑ Before ↑↑

    ↑↑ After ↑↑

    行数は増えますが、()の対応関係が分かりやすくなってませんか?

    こっから長い理由解説になるので、飛ばしてもらってもOKです。

    Flutterのプログラムはセミコロン(;)で区切らないコードの書き方になりがちなので、改行されにくいという問題があります。

    宣言的UIを採用しているフレームワークは全部これが起きると思います。(SwiftUIとか)

    改行されずに1行にまとまると、丸括弧()の対応関係が分かりづらくなります。

    特にコピペやコードを消した時に、()の数がなんか足らなくてコンパイルエラーが出るけど、どこが悪いかが検討つかなくなるってことありませんか?笑

    あるあるです。

    これはFlutterやってる人なら理解できるはずです。たぶん。

    下のコードはHelloWorldを表示すだけの実装ですが、行の最後に ")))" という感じで閉じ括弧が集中します。

    本来VSCodeのエディタ機能として ")"で閉じたクラス名を表示してくれる機能がありますが、

    最後の1個分しか表示されないため、括弧のエラーが出た時に対となる部分が迷子になります。

    という理由からカンマで区切ると非常に全体的に見やすくなるという話でした。