【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」にチェックを入れるだけです。
<img width="782" alt="スクリーンショット 2018-09-02 22.59.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/65163/93073ae1-f982-6824-abe4-018b051c514f.png">
この設定を入れると、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」にチェックを入れると設定可能です。
<img width="893" alt="スクリーンショット 2018-09-04 21.01.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/65163/3ad721ed-ca46-5954-1e2c-132f2b151d31.png">

# 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のルートにファイルを配置します。

```yaml

linter:
  rules:
    - empty_statements
```

そしてこのルールに該当するようなコードを書くと、白い波線が該当箇所に引かれ、マウスオーバーすると該当ルールが表示されます。
<img width="412" alt="スクリーンショット 2018-09-04 21.20.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/65163/1b1dba75-415c-c9fa-e090-b25e3f5ffdd8.png">

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

ちなみに参考となる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に書いていきましょう！