【Flutter】VSCodeでの開発が便利👍になる機能、設定まとめ

VSCodeでFlutterの開発をする際に時間節約になる公式機能や設定をまとめました（サードパーティの拡張以外です。またFlutterに特有のものでないものもあります）。

他におすすめがあればコメントで教えてください。

ツリー構造のガイドを表示する

Android Studio/IntellliJ ではおなじみのエディタ上に表示されるガイドです。

コード構造を把握しやすくするための拡張は色々ありますが、この表示が個人的には一番わかりやすいです。

ツリー構造のガイド

設定方法

1. コマンドパレット（Ctrl/Cmd+Shift+P）から「Preferences: Open Settings (JSON)」を呼び出す
2. JSONに以下のエントリーを追加する

{
    "dart.previewFlutterUiGuides": true,
    // 以下はオプション
    "dart.previewFlutterUiGuidesCustomTracking": true,
    "dart.closingLabels": false,
}

3. VSCodeを再起動する

公式から補足

• 画像で線がダッシュになっている😭 のは、フォントサイズや行の高さなどによる影響みたいです。つながった線にするには editor.lineHeight を15で固定する必要があるとのこと
• dart.previewFlutterUiGuidesCustomTracking も併せてtrueにすることで描画の遅延を防ぐことができます
• この表示によってクロージングラベル（下記画像）が不要になる人もいるかと思います。クロージングラベルを非表示にするには dart.closingLabels をfalseにします

クロージングラベル

カスタムのSnippetを追加する

自分の使い方や癖に合ったカスタムができるので、一度設定してしまえばかなりの時間節約になると思います。

カスタムSnippet / ファイル名からクラスを自動生成

設定方法

1. コマンドパレット（Ctrl/Cmd+Shift+P）から「Preferences: Configure User Snippets」＞「dart.json (Dart)」を呼び出す
2. JSONに以下のフォーマットでエントリーを追加する

{
	"Snippetの名称": {
		"prefix": "トリガーキーワード",
		"body": [
			"実際のコード",
			"次の行はこのようにする",
		],
		"description": "Snippetの説明",
}

補足

• エントリーの作成は snippet generator を使うと便利です。
• ファイル名などの変数を組み込むこともできます。詳しくはこちら（公式）

個人的に使っているおすすめの設定

クラス名にファイル名を自動で反映

	"Named class": {
		"prefix": "Named class",
		"body": [
			"class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} {",
			"  $1",
			"}",
		],
		"description": "Named class",
	},

snippet generator コピペリンク

ファイル作成後、prefixの項目通り named〜 とエディタに入れればSnippetが補完の一覧に出てくるので、選択してtabかenter。これでクラス名がファイル名そのままになります（大文字小文字、アンダーバーのありなしも自動調整）。

たとえば「todo_model.dart」というファイルだと、「TodoModel」というクラスが作成できます。上記サンプルは何も継承しない素のクラス用ですが、似たような使い方で、StatelessWidgetやRiverpod等のConsumerWidget用のSnippetも作ると便利です。

• StatelessWidget用
  snippet generator コピペリンク

• ConsumerWidget用
  snippet generator コピペリンク

ファイル保存時の自動アクションを追加する

Ctrl/Cmd+Sで保存したときに自動で行ってくれるアクションを追加することで時間節約になります。

設定方法

1. コマンドパレット（Ctrl/Cmd+Shift+P）から「Preferences: Open Settings (JSON)」を呼び出す
2. JSONに以下のエントリーを追加する

{
    // ①コード整形の場合
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        // ②コード修正の場合
        "source.fixAll": true,
	// ③importの順番整理の場合
        "source.organizeImports": true,
    },
}

②コード修正について

最近追加された「Fix All」コマンドです。
"PROBLEMS"として上がってくるもののうち、書いた本人が判断する必要性の薄いものが自動修正されるっぽいです。

たとえば、、

const duration = const Duration();
// ↓↓↓
const duration = Duration();

final text = "text";
// ↓↓↓
const text = "text";

final list= List<int>();
// ↓↓↓
final list= <int>[]; 

（2022.02.14 追記）
（＋ 未使用のimportなど） 👉 ③の機能でした。

③importの順番整理について

Effective Dartのベストプラクティスに沿った順番になります。

たとえば、、

import 'package:my_app/todo_list.dart';
import 'dart:math';
import 'package:my_app/todo_model.dart';
import 'package:flutter/material.dart';

// ↓↓↓

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:my_app/todo_list.dart';
import 'package:my_app/todo_model.dart';

（2022.02.14 追記）
未使用 import の自動削除は②ではなく、こちらの "source.organizeImports" の機能でした。私の勘違いか、仕様変更があったのかもしれません。

括弧のペアを色分けする

拡張のBracket Pair Colorizerが有名ですが、最近公式のものが追加されました。

Bracket Pair Colorizerよりも大きめのファイルでの描画パフォーマンスが良いそうです。（ただしコメントアウトしたときも色付けが残るなどの違いあり）

設定方法

1. コマンドパレット（Ctrl/Cmd+Shift+P）から「Preferences: Open Settings (JSON)」を呼び出す
2. JSONに以下のエントリーを追加する

{
    "editor.bracketPairColorization.enabled": true,
}

（2021.11.05 追記）
また以下の設定を追加することで括弧間に補助線を表示させることができます。

{
    "editor.guides.bracketPairs": true,
}

括弧の色分けと補助線追加

依存パッケージをコマンドパレットから追加する

最近追加された「Dart: Add Dependency」と「Dart: Add Dev Dependency」コマンドです。

依存パッケージの追加

クラス名変更時にファイル名を自動で変える

（2021.10.5 追記）
クラス名を変更するとファイル名がそれに合わせる形で自動的に変更されます。また別ファイルの参照リンクも変更してくれます。（参考）

条件は以下の通り。

• Dart SDKのバージョンが2.15以上であること
• クラス名とファイル名が一致していること（大文字小文字、アンダースコアは無視される）
• 設定が以下の通りになっていること

{
    "dart.previewLsp": true,
    // always, prompt（選択制）, never のオプションあり
    "dart.renameFilesWithClasses": "always",
}

最後に

以上です。ハッピーFlutterライフを！