[VS Code] Dartでファイル保存時にセミコロンを自動挿入するフォーマット設定をしてみた

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、Visual Studio Code（VS Code）でDart（Flutter）のコードを編集する際に、ファイル保存時にセミコロン（;）を自動挿入するフォーマット設定をしてみました。

必要な設定

Dartエクステンションの導入

Dartの公式エクステンションをVS Codeにインストールします。

• review-details - Dart - Visual Studio Marketplace

これにより、行末尾にセミコロンが付いていない箇所ではExpected to find ';'.という構文エラーが出るようになります。

settings.json作成

.vscode/settings.jsonが未作成の場合は作成します。

mkdir .vscode
touch .vscode/settings.json

settings.jsonに次のいずれかの記述を追加します。

.vscode/settings.json

{
  "[dart]": {
    "editor.codeActionsOnSave": {
      "quickfix.insertSemicolon": true,
    }
  }
}

//もしくは
{
  "[dart]": {
    "editor.codeActionsOnSave": {
      "quickfix.insertSemicolon": true,
    }
  }
}

後者の記述はDartのコードにのみ設定を適用することができます。

これによりDartのコードを編集する際に、ファイル保存時にセミコロン（;）が自動挿入されるようになります。

補足

セミコロンが自動挿入されないパターン

下記のMyApp({super.key})のようにクラス初期化の行では、自動でセミコロンが挿入されません。

class MyApp extends StatelessWidget {
  const MyApp({super.key})

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: generateRoute,
      initialRoute: '/',
    );
  }
}

A function body must be provided. Try adding a function body.とあるように関数の記述が不足していると判断されるためです。

formatOnSaveの有効化は必須ではない

Prettierなどのフォーマッターのエクステンションを導入して、ファイル保存時の自動フォーマットを利用するためには、VSCodeのsettings.jsonでeditor.formatOnSaveの有効化が必要です。

しかしDartエクステンションの場合で確認してみたところeditor.formatOnSaveの有効化は不要でした。

てっきり必須だと思っていたのですが、VS Code本体の設定は参照しないようです。

参考

• VSCodeでFlutter(dart)のコードに自動でセミコロンを挿入する設定 - Qiita
• dart - Visual Studio Code Flutter Format is Not Working with My Indent Space Value - Stack Overflow
• [Flutter] XMLファイル（Info.plist）をVSCodeから編集したい | DevelopersIO

以上