Zenn
🗂️

【Flutter】VSCodeとAndroid Studioでimportの整列を統一する方法

2025/01/15に公開
Flutter
VS Code
Android Studio
Dart
FVM
tech

はじめに

Flutterプロジェクトでチーム開発を進める際、開発環境が統一されていないとコードフォーマットやimport順序がばらつくことがあります。しかし、Flutterはクロスプラットフォームなため人によって開発に使用しているエディタがチーム内で異なる場合があります。（まさに自分が現在このケースだったので記事にしました）
本記事では、VSCodeとAndroid Studioの両方でインポートフォーマットを統一する方法を解説します。

1. 必要なパッケージの導入

FVM（Flutter Version Management）

FVMを利用すると、プロジェクトごとにFlutter SDKのバージョンを管理でき、Dart SDKのバージョンも統一できます。複数プロジェクトを管理している場合に便利です。
この記事では、FVMをすでに導入している前提で進めていきます。

import_sorter パッケージ

https://pub.dev/packages/import_sorter
Dart用のインポート整列ツールで、次のような特徴があります：

  • インポート文をグループごとに整列
  • 空行やアルファベット順の調整

インストール

プロジェクトに import_sorter を追加します。

pubspec.yaml
dependencies:
  import_sorter: ^4.6.0

設定ファイル

pubspec.yamlに下記のような整列ルールを記述します。

pubspec.yaml
import_sorter: 
  comments: false # ファイル上部に自動生成コメントを追加しない
  ignored_files:  # 生成ファイルを無視
    - '\/*\.freezed.dart'
    - '\/*\.g.dart'       
  remove_unused: true      # 未使用のインポートを自動的に削除
  alphabetize: true        # 各インポートグループ内でアルファベット順に並べ替え
  blank_lines_between_groups: 1 # インポートグループ間に1行の空行を追加
  sort_directives: true    # export文やpartディレクティブも並べ替え対象に含める

2. VSCodeでの設定方法

保存時に自動適用する設定

VSCodeで保存時に自動で import_sorter を実行するには、Run On Save 拡張機能を使用します。

  1. 拡張機能のインストール

    • VSCodeのマーケットプレイスで「Run On Save」をインストールします。

  2. .vscode/settings.json に設定を追加

    settings.json
    {
  "emeraldwalk.runonsave": {
  "commands": [
    {
      "match": ".dart$",
      "cmd": "fvm flutter pub run import_sorter:main"
    }
  ]
}

3. Android Studioでの設定方法

File Watcherプラグインのインストール

  1. File > Settings を開く。
  2. Plugins > Marketplace で「File Watchers」を検索し、インストールします。
  3. Android Studioを再起動します。

File Watcherの設定

※プロジェクトごとに設定が必要です

  1. Settings > Tools > File Watchers から新しいWatcherを作成します。

  2. 以下のように設定します：

    • Name: (仮)Import Sorter (アプリ名を入れるのがいいかも)
    • File Type: Dart
    • Scope: Project Files
    • Program: fvm または Dart SDKのフルパス
    • Arguments: dart run import_sorter:main
    • Working Directory: /Users/<ユーザー名>/... (プロジェクトルートの絶対パス)

4. import_sorter を実行する

上記のVscode、AndroidStudioの設定をすることで、保存時にimport_sorterが実行され、インポートが整列されます。

コマンドで実行したい場合は、以下を実行します：

fvm dart run import_sorter:main

5. 実行結果の確認

設定が正しく適用されていれば、保存時にインポート文が自動で整列されます。

整列後の例：

import 'package:flutter/material.dart';

import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:provider/provider.dart';

import 'package:sample_flutter_app/provider/controller.dart';
import 'package:sample_flutter_app/ui/component.dart';

まとめ

最後までご覧いただきありがとうございました。
設定する際に困ったこと等があれば教えていただけますと幸いです！

お世話になっているコミュニティ

https://flutteruniv.com/
https://galirage.com/

Discussion