【Flutter】【Dart】dartfmtとLinter for Dartを使ってEffectiveなコードをEffectiveに書く

FlutterおよびDartのフォーマッタやlintツールを調べたのでまとめます。

動作環境

$ flutter docter -v
[✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.15 19A487m, locale ja-JP)
    • Flutter version 1.9.1+hotfix.2 at /path/to/flutter
    • Framework revision 2d2a1ffec9 (8 days ago), 2019-09-06 18:39:49 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

~~~中略~~~

[✓] IntelliJ IDEA Community Edition (version 2019.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 39.0.5
    • Dart plugin version 192.6603.23

Dart Style Guide

Dartでは公式ドキュメントとしてStyle Guideが提供されています。
https://www.dartlang.org/guides/language/effective-dart/style

この記事ではDartを効率的に読み書きするためのルールが数多く定められています。
このドキュメントを完璧に覚えてルールをすべて守れればよいですが、そんなことは無理なので以降で紹介するツールを用いて自動でルールに従うようにしましょう。

Formatting Flutter code

https://flutter.io/formatting/
Flutterの公式ドキュメントでもフォーマットに言及されたものがあります。
この記事ではフォーマットを維持していく上でのとても重要なルールが明言されています。

• 1つの共有コーディングスタイルを持つ
• コーディングスタイルを自動フォーマットによって強制する

他の言語でも通用する考え方なので心に留めておきましょう！

dartfmt

https://github.com/dart-lang/dart_style
dartfmtはDart SDKに入っている公式のフォーマッタです。
dartfmtは下記のEffective DartのStyleにて定められたコーディングスタイルを採用しています。
https://www.dartlang.org/guides/language/effective-dart/style

dartfmtはコマンドとしても利用可能ですが、IntelliJを利用している場合、ファイル保存時にdartfmtを都度実行しフォーマットを自動整形する設定が可能です。

設定方法

IntelliJの公式ドキュメントではdartfmtの利用方法を記載しているのでこちらを参考にしましょう。
https://pleiades.io/help/idea/code-style-dart.html

dartfmtの有効化は「IntelliJ IDEA→Preferences→Editor→Cord Style→Dart→Dartfmt」の「Use the dartfmt tool when formatting the whole file」にチェックを入れるだけです。

この設定を入れると、Command + Alt + Lでdartfmtによる自動整形を実行することができます。

個人的には都度コマンドを叩くよりも保存時に自動的にフォーマットをかけてほしい派です。
「InterlliJ IDEA→Preferences→Languages & Frameworks→Flutter→General→Format code on save」と「InterlliJ IDEA→Preferences→Languages & Frameworks→Flutter→General→Organize imports on save」にチェックを入れると設定可能です。

Linter for Dart

Linter for Dartはlintのルールを設定し、設定したルールに従っていないコードをレポートしてくれます。
https://github.com/dart-lang/linter
dartfmtで自動整形できないようなルールを設定し、コード保存時に警告を出してくれます。

Linter for DartもDart SDKの中に含まれるため、Dartが実行できる環境であればすでに利用できます。

設定方法

Linter for Dartでは下記のルールが有効化できます。
http://dart-lang.github.io/linter/lints/

上記のルールの中から自分で有効化したいルールをanalysis_options.yamlに記述していきます。
例えば、if文の中で処理をしないような記述を弾くempty_statementsを設定してみます。
analysis_options.yamlを下記のように記述し、Projectのルートにファイルを配置します。

linter:
  rules:
    - empty_statements

そしてこのルールに該当するようなコードを書くと、白い波線が該当箇所に引かれ、マウスオーバーすると該当ルールが表示されます。

こうすることで、事前にルールに合っていない記述方法にすばやく気づくことができます。

ちなみに参考となるyamlファイルはココらへんでしょうか。
https://github.com/dart-lang/linter/blob/master/example/effective-dart.yaml
https://github.com/dart-lang/linter/blob/master/example/google.yaml
https://github.com/flutter/flutter/blob/master/analysis_options.yaml

まとめ

dartfmtとLinter for Dartを使ってEffectiveなFlutter/DartコードをEffectiveに書いていきましょう！