Help us understand the problem. What is going on with this article?

【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」にチェックを入れるだけです。
スクリーンショット 2018-09-02 22.59.27.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」にチェックを入れると設定可能です。
スクリーンショット 2018-09-04 21.01.50.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のルートにファイルを配置します。

linter:
  rules:
    - empty_statements

そしてこのルールに該当するようなコードを書くと、白い波線が該当箇所に引かれ、マウスオーバーすると該当ルールが表示されます。
スクリーンショット 2018-09-04 21.20.23.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に書いていきましょう!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした