VSCodeで保存した時にdart fix --apply で直せるものを自動で修正する

はじめに

こんにちは、エンジニアのkeitaMaxです。

VSCodeで保存した時にdart fix --applyで直せるものを自動で修正するように設定していこうと思います。

やりたいこと

前回VSCodeでダブルクォーテーションで赤波線が着くように修正しました。

今回はそれを、VSCode上で保存した時に自動で修正できるように設定していこうと思います。

解決策

.vscode/settings.jsonを作成し、以下のようにすることで自動修正が走るようになります。

.vscode/settings.json

{
  "[dart]": {
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports": "explicit"
    },
    "editor.formatOnSave": true
  }
}

editor.codeActionsOnSaveで保存時に自動で実行するコードアクションを指定することができます。
"source.fixAll": trueで保存時に修正するようにしています。
"source.organizeImports": trueでimportの並び替えなどを行なっています。

実際に以下のファイルの状態で保存してみます。

import 'package:go_router/go_router.dart';
import 'package:flutter/material.dart';

class TopPage extends StatelessWidget {
  const TopPage({super.key});
  static const text = "test";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Top Page')),
      body: Center(
        child: FilledButton(
          onPressed: () {
            // '/second' に遷移
            context.push('/second');
          },
          child: const Text('Second Pageへ'),
        ),
      ),
    );
  }
}

保存するとimportが入れ替わり、シングルクォーテーションに修正されます

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart'; // importが入れ替わった 

class TopPage extends StatelessWidget {
  const TopPage({super.key});
  static const text = 'test'; // シングルクォーテーションに修正された

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Top Page')),
      body: Center(
        child: FilledButton(
          onPressed: () {
            // '/second' に遷移
            context.push('/second');
          },
          child: const Text('Second Pageへ'),
        ),
      ),
    );
  }
}

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！